Viz - (Animated) Transition

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 (keyframe) 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 (keyframe).

Transitions are often initiated by events, such as:

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

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.

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

• Animated Transitions in Statistical Data Graphics - Jeffrey Heer, George Robertson