Animation

As explained in Everyday Data Visualization

Animation is the presentation of visual changes through a sequence of displayed states over time.

Animation presents visual change through displayed states over time. In data visualization, movement attracts attention and can reveal how values or layouts change. section 2.1.4 section 7.1.3

Use animation deliberately:

• Animate changing bars, lines, bubbles, or other marks when showing evolving data or a rearranged display. section 2.1.4
• Use motion as feedback after filters, toggles, or other interactions, keeping the response visible near the interaction. section 7.1.3
• Balance attention against analysis: motion can grip viewers, but excessive distraction or slow performance weakens the experience. section 2.1.4 section 7.1.3

From racing bars to changing bubbles

A racing bar chart can seize attention without supporting careful analysis. Gapminder’s World Health Chart offers a richer example: bubbles move across income and life-expectancy axes as years advance, making historical changes visible. section 2.1.4

Figure 7.3 Some ways to show the user that their interaction has changed the data being displayed are to change labels such as titles, move a highlighter box, and/or change font styling.

See how changing labels, moving a highlight, and altering font styling can accompany animation to confirm that an interaction changed the displayed data. section 7.1.3

How Everyday Data Visualization covers it

How deep it goes

Explains purposes, examples, and cautions about distraction and performance, but stops short of implementation steps.

Examples

Uses racing bar charts, Gapminder’s World Health Chart, loading spinners, growing bars, and rearranging visual elements.

What it assumes

Assumes familiarity with charts, data changes, filters, and toggles while treating motion as a visual attention cue.

What you can do after

Apply animation to emphasize changing data or provide timely interaction feedback without harming clarity or performance.

How it connects

Connects animation with data visualization, interactivity, preattentive attributes, and feedback.

liveBookmanning.com

Read Everyday Data Visualization on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Design for DevelopersThe use of changing visual states over time to communicate movement, activity, or interaction in an interface.
• 

  liveBookmanning.com
  Classic Game Programming on the NES: Make your own retro video gameAnimation is the presentation of changing visual states over time to create motion or visual activity in a game.
• 

  liveBookmanning.com
  Math for Web DesignA web animation is the programmed or styled change of visual properties over time in a web interface.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionAnimation is a time-varying visual change in a user interface that can communicate information or significance to the user.

Compare how 5 books explain animation →

Related concepts

• motionuses · Motion is a change in an object’s position or configuration over time.
• prefers-reduced-motionconfigured by · prefers-reduced-motion is a CSS media feature that indicates whether a user has requested reduced nonessential motion.
• CSS transform propertyused by · The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
• usabilityaddresses · Usability is the degree to which intended users can use a system or product effectively, efficiently, and satisfactorily to accomplish their goals.

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.