The explorer: the rides line and the stations chart, run together
The four project files are inlined into this one example (imports and exports removed) because the preview cannot import local files. The last lines send events and print what the dashboard did.
The dashboard becomes an explorer. A crosshair tooltip answers "what happened that day" by mouse, tap and arrow keys, a brush (or three buttons) picks dates, and the station bars follow the selection.
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 button "Last 7 days of data" next to the presets.
Make the tooltip also show the day's temperature from temp_c.
Explain it without notes
Why does every way of choosing a range go through selectRange()?
Why do the brush's end handler and setRange need to know who moved the brush?
Why are the station bars described as monthly in the note?
Preview
Console
Nothing logged yet.Expected console output
Loaded 365 days, 0 cleaning notes
mouse on 18 July | Fri 18 Jul 2025: 4,380 rides
finger taps 14 August | Thu 14 Aug 2025: 439 rides
ArrowLeft | Wed 13 Aug 2025: 4,226 rides
before any selection | No dates selected. Drag across the line, or use a button. | top station: Lantern 7,260
drag across June | a range is selected | the bars changed: true
press Summer | 1 Jun to 31 Aug: 334,321 rides | top station: Quay 21,010
click on the chart | No dates selected. Drag across the line, or use a button.
drag to the far right | 1 Dec to 31 Dec: 45,376 rides
drag shorter than a day | No dates selected. Drag across the line, or use a button. | brush drawn: false