Schedule, run and chain: what is true at each moment
The values come from the elements themselves. Each log runs inside an event, so the output is the same on every run and every machine.
A D3 transition does not move anything by itself. It stores a plan on each element, and a clock then writes a new value between the old one and the new one on every frame. It can animate numbers, colours and any text that contains numbers.
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 grow(bars, x) that starts the width transition on bars (a selection of rects with data { rides }) and returns a promise that resolves when every bar is at its width. Log bars.nodes().map((n) => Math.round(n.getAttribute("width"))) after it.
Make the bars grow first (400 ms), and then turn Monday's bar orange in a second leg (300 ms) while the others stay teal. Log the fill of Monday's bar when the second leg ends.
Explain it without notes
Right after selection.transition().attr("width", 254), what is the element's width, and why?
What does a transition do on each frame?
After a transition to #e76f51, the fill attribute reads rgb(231, 111, 81). Why, and when does it matter?
Preview
Console
Nothing logged yet.Expected console output
right after .transition(), widths: 0,0,0,0,0,0,0
schedules stored on the first bar: 1
schedules stored on the first bar now: 2
leg 1 ended: width 253.72244488977955 fill #2a9d8f
leg 2 ended: width 253.72244488977955 fill rgb(231, 111, 81)
bookkeeping left on the bar: undefined