Animation in Data Visualization

Animations enable us to convey changes over time, transitions between states, or the unfolding of a narrative. We can show processes, tell stories and evoke emotions where it is difficult or impossible with static graphics and text alone. The capabilities of modern web browsers and libraries like D3.js allow us to use animation in visualizations very easily. But we must also ask if the animations we create are necessary, meaningful and effective. Especially in visualization we need to be careful not to distort the data or introduce unneeded complexity.

---

Examples shown in the talk (because they're much more fun live):

U.S. Gun Deaths – Periscopic
http://guns.periscopic.com/

Out of Sight, Out of Mind – Pitch Interactive
http://drones.pitchinteractive.com/

Wind Map – Fernanda Viegas, Martin Wattenberg
http://hint.fm/wind/

Kepler’s Tally of Planets – New York Times
http://www.nytimes.com/interactive/science/space/keplers-tally-of-planets.html

How Obama Won Re-election – New York Times
http://www.nytimes.com/interactive/2012/11/07/us/politics/obamas-diverse-base-of-support.html

Keine Zeit für Wut – NZZ, Interactive Things
http://fukushima.nzz.ch/#die-schulleiterin

isometricblocks – Ben Fry
http://benfry.com/isometricblocks/

Weltenbrand – NZZ, Interactive Things
http://www.nzz.ch/international/weltkrieg/weltenbrand-chronik-des-ersten-weltkriegs-1.18331813

Wie sich Taschendiebe und Polizisten in 26 Kantonen begegnen – NZZ, Interactive Things
http://work.interactivethings.com/nzz-swiss-maps/polizisten-und-taschendiebstaehle.html

Four Ways to Slice Obama’s 2013 Budget Proposal – New York Times
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

Mapping the Spread of Drought Across the U.S. – New York Times
http://www.nytimes.com/interactive/2014/upshot/mapping-the-spread-of-drought-across-the-us.html

Zürcher Gemeinderatswahlen 2014 – NZZ, Interactive Things
http://www.nzz.ch/aktuell/data/zuercher-stadtrats--und-gemeinderatswahlen-alle-wahlergebnisse-im-ueberblick-1.18239805

Public Value Atlas – Interactive Things
http://www.gemeinwohl.ch/atlas

How Americans Die – Bloomberg Visual Data
http://www.bloomberg.com/dataview/2014-04-17/how-americans-die.html

Rating a Health Law’s Success – New York Times
http://www.nytimes.com/interactive/2014/05/19/health/rating-a-health-laws-success.html

Poverty Tracker – Fathom
http://povertytracker.robinhood.org/

---

References

Heer J, Robertson G – Animated Transitions in Statistical Data Graphics (2007)
http://vis.stanford.edu/files/2007-AnimatedTransitions-InfoVis.pdf

Fisher Danyel – Animation for Visualization: Opportunities and Drawbacks (2010)
http://research.microsoft.com/pubs/130998/bv_ch19.pdf

Tversky B, Morrison JB, Bétrancourt M – Animation: can it facilitate? (2002)
http://psych.stanford.edu/~bt/diagrams/papers/tversky_betrancourt.pdf

---

Talk held at the Graphical Web 2014 in Winchester https://www.graphicalweb.org/2014/

Transcript

1. ANIMATION – 1 Presented by Interactive Things in data visualization Jeremy Stucki jeremy@interactivethings.com @herrstucki The Graphical Web 2014
2. What is animation? 2 Presented by Interactive Things
3. The act of bringing to life 3 Presented by Interactive Things What is animation?
4. Characteristics of animation 4 Presented by Interactive Things
5. Animation draws attention 5 Presented by Interactive Things Characteristics
6. Animation gives objects constancy 6 Presented by Interactive Things Characteristics
7. Animation groups objects together 7 Presented by Interactive Things Characteristics
8. Animation suggests causation and intentionality 8 Presented by Interactive Things Characteristics
9. Animation is emotionally engaging 9 Presented by Interactive Things Characteristics
10. Animation is ephemeral 10 Presented by Interactive Things Characteristics
11. Three uses of animation 11 Presented by Interactive Things
12. Animation as narration 12 Presented by Interactive Things Three uses
13. Guns – Periscopic
14. Out of Sight, Out of Mind – Pitch Interactive
15. Animation as encoding 15 Presented by Interactive Things Three uses
16. Wind Map – Fernanda Viegas, Martin Wattenberg
17. Kepler’s Tally of Planets – New York Times
18. How Obama Won Re-election – New York Times
19. Keine Zeit für Wut – NZZ, Interactive Things
20. Animation as transition 20 Presented by Interactive Things Three uses
21. isometricblocks – Ben Fry
22. Taxonomy of transitions 22 Presented by Interactive Things
23. Transformation of the view 23 Presented by Interactive Things Taxonomy of transitions
24. Weltenbrand – NZZ, Interactive Things
25. Change of representation 25 Presented by Interactive Things Taxonomy of transitions
26. Wie sich Taschendiebe und Polizisten in 26 Kantonen begegnen – NZZ, Interactive Things
27. Transformation of the surface 27 Presented by Interactive Things Taxonomy of transitions
28. Four Ways to Slice Obama’s 2013 Budget Proposal – New York Times
29. Timestep 29 Presented by Interactive Things Taxonomy of transitions
30. Mapping the Spread of Drought Across the U.S. – New York Times
31. Change of data structure 31 Presented by Interactive Things Taxonomy of transitions
32. Zürcher Gemeinderatswahlen 2014 – NZZ, Interactive Things
33. Reordering 33 Presented by Interactive Things Taxonomy of transitions
34. Public Value Atlas – Interactive Things
35. Filtering 35 Presented by Interactive Things Taxonomy of transitions
36. Public Value Atlas – Interactive Things
37. Ten commandments principles of transitions 37 Presented by Interactive Things
38. Congruence & Apprehension 38 Presented by Interactive Things Core principles
39. Congruence 39 Presented by Interactive Things Core principles
40. 1 Respect semantic correspondence 40 Presented by Interactive Things Congruence principles
41. 2 Avoid ambiguity 41 Presented by Interactive Things Congruence principles
42. 3 Maintain valid graphics throughout a transition 42 Presented by Interactive Things Congruence principles
43. 4 Maintain valid mappings across graphics 43 Presented by Interactive Things Congruence principles
44. Apprehension 44 Presented by Interactive Things Ten principles
45. 5 Group similar transitions 45 Presented by Interactive Things Apprehension principles
46. 6 Minimize occlusion 46 Presented by Interactive Things Apprehension principles
47. 7 Maximize predictability 47 Presented by Interactive Things Apprehension principles
48. 8 Use simple transitions 48 Presented by Interactive Things Apprehension principles
49. 9 Stage complex transitions 49 Presented by Interactive Things Apprehension principles
50. 10 Make transitions as long as needed but not longer 50 Presented by Interactive Things Apprehension principles
51. How Americans Die – Bloomberg Visual Data
52. Rating a Health Law’s Success – New York Times
53. Poverty Tracker – Fathom
54. THANK YOU – 54 Presented by Interactive Things Jeremy Stucki jeremy@interactivethings.com @herrstucki