Station bars that slide: motion.js and stations-bar.js (modules inlined)
The left chart moves (300 ms here), the right one gets the reduced-motion path of the same code. The preview inlines motion.js and stations-bar.js into one module; in your project they are separate files. Only the last of three quick updates reports true.
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
first draw finished: true true
rows on the page: 21
January to July, both charts: true true
rows now: 25 (four stations opened in May)
three updates in the same moment finished: false, false, true
back to January: true | rows left: 21