Viz - (Animated) Transition

1 - About

Transition create animated smooth transition between two different state of a graphic object.

Instead of changing instantaneously, transitions smoothly interpolate the object from its current state to the desired target state over a given duration.

Most often, a transition is just a single stage, transitioning from the current state of the object to the desired target state.

Animated transitions can significantly improve graphical perception. Jeffrey Heer, George Robertson (Animated Transitions in Statistical Data Graphics)

3 - Initiation

Transitions are often initiated by events, such as:

  • the arrival of new data over the wire
  • or user interaction.

4 - Concurrency

Since transitions are not instantaneous — they have a duration — that could mean multiple transitions competing to control the fate of elements. To avoid this, transitions should be exclusive, allowing a newer transition to pre-empt (to interrupt) an older one. However, such exclusivity should not be global. Multiple concurrent transitions should be allowed, as long as they operate on different elements.

Example: If you quickly toggle between stacked and grouped bars below, you can send waves rippling across the chart: See Stacked-to-Grouped Bars.

5 - Library

Animate between two SVG paths or canvas shapes in a visualization when the shapes

Library does not correspond to each other really well ?
Flubber No
d3/d3-transition Yes

6 - Documentation / Reference

data/viz/transition.txt · Last modified: 2017/12/01 11:05 by gerardnico