Viz - (Animated) Transition
Table of Contents
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 (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).
Animated transitions can significantly improve graphical perception.
2 - Articles Related
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 |