84 lines
1.4 KiB
Markdown
84 lines
1.4 KiB
Markdown
# 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
|