Empty, one day, a gap, and update()
The same chart object is updated four times. The all-zero case is the [0, 0] domain of Topic 6.1: the example prints what the y axis shows for it.
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
empty message shown: true chart shown: false line pieces: 0 lone dots: 0
one day message shown: false chart shown: true line pieces: 1 lone dots: 1
gap message shown: false chart shown: true line pieces: 2 lone dots: 0
full year message shown: false chart shown: true line pieces: 1 lone dots: 0
all zero, y ticks: 0