Animation in Data Visualization

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/

1ceed12fdfcdb1a085f28dcbcb4bd45c?s=128

Jeremy Stucki

August 27, 2014
Tweet

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