A staggered start that scales with the count
Only the start times are logged, never the frame times: the order and the planned delays are the same on every machine.
Easing decides how fast a movement is at each moment: slow at the start, fast in the middle, or even past the target. Duration and delay decide how long it lasts and when each mark starts. Good motion is short, and it ends where the data says.
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.
Write fixedStep(count) as above, then use it for the bars of the second example with d3.easeCubicOut. Log the time the last bar starts and the time the transition ends.
Write safeDelay(d, i, step) that uses d.rank when it is a finite number and i otherwise. Test it with { rank: 3 }, {} and { rank: NaN } and step 40.
Explain it without notes
What does an easing function take and return?
Which easing would you pick for a bar growing to its value, and which for a bar that must not pass its value?
Why should a stagger step depend on the number of marks?
Preview
Console
Nothing logged yet.Expected console output
step for 1, 7, 25, 100, 1000 bars: 0, 40, 10, 2.42, 0.24 ms
started in this order: Mon Tue Wed Thu Fri Sat Sun
last bar starts at 240 ms; the whole thing takes 540 ms