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

More Examples:
- <https://informationisbeautiful.net>
- <https://www.visualcinnamon.com/portfolio/>

---

![bg fit](https://clauswilke.com/dataviz/visualizing_uncertainty_files/figure-html/mpg-uncertain-HOP-animated-1.gif)

---

## 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>