The Phase 11 part of the dashboard (modules inlined)
The preview cannot import your local files, so this example pastes canvas.js, trips-canvas.js and the Phase 11 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 a canvas to the dashboard that draws all 10,000 June trips as dots around their start stations, sharp on every screen, with a text summary and a table beside it. It answers Arjun's wish to see every trip.
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 drawTripsCanvas accept options.color for the dots. Which line uses it?
Add a maxDots option that draws only the first maxDots trips and adds a sentence to the label saying how many were left out.
Explain it without notes
Why does update call setupCanvas again, and not only clearRect?
Why is the jitter computed from the trip's id and not with Math.random()?
Preview
Console
Nothing logged yet.