30239-notes/11.animation-interaction/slides.md

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

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

TODO:

• CSS Transitions Docs
• D3 Chapter
• My Notebook