Scales from D3, marks from React
React 19 renders asynchronously: without flushSync the rects would not exist yet when the last line runs. The width is 253.72 = 2,979 ÷ 3,992 × 340, the same rule as Topic 0.2.
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
rects: 7 first width: 253.72244488977955 height: 19.333333333333332