Wrong easing, duration and delay values
Two of these are quiet failures: a negative duration acts like 0 and a NaN delay never starts, with no error.
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
ease with a name: Error: ""
ease with a number: Error
duration -100: ended, width 50
height transition ended
NaN-delay bar after everything else finished, width: 10 | its schedule is still stored: true