visx: D3 scales and shapes as React parts
visx draws the same string D3 would. The x labels start with 2025 because the first tick, 1 January, is a year boundary in D3's time ticks (Topic 6.3). visx's scaleUtc is used, not scaleTime: local time would shift days for people far from Ardenvale.
Four more ways to draw a chart in a React app: visx (D3 maths in small React parts), Chart.js and ECharts (canvas libraries driven by a config object), and Observable Plot (a short grammar for fast exploration). Each has a cost, and a table helps you choose.
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 a ChartJsBar component with useRef and useEffect that takes labels and values, destroys the chart in cleanup, and updates the existing chart when the props change instead of creating a new one.
A teammate passes option={{ series: [...] }} inline to an ECharts wrapper and the chart flickers on every hover. Explain and fix it.
Explain it without notes
Name the three questions you would ask to choose between D3 + JSX, Recharts, ECharts and Plot for a new chart.
Why does a Chart.js chart created in useEffect throw under StrictMode, and what is the fix?
What does it mean that visx scales are "D3's scales behind a config object"?
What do npm download counts tell you, and what do they not?
Preview
Console
Nothing logged yet.Expected console output
path starts: M0,133.75L1.374,117.936L2.747,
same path text as d3.line: true
x ticks: 2025, April, July, October
y ticks: 0, 1,000, 2,000, 3,000, 4,000