The Phase 9 part of the dashboard (modules inlined)
The preview cannot import your project's files, so this example pastes motion.js, axis.js, a short stand-in for tooltip.js, rides-line.js and stations-bar.js into one module (the local imports are removed). In your project they are separate files, and main.js is the Phase 8 file, unchanged.
Make the station bars slide when the month changes, draw the rides line on once, and give every chart one shared rule for reduced motion. It answers Tomás: he can now watch Lantern climb to first place.
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 line reveal last 300 ms. Which option, and which file?
Add an onEnd option to drawStationsBar that is called when the movement is done. Which line of update would you extend?
Explain it without notes
Why does update return false for some calls?
Where does the dashboard decide how much motion to use?
Why does the line reveal only on the first draw?
Preview
Console
Nothing logged yet.Expected console output
while it draws: dasharray set: true
reveal finished: true | dasharray left: null
June, Lantern's row: translate(92,64)
right after the change event, Lantern's row: translate(92,64)
movement finished: true | Lantern's row now: translate(92, 4)