Awkward data: seven cases, one guarded component
Each case is its own React root. A row with null or NaN is left out rather than drawn as NaN: the filter is the one place that decides. A real dashboard would also tell the reader how many rows it skipped (Topic 14.7 does for stations).
In a React app, let D3 do what it does without touching the page (scales, line and area paths, array helpers, formats) and let React draw every mark as JSX. One owner per DOM node means no fights and no stale charts.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write Dots({ data, width }) that draws one circle per { id, value } row along a horizontal line, using d3.scalePoint for x, with key={d.id}. For an empty list it must return a <p> that says No data to draw.
The data [{ name: "A", value: 3 }, { name: "A", value: 5 }] has a duplicate name. What does React print, and how would you fix the component so that both rows appear?
Explain it without notes
Which D3 modules are safe to call during a React render, and which are not? Why?
Why should keys be ids from the data rather than array positions? Give a chart example.
Why do you build scales with useMemo, and what would be wrong with relying on it for correctness?
What happens if D3 removes an element that React rendered, and how do you avoid it?
Preview
Console
Nothing logged yet.Expected console output
normal 2 bars | bad widths: 0 | drawn
empty 0 bars | bad widths: 0 | No data to draw.
one row 1 bars | bad widths: 0 | drawn
all zero 2 bars | bad widths: 0 | drawn
a null day 1 bars | bad widths: 0 | drawn
NaN 1 bars | bad widths: 0 | drawn
negative 1 bars | bad widths: 0 | drawn