The rides line with D3 scales and axes (modules inlined)
The three project files are inlined into this one example, because the preview cannot import local files. In your project they are separate files that import each other.
The dashboard's year-of-rides line is rebuilt with a time scale, a linear scale and D3 axes, in two small reusable files. It has nice ticks, pale gridlines, month labels, an empty state, gaps for missing days and a summary for screen readers.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a title option that draws a text label above the plot, and a test line for the empty array.
Create src/charts/stations-bar.js's axes with the helpers: which of the two helpers fits a horizontal band-scale chart, and what must change?
Explain it without notes
Why does the chart take rows with dates instead of a list of numbers?
Why do the axis helpers set the font size after calling the axis?
What does the chart show for no data, one day and a missing day?
Preview
Console
Nothing logged yet.Expected console output
x ticks: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
y ticks: 0 1,000 2,000 3,000 4,000 5,000
line starts: M56,210.918L57.78,190.899L59.5
label: Line chart of rides per day, 365 days from 1 Jan 2025. Busiest day: 18 Jul 2025, 4,380 rides. Quietest day: 14 Aug 2025, 439 rides (app down).