The dashboard's stations chart, switching months
This is the dashboard's stations part as it stands after Phase 5, with the modules inlined into one example. The key numbers and the rides line from Phase 4 are left out to keep it short: in your project they run beside it, from the same main.js.
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
Jul: 25 rows, top: Lantern
Apr: 21 rows (the four May stations exited)
May: 25 rows (they entered)
Quay kept its element: true
Rides per station: Lantern is busiest with 6,649. 25 stations shown.