transition

Overview ¶

Command transition animates a chart between two states of the same table.

It writes three frames of one movement — the start, the middle and the end — so that what a transition does is visible in files rather than only in a window. The middle frame is the interesting one: it is a real frame of a real animation, because a transition is a pure function of its fraction.

What it demonstrates:

• **The join.** geom.KeyBy names the column that says which row is which, so a bar that moves is understood as the same bar rather than as one bar leaving and another arriving. data.Alignment reports the three groups by D3's names — Entered, Updated, Exited — because the vocabulary is the useful part.
• **Enter and exit.** data.EnterFrom and data.ExitTo say where a row comes from and goes to, in data space, so a new bar grows out of the baseline and a departing one sinks back into it. There is no fade: opacity is a property of a layer rather than of a row.
• **A label that counts.** The value labels are a numeric column bound to geom.TextBy, and a text layer re-spells its column on every frame — so the numbers count up by themselves. data.Round is what keeps them reading 33 rather than 33.300000000000004.
• **The host owns the clock.** figure reads none. Transition.At(f) is the whole primitive, and this program drives it from a loop; a browser drives it from requestAnimationFrame and a window from its frame callback, with Transition.Advance doing the arithmetic.

Like the other documented examples it is executed by a test, so it cannot quietly stop compiling or stop producing charts.

go run ./examples/transition -o frame