The Phase 10 dashboard (modules inlined)
The preview cannot import your local files, so this example pastes resize.js, motion.js, tooltip.js, axis.js, legend.js, the four charts and main.js into one module (the loaders are one-line stand-ins for load.js and format.js), and the page body and both style files are the example's HTML and CSS. In your project they are separate files, and index.html and the CSS are loaded as files. In the picture: a header with a bike icon and a Theme button, the five key numbers, a week of bars, a line of the year with the title "Rides peaked at 4,380 on 18 Jul 2025 and fell to 439 on 14 Aug 2025" and the outage dot with its label, the June / Summer / Whole year buttons under it (hover, brush and the station bars still follow the selected dates), the station bars with a month menu, the stacked months by district with six distinct colours (blue, orange, green, pink, red, light blue) and a legend, and the June heatmap in viridis: dark purple for quiet hours, green and yellow for the weekday rush hours, and pale grey cells for hours with no rides.
Move every chart colour into theme.css (light and dark), use a colour-blind-safe palette that passes contrast, write titles that state the finding, add a theme button, and make every chart redraw at its real width with fewer ticks when narrow.
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 --chart-warn token (amber in light, lighter amber in dark) and use it for the outage annotation in rides-line.js instead of --chart-alert. Which two files change?
Make main.js store the theme choice with localStorage only when storage is available. Which line already does that, and what happens in a private window?
Explain it without notes
How does the dashboard switch between light and dark without redrawing any chart?
How does a chart choose fewer ticks on a phone, and where is the breakpoint stored?
Why does each chart now return resize as well as update?
Preview
Console
Nothing logged yet.Expected console output
Loaded 365 days, 0 cleaning notes