Apply motion to help users see changes in information.
Animation communicates the relationships between two or more elements. Use motion to make state changes explicit and enhance or add information to a data vis. When elements change, their relationships are affected. Use animation to clarify how this change happens and its influence on the environment or other data sets.
Move data with precision
Start from the initial inspiration ofto inspire a mechanical feeling of standard movements and systematic behaviors. Whether your concept comes from a space craft or self-driving car, use the essence of the machine in order to convey a feeling, a common identity, and the object’s sense of belonging in its environment.
Make elements appear from a common starting point (from the bottom, from the center, etc.). Add consequentiality through the use of slight delays. Be consistent in your system of ordering elements (from left to right, from bigger to smaller).
Use the same motion to make elements point the same direction. Horizontal movements draw the shapes into a stack, giving the user the perception of the elements’ coming together. When appropriate, use color shades to give visual feedback of the previous state.
Make elements come out and grow from a common shape. Clearly show the common shape where smaller shapes come from. Rely on color variations to emphasize different levels of data detail and depth.
Motion can be applied to show the user what is updating and how. Animate shapes in order to make clear what is growing and what is lowering, avoiding sharp switches from a status to another. When users apply changes, do not reload the animation.
Animate grids as individual layers of a visualization which follow the same rules of the other elements. The draw-in effect of the lines should be updated consistently, but only when necessary. Avoid redundant and excessive grid animation when, for instance, the axis scales does not change.