The station map on the real island, the fleet treemap, and their failure states
The project files (hit-test.js, station-map.js, trips-canvas.js, fleet-treemap.js and the new parts of main.js) are inlined into this one example, with imports and exports removed, because the preview cannot import local files. The earlier boxes of main.js are not run here. The last lines are a driver that is not part of the project: it presses keys, then draws the map again with data missing.
The station map becomes a real map of Ardenvale: districts and river from TopoJSON under the stations, circles sized by docks and coloured by bikes there now. A treemap of the whole fleet joins it. It answers Priya: where are the bikes, and which stations are running low?
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 the readout under the map also say how many stations are running low.
Make the fleet treemap use the same district colours as the map's districts, by moving the colour scale into src/utils/colors.js.
Explain it without notes
Why does the map still draw when status.json or the TopoJSON fails to load?
Why must the land and the stations use the same projection?
Why is the land SVG while the stations stay on canvas?
Preview
Console
Nothing logged yet.Expected console output
land layer: districts 6 | paths 9
at the start: status at 2025-06-18T08:15:00Z | 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.
selection says: Bridge, Riverside district, 20 docks, 11 bikes now
fleet: 25 stations | 320 bikes. Area shows bikes. 8 small stations show their name when you point at them.
no shapes, no status: no map shapes | bike counts not available
no stations: No stations to show.