1 of 105

Week 10: Animation

Introduction to Data Visualization

W4995.012 Spring 2023

​

​

2 of 105

00 Quiz

01 Sparks Presentation

02 Warm-up

03 Motion Perception

04 Animated Transitions in Vis

05 Implementing Animations

06 Final Projects, A4 Show-and-Tell

​

3 of 105

Zooming: Geometric or Semantic?

4 of 105

5 of 105

6 of 105

Too many to see: alpha transparency

7 of 105

Too many to see: jittering

8 of 105

Too many to see: contour, binning...

9 of 105

01

Sparks Presentation

​

Giorgia Lupi

​

​

10 of 105

01

Long time no see!

11 of 105

Draw in 30 seconds: Where did you go for break?

12 of 105

Draw yourself: How much time did you spend on travel over spring break?

(not to scale!) ok

1hr

1-3hr

3-6hr

6-24hr

24+hr

A lot of days

0 hours

13 of 105

Drawing activity: in groups of 4, 15min.

​

  • Pick one of the following 3 slides, imagine they are filmstrips: how might you animate, or morph, between the charts in the 1st and 4th cell?

​

  • Draw it, take a screenshot

​

  • Add your image to your team’s slide (in yellow.)

14 of 105

Animate pie to bar chart

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

1

3

2

4

15 of 105

Animate scatterplot to bar chart

☕️

🍪

🥯

TOTAL REVENUE ($)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

1

3

2

4

16 of 105

Animate line chart to bar chart

1

3

2

4

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

17 of 105

Group Members: UNI1, UNI2, UNI3, UNI4

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

18 of 105

Group Members: ahx2001, ak4652, al3625, mms2408

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

Title

Labels

19 of 105

Group Members: tas2217, dp3129, tv2265, st3288

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🥯

🍪

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL REVENUE ($)

20 of 105

Group Members: rw2921, eel2157, hw2936, UNI4

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

🍪

🥯

☕️

21 of 105

Group Members: add2155, cs4016

☕️

🍪

🥯

TOTAL REVENUE ($)

1

2

4

TOTAL SALES

Units sold (#)

TOTAL SALES

Units sold (#)

Radius = inventory (#)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL REVENUE ($)

☕️

🥯

🍪

☕️ 🥯 🍪

22 of 105

Group Members: ys3610, sw3709, jn2770, jp4361

​

☕️

🍪

🥯

TOTAL SALE($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

23 of 105

Group Members: jf3482, vv2317

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

24 of 105

Group Members: Paulette (pd2662), Chiamaka(cnc2164), Aaron (adm2216)

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES ($)

bagels 🥯

cookies 🍪

coffee ☕️

25 of 105

Group Members: ly2555, nkk2122, hjk2160

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

TOTAL SALES

.

$

cookies 🍪

bagels 🥯’

coffee ☕️

☕️

🥯

TOTAL SALES

$

🍪

.

Mar.

Feb.

Jan.

Mar.

Feb.

Feb.

Mar.

JAN - MAR

26 of 105

Group Members: yx2810, dw3013, zt2276, ja3569

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

🍪

TOTAL SALES ($)

TOTAL SALES ($)

☕️

🥯

27 of 105

Group Members: am5767, lg2908

​

☕️

🍪

🥯

TOTAL REVENUE ($)

1

3

2

4

TOTAL SALES

Revenue per unit ($)

Units sold (#)

cookies 🍪

bagels 🥯

coffee ☕️

1

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

1

TOTAL SALES

Revenue per unit ($)

Units sold (#)

cookies 🍪

bagels 🥯

coffee ☕️

28 of 105

03

Motion Perception

​

29 of 105

Why Animation?

​

  • Highly effective at attracting attention

​

  • Object constancy naturally conveys data transformations

​

  • Motion can convey causality & intentionality

30 of 105

Animation for Narrative, by Pitch Interactive (2015)

​

31 of 105

Gestalt principle: Common Fate, or “flocking”

32 of 105

Human motion exhibits “visual pop-out”

George Mather

33 of 105

However, multiple object tracking has limits

​

​

​

​

​

​

​

​

Max ~4–6. Difficulty increases significantly at 6.

(Yantis 92; Pylyshn 88; Cavanagh 05)

34 of 105

Attribution of Causality, Michotte ‘46

​

What do you see?

​

Most observers report that "the red ball hit the blue ball." The blue ball moved "because the red ball hit it." Thus, the red ball is perceived to "cause" the blue ball to move, even though the balls are nothing more than colored disks on your screen that move according to a script.

​

35 of 105

Attribution of Causality (Michotte ‘46)

​

Redrawn Colin Ware 2004

36 of 105

Principles for (Cartoon) Animation

​

  • ​
  • Exaggeration
  • Slow-in Slow-out
  • Arcs and Paths of Activation
  • Anticipation, etc.

​

  • Video of the 12 principles from “The Illusion of Life” (1981)
  • Guided design of easing functions

37 of 105

Does this work?

Example via Tamara Munzner

Systems biology viz: interactions are modeled

as a graph; nodes represent biomolecules (e.g. proteins

and genes), and edges represent interactions between them.

38 of 105

Small multiples is better; we can’t track many objects

Example via Tamara Munzner

39 of 105

04

Animated Transitions for Visualizations

​

40 of 105

Principles of Animation (Heer & Robertson ‘07)

​

  1. Congruence
  2. Maintain valid data graphics during transitions
  3. Use consistent syntactic/semantic mapping
  4. Respect semantic correspondence (mark should represent same data)
  5. Avoid ambiguity

​

→ ~Expressiveness principle

​

41 of 105

Principles of Animation (Heer & Robertson ‘07)

​

2. Apprehension

  • Group similar transitions
  • Minimize occlusion
  • Maximize predictability
  • Use simple transitions
  • Use staging for complex transitions
  • Make transitions as long as needed, but no longer

​

→ ~Effectiveness principle

42 of 105

“Animated Transitions in Statistical Graphics” ‘07

​

During analysis and presentation it is common to transition between related data graphics.

  • Can animation help?
  • How does this impact perception?

?

43 of 105

“Animated Transitions in Statistical Graphics” ‘07

​

Hypothesis: Staged transitions are better than direct animations for identification + change perception.

44 of 105

Staged Transitions?

?

45 of 105

Staged Transitions: stacked/grouped bars

46 of 105

47 of 105

Taxonomy of transitions

​

  • sorting
  • filtering
  • timestep
  • change encodings
  • change data dimensions
  • change encodings + axis scales

48 of 105

Heer & Robertson ‘07 Findings

​

  • Appropriate animation improves graphical perception
  • Simple staging was preferred and showed benefits
  • Axis re-scale hampers perception (keep landmarks)
  • Subjects preferred animated transitions

49 of 105

Example: Gapminder (2006)

​

​

​

​

​

​

​

​

​

See also: Bostock’s D3 remake (2012)

50 of 105

“Effectiveness of Animation in Trend Visualization” research study

​

How does animation compare to static presentations of time-series?

​

Experiment: Subjects asked comprehension questions. Presentation condition included narration.

​

(Robertson et. al. InfoVis 2008)

​

51 of 105

Variant 1: Animated Scatterplot

52 of 105

Variant 2: Traces

53 of 105

Variant 3: Small multiples

54 of 105

Robertson ‘08 Findings

​

  • Multiples: 10% more accurate than animation

​

  • Presentation: Anim. 60% faster than multiples

Analysis: Animation 82% slower than multiples

​

  • User preferences favor animation (even though less accurate and slower for analysis!)

55 of 105

Animation Pros/Cons

​

​

Attention

Constancy

Causality

Engagement

Calibration

​

​

Helps

direct attention

change tracking

cause and effect

increase interest

​

​

Hurts

distraction

false relations

false agency

“chart junk”

too slow: boring, too fast: errors

Via Jeffery Heer

56 of 105

Case Study: A Day in the Life of Americans

57 of 105

Contrast: A Day in the Life of Americans (static)

58 of 105

Case Study: Obama Budget

59 of 105

05

Implementing Animations

​

60 of 105

Implementation Approaches

​

  1. Frame-Based Animation

​

2. Transition-Based, aka tweening

61 of 105

Implementation Approaches

​

Frame-Based Animation

  • Redraw scene at regular interval (e.g., 16ms) Developer defines the redraw function

62 of 105

Frame-Based Animation

63 of 105

Frame-Based Animation

Illustration via Jeffery Heer

1

2

3

4

64 of 105

Frame-Based Animation

Illustration via Jeffery Heer

1

circle(10,10)

2

circle(15,15)

3

circle(20,20)

4

circle(25,25)

65 of 105

Frame-Based Animation

Illustration via Jeffery Heer

1

circle(10,10)

2

circle(15,15)

3

circle(20,20)

4

circle(25,25)

66 of 105

Frame-Based Animation

Illustration via Jeffery Heer

1

circle(10,10)

2

circle(15,15)

clear()

3

circle(20,20)

clear()

​

4

circle(25,25)

clear()

​

67 of 105

Implementation Approaches

​

Frame-Based Animation

  • Redraw scene at regular interval (e.g., 16ms) Developer defines the redraw function

​

Transition-Based, aka tweening (Hudson & Stasko ‘93)

  • Specify property value, duration & easing
  • Typically computed via interpolation

step(fraction) { xnow = xstart + fraction * (xend - xstart); }

  • Timing & redraw managed by UI toolkit

68 of 105

Transition-Based Animation a.k.a. “tweening”

​

Concept: You set the keyframes, toolkit interpolates for you.

​

Illustration via Jeffery Heer

1s

2s

3s

4s

circle(10,10)

circle(25,25)

69 of 105

Transition-Based Animation

​

from: (10,10), to: (25,25), duration: 3sec

​

Illustration via Jeffery Heer

1s

dx=25-10 x=10+(0/3)*dx

2s

x=10+(1/3)*dx

3s

x=10+(2/3)*dx

4s

x=10+(3/3)*dx

70 of 105

Transition-Based Animation

​

from: (10,10), to: (25,25), duration: 3sec

Toolkit manages frame-by-frame updates for you

Illustration via Jeffery Heer

1s

dx=25-10 x=10+(0/3)*dx

2s

x=10+(1/3)*dx

3s

x=10+(2/3)*dx

4s

x=10+(3/3)*dx

71 of 105

Easing (or “Pacing”) functions

​

  • Goals: stylize animation, improve perception.
  • Basic idea is to warp time: as duration goes from start (0%) to end (100%), dynamically adjust the interpolation fraction using an easing function.

72 of 105

73 of 105

When in doubt, use easing

​

74 of 105

D3 Transitions: based on any d3 selection

​

// Select SVG rectangles and bind them to data values.

var bars = svg.selectAll(“rect.bars”).data(values);

​

Example via Jeffery Heer

75 of 105

D3 Transitions: based on any d3 selection

​

// Select SVG rectangles and bind them to data values.

var bars = svg.selectAll(“rect.bars”).data(values);

​

// Animate: interpolate to target values with default timing

bars.transition()

.attr(“x”, (d)=> xScale(d.foo))

.attr(“y”, (d)=> yScale(d.bar))

.style(“fill”, (d)=>colorScale(d.bar));

​

​

Example via Jeffery Heer

76 of 105

D3 Transitions: parameters

​

// Animate: interpolate to target values with default timing

// see also Observable notebook on D3 ease functions

​

bars.transition()

.duration(500)

.delay(0)

.ease(d3.easeBounce)

.attr(“x”, (d) => xScale(d.foo))

...

​

​

​

​

Example via Jeffery Heer

77 of 105

D3 Transitions: what does this do?

​

bars.exit().transition()

.style(“opacity”, 0)

.remove();

​

​

Example via Jeffery Heer

78 of 105

D3 Transitions: exit selection

​

bars.exit().transition()

.style(“opacity”, 0)

.remove();

​

// animate elements leaving the display,

// fade out to fully transparent

// remove from DOM upon completion

​

​

​

​

Example via Jeffery Heer

79 of 105

CSS Transitions

​

a {

color: black;

transition: color 1s ease-in-out;

}

​

a:hover {

color: red;

}

​

Example via Jeffery Heer

80 of 105

CSS Transitions

​

a {

color: black;

transition: color 1s ease-in-out;

}

​

a:hover {

color: red;

}

​

Property

Duration

Easing

Example via Jeffery Heer

81 of 105

Demos & Resources

​

82 of 105

Summary: Animation

​

  • Animation is a salient visual phenomenon.
    • It’s captivating, helps tell a narrative.
    • Can communicate: object constancy, causality, timing
  • But it can be distracting and disorienting
    • Uncontrolled animation is worse for comprehension vs. static images.
    • Design with care: congruence & apprehension

83 of 105

Animation & Narrative go together

Tony Chu https://www.youtube.com/watch?v=tuPjPaEcUKI

84 of 105

Narrative (next week)

Tony Chu https://www.youtube.com/watch?v=tuPjPaEcUKI

85 of 105

06

Final Projects

​

Assignment Page

​

86 of 105

COVID Datasets

​

87 of 105

COVID Datasets: secondary impact

​

  • Economic
    • Delivery service
    • Flights
    • Cars/Carbon emissions
  • Screentime / Communication
    • Social media
  • Education
  • City infrastructure (MTA?)

88 of 105

Definitely don’t have to do that!

​

  • Fun datasets usually a recipe for success
    • Something you’re personally psyched about

​

  • Examples
    • Games (prev. semesters: board games, LEGO)
    • Pop culture (e.g. Spotify API)
    • Collect your own (e.g. S20 class GBBO, your quarantine GPS?)
    • ...think like The Pudding

​

  • The world is your oyster!

89 of 105

90 of 105

Jan Diehm/The Pudding

91 of 105

07

A4 Show-and-tell

​

92 of 105

We’ll go around and share

​

  1. Find your team’s slide below
  2. Paste a screenshot
  3. Link to your final public-facing URL
  4. Tell us:
  5. What is it
  6. 1 thing surprisingly hard
  7. 1 thing surprisingly fun

93 of 105

Covid in NY Team

​

94 of 105

Team for Car Crashes Involving Pedestrians

​

95 of 105

Traffic Accident Group

​

96 of 105

RZNT

​

97 of 105

dp3129,ly2555,rw2921,hw2930

​

98 of 105

Changrong Zheng

​

99 of 105

HCCP - Heon(hjk2160), Chiamaka(cnc2164), Camille(ckn2115), Paulette(pd2662)

​

https://observablehq.com/@columbia-dataviz/assignment-4

100 of 105

YelpDataset

​

101 of 105

Cuisine hunter

​

102 of 105

311

​

103 of 105

Game of Thrones

​

104 of 105

​

Questions?

​

Next Class…

105 of 105

Next week

​

  • A5.1 Final Proposal due next Wednesday 11:59pm
    • Sign up for a team by Friday 11:59pm
  • Readings
    • Nielson, Reinventing Explanation (blogpost)
    • Segal & Heer, Narrative Vis (IEEE)
    • Chu, The Making of R2D3 (youtube)
  • Extra Credit posted
  • Midterms graded: discuss questions in OH
  • We’ll send cumulatives grades up to A3 + midterm