Animation & Interaction

CAPP 30239

How can we use animation and interaction to improve understanding?

How can we implement this with the tools we have?

Review: Potential Benefits of Interactives

• Reducing Cognitive Load
• Personalization for Reader
• Making Information Playful
• Prompting Self-Reflection

(examples in 06.narrative slides)

Applications of Animation

• Demonstrate change over time
• Highlight relationships
• Focus attention:
  • Show subsets of data
  • Draw attention to changes
• Show uncertainty

More Examples:

• https://informationisbeautiful.net
• https://www.visualcinnamon.com/portfolio/

Reasons for Interaction

• Enable user-driven exploration of data.
• Allow personalization (e.g. enter your zip code)
• Increased engagement/retention

• Huge amount of data w/ user exploration: https://pudding.cool/2024/11/love-songs/
• Personalization: https://www.nytimes.com/interactive/2024/upshot/buy-rent-calculator.html

Selection

For user-driven data explorations, selection is an important concept.

How do you want to let a user select individual records or groups of records?

Spectrum: From Click to Query Lang

• click on selection
• hover effect
• drag/region selection
• pre-written query with dropdowns/selects
• query lang

Altair Interactive Charts https://altair-viz.github.io/user_guide/interactions.html

Example: Voronai Diagram For Selection of Small Points

• https://d3js.org/d3-delaunay/voronoi
• https://www.visualcinnamon.com/2015/07/voronoi/

More Resources

• https://vis.berkeley.edu/papers/animated_transitions/
• https://explorabl.es
• https://worrydream.com