Animation in Data Visualization

Slide 1

Slide 1 text

ANIMATION – 1 Presented by Interactive Things in data visualization Jeremy Stucki [email protected] @herrstucki The Graphical Web 2014

Slide 2

Slide 2 text

What is animation? 2 Presented by Interactive Things

Slide 3

Slide 3 text

The act of bringing to life 3 Presented by Interactive Things What is animation?

Slide 4

Slide 4 text

Characteristics of animation 4 Presented by Interactive Things

Slide 5

Slide 5 text

Animation draws attention 5 Presented by Interactive Things Characteristics

Slide 6

Slide 6 text

Animation gives objects constancy 6 Presented by Interactive Things Characteristics

Slide 7

Slide 7 text

Animation groups objects together 7 Presented by Interactive Things Characteristics

Slide 8

Slide 8 text

Animation suggests causation and intentionality 8 Presented by Interactive Things Characteristics

Slide 9

Slide 9 text

Animation is emotionally engaging 9 Presented by Interactive Things Characteristics

Slide 10

Slide 10 text

Animation is ephemeral 10 Presented by Interactive Things Characteristics

Slide 11

Slide 11 text

Three uses of animation 11 Presented by Interactive Things

Slide 12

Slide 12 text

Animation as narration 12 Presented by Interactive Things Three uses

Slide 13

Slide 13 text

Guns – Periscopic

Slide 14

Slide 14 text

Out of Sight, Out of Mind – Pitch Interactive

Slide 15

Slide 15 text

Animation as encoding 15 Presented by Interactive Things Three uses

Slide 16

Slide 16 text

Wind Map – Fernanda Viegas, Martin Wattenberg

Slide 17

Slide 17 text

Kepler’s Tally of Planets – New York Times

Slide 18

Slide 18 text

How Obama Won Re-election – New York Times

Slide 19

Slide 19 text

Keine Zeit für Wut – NZZ, Interactive Things

Slide 20

Slide 20 text

Animation as transition 20 Presented by Interactive Things Three uses

Slide 21

Slide 21 text

isometricblocks – Ben Fry

Slide 22

Slide 22 text

Taxonomy of transitions 22 Presented by Interactive Things

Slide 23

Slide 23 text

Transformation of the view 23 Presented by Interactive Things Taxonomy of transitions

Slide 24

Slide 24 text

Weltenbrand – NZZ, Interactive Things

Slide 25

Slide 25 text

Change of representation 25 Presented by Interactive Things Taxonomy of transitions

Slide 26

Slide 26 text

Wie sich Taschendiebe und Polizisten in 26 Kantonen begegnen – NZZ, Interactive Things

Slide 27

Slide 27 text

Transformation of the surface 27 Presented by Interactive Things Taxonomy of transitions

Slide 28

Slide 28 text

Four Ways to Slice Obama’s 2013 Budget Proposal – New York Times

Slide 29

Slide 29 text

Timestep 29 Presented by Interactive Things Taxonomy of transitions

Slide 30

Slide 30 text

Mapping the Spread of Drought Across the U.S. – New York Times

Slide 31

Slide 31 text

Change of data structure 31 Presented by Interactive Things Taxonomy of transitions

Slide 32

Slide 32 text

Zürcher Gemeinderatswahlen 2014 – NZZ, Interactive Things

Slide 33

Slide 33 text

Reordering 33 Presented by Interactive Things Taxonomy of transitions

Slide 34

Slide 34 text

Public Value Atlas – Interactive Things

Slide 35

Slide 35 text

Filtering 35 Presented by Interactive Things Taxonomy of transitions

Slide 36

Slide 36 text

Public Value Atlas – Interactive Things

Slide 37

Slide 37 text

Ten commandments principles of transitions 37 Presented by Interactive Things

Slide 38

Slide 38 text

Congruence & Apprehension 38 Presented by Interactive Things Core principles

Slide 39

Slide 39 text

Congruence 39 Presented by Interactive Things Core principles

Slide 40

Slide 40 text

1 Respect semantic correspondence 40 Presented by Interactive Things Congruence principles

Slide 41

Slide 41 text

2 Avoid ambiguity 41 Presented by Interactive Things Congruence principles

Slide 42

Slide 42 text

3 Maintain valid graphics throughout a transition 42 Presented by Interactive Things Congruence principles

Slide 43

Slide 43 text

4 Maintain valid mappings across graphics 43 Presented by Interactive Things Congruence principles

Slide 44

Slide 44 text

Apprehension 44 Presented by Interactive Things Ten principles

Slide 45

Slide 45 text

5 Group similar transitions 45 Presented by Interactive Things Apprehension principles

Slide 46

Slide 46 text

6 Minimize occlusion 46 Presented by Interactive Things Apprehension principles

Slide 47

Slide 47 text

7 Maximize predictability 47 Presented by Interactive Things Apprehension principles

Slide 48

Slide 48 text

8 Use simple transitions 48 Presented by Interactive Things Apprehension principles

Slide 49

Slide 49 text

9 Stage complex transitions 49 Presented by Interactive Things Apprehension principles

Slide 50

Slide 50 text

10 Make transitions as long as needed but not longer 50 Presented by Interactive Things Apprehension principles

Slide 51

Slide 51 text

How Americans Die – Bloomberg Visual Data

Slide 52

Slide 52 text

Rating a Health Law’s Success – New York Times

Slide 53

Slide 53 text

Poverty Tracker – Fathom

Slide 54

Slide 54 text

THANK YOU – 54 Presented by Interactive Things Jeremy Stucki [email protected] @herrstucki