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

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 Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap