The chart module with awkward data
The chart's code is inlined here (the project's import lines can't run in the preview). The messy case shows the guard: the row with no number is left out with a warning, and the zero row is drawn with a zero-length bar.
The dashboard gets its first D3 chart: stations ranked by rides, with a month selector. A keyed join makes the bars move, appear and disappear as you change month, and every awkward case (no data, one row, a broken row) is handled.
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.
Add options.top to drawStationsBar so drawStationsBar(box, rows, { top: 10 }) shows only the ten busiest stations. Where in update does it go, and why there?
Make the month selector also work with the keyboard arrow keys without extra code, and say why.
Explain it without notes
Why does drawStationsBar return { update } instead of redrawing the whole chart?
Why is the join keyed by station id?
What are the chart's guards, and what does each protect against?
Preview
Console
Nothing logged yet.Expected console output
normal: 3 rows | Rides per station: Lantern is busiest with 7,260. 3 stations shown. | text: -
empty: 0 rows | Rides per station: no data | text: No stations had any rides in this period.
one: 1 rows | Rides per station: Quay is busiest with 7,078. 1 station shown. | text: -
1 row(s) without a rides number were left out
messy: 2 rows | Rides per station: Quay is busiest with 7,078. 2 stations shown. | text: -
allZero: 2 rows | Rides per station: 2 stations shown, none with any rides. | text: -
bars with a broken width: 0