What an interpolator returns at t = 0, 0.5 and 1
These are the same interpolators transitions use. One difference: transition.attr and transition.style only know numbers, colours and strings (a date or an array is turned into text first). Dates and arrays need your own tween (Topic 9.4).
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?
Console
(nothing was printed)Expected console output
number 0 | 127 | 254
colour "rgb(42, 157, 143)" | "rgb(137, 134, 112)" | "rgb(231, 111, 81)"
name to hex "rgb(70, 130, 180)" | "rgb(163, 193, 218)" | "rgb(255, 255, 255)"
string "translate(10,20)" | "translate(30,10)" | "translate(50,0)"
lengths "12px" | "16px" | "20px"
path "M0,0L10,10" | "M0,0L25,10" | "M0,0L40,10"
date 2025-01-01 | 2025-01-02 | 2025-01-03
array [0,10] | [5,20] | [10,30]
words "no change" | "no change" | "no change"