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

TODO: examples of each of above

Reasons for Interaction

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

TODO: examples of each of above

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

TODO: examples of each of the above

Example: Voronai Diagram For Selection of Small Points

More Resources

TODO:

  • CSS Transitions Docs
  • D3 Chapter
  • My Notebook