The Phase 12 part of the dashboard (modules inlined)
The preview cannot import your local files, so this example pastes hit-test.js, station-map.js, trips-canvas.js and the Phase 12 part of main.js into one module (the loaders and setupCanvas are short stand-ins). In your project they are separate files. At the end, the page presses the arrow keys and Enter on the map and picks a month, then prints what the map said. Draw times appear on the page, not in the Console.
Add a station map with a whole year of rides under it. The rides are counted and drawn as one dot per hundred, the map is on layers, a quadtree finds the station under a mouse, a finger or the keyboard, and the page shows how long each layer took to draw.
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 Clear button next to the month picker that selects no station. Which method of the map do you call?
Make the map announce the station's rides for the picked month, not the whole year, when a month is chosen.
Explain it without notes
Why are the dots on one canvas and the station circles on another?
Why does the readout say "about 100 rides" per dot?
How does a keyboard user select a station?
Preview
Console
Nothing logged yet.Expected console output
at the start: 9,339 dots stand for 933,651 rides (1 dot is about 100 rides)
ArrowRight says: Bridge, Riverside district. Press Enter to select.
Enter selects: Bridge (Riverside): 38,288 rides in the year, 20 docks.
January: 434 dots stand for 43,439 rides (1 dot is about 100 rides)
whole year again: 9,339 dots stand for 933,651 rides (1 dot is about 100 rides)