The Phase 7 part of the dashboard (modules inlined)
The preview cannot import your local files, so this example pastes legend.js, stations-stacked.js, june-heatmap.js and the Phase 7 part of main.js into one module (the loaders are one-line stand-ins for load.js). In your project they are separate files.
Add two charts to the dashboard: monthly rides stacked by district, and a heatmap of June by day and hour. Both come with a shared legend part. It answers Priya's question: which months, which parts of the city, and which hours?
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.
Make drawStationsStacked accept a keys option so it can stack other groups. Which lines use KEYS?
Add a label option to drawJuneHeatmap that replaces the words after the colour bar's maximum. Which line in legend.js does it reach?
Explain it without notes
Why does drawLegend take a colour scale and not a list of colours?
Why does loadHourlyJune not use d3.autoType?
Preview
Console
Nothing logged yet.