1 of 108

Week 10: Animation

Introduction to Data Visualization

W4995.012 Spring 2023

2 of 108

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 108

Quiz

5 min

Closed book

4 of 108

01

Sparks Presentation

The Upshot

5 of 108

01

Long time no see!

6 of 108

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

7 of 108

8 of 108

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.)

9 of 108

Animate pie to bar chart

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

1

3

2

4

10 of 108

Animate scatterplot to bar chart

☕️

🍪

🥯

TOTAL REVENUE ($)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

1

3

2

4

11 of 108

Animate line chart to bar chart

1

3

2

4

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

12 of 108

Animate line chart to bar chart

1

3

2

4

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

13 of 108

Group Members: hla2126, cpp2129, smb2346, vd2468

1

3

2

4

☕️

🍪

🥯

TOTAL REVENUE ($)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES

☕️

🍪

🥯

TOTAL REVENUE ($)

14 of 108

Group Members: agt2120, td2748, yy3204, aqa2001

1

3

2

4

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES

Revenue per unit ($)

Units sold (#)

cookies 🍪

bagels 🥯

coffee ☕️

🍪

🥯

☕️

TOTAL SALES ($)

15 of 108

Group Members: cfg2138, bs3370, ljc2187, as7172

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

coffee ☕️

bagels 🥯

☕️

cookies 🍪

🥯

🍪

TOTAL SALES ($)

16 of 108

Group Members: jx2515, hz2995, UNI3, UNI4

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

cookies 🍪

bagels 🥯

TOTAL SALES ($)

17 of 108

Group Members: ng2985, ks3827

1

3

2

4

1

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL REVENUE ($)

☕️☕️☕️☕️☕️

🥯

🍪

TOTAL REVENUE ($)

Unite Sold illustrated by number of icons(scaled)

🍪

☕️

🍪

☕️

🍪

☕️

🥯

☕️

☕️☕️

☕️

☕️☕️

☕️

🥯

🍪

🥯

TOTAL REVENUE ($)

(area)

🍪

🥯

18 of 108

Group Members: ss6679, wz2628, cf3021, ey2338

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

☕️

🍪

🥯

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES ($)

☕️

TOTAL SALES ($)

🥯

🍪

19 of 108

Group Members: sjp2226, sf3218, ls3594

1

3

2

4

☕️

🍪

🥯

TOTAL REVENUE ($)

TOTAL SALES

Revenue per unit ($)

Units sold (#)

Radius = inventory (#)

cookies 🍪

bagels 🥯

coffee ☕️

1

3

Units sold (#)

Revenue per unit ($)

zoom out

Note how each rectangle area (rev per unit * units sold) represents the bar’s height

20 of 108

Group Members: lbh2148, dar2209, jx2514, rl3431

1

3

2

4

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

TOTAL SALES ($)

cookies 🍪

bagels 🥯

coffee ☕️

coffee☕️

cookies 🍪

bagels 🥯

TOTAL SALES ($)

21 of 108

Group Members: UNI1, UNI2, UNI3, UNI4

1

3

2

4

22 of 108

Group Members: ham2167, eam2316, al4402

1

3

2

4

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

TOTAL SALES

$

cookies 🍪

bagels 🥯

coffee ☕️

TOTAL SALES

$

☕️

🍪

🥯

23 of 108

Group Members: dwr2118, akc2206, kjl2175

1

3

2

4

TOTAL SALES

Mar.

$

cookies 🍪

bagels 🥯

coffee ☕️

Jan.

Feb.

TOTAL SALES

$

cookies 🍪

bagels 🥯

coffee ☕️

☕️

🍪

🥯

Q1 TOTAL SALES ($)

TOTAL SALES

$

🍪

🥯

☕️

Rotate lines + scale to correct vals + �Remove x axis labels

Axis labels move down

Extrude lines into rectangles

24 of 108

03.1

Animation Readings

25 of 108

Zooming: Geometric or Semantic?

26 of 108

27 of 108

28 of 108

Too many to see: alpha transparency

29 of 108

Too many to see: jittering

30 of 108

Too many to see: contour, binning...

31 of 108

03.2

Motion Perception

32 of 108

Why Animation?

Highly effective at attracting attention

Object constancy naturally conveys data transformations

Motion can convey causality & intentionality

33 of 108

Animation for Narrative, by Pitch Interactive (2015)

34 of 108

Gestalt principle: Common Fate, or “flocking”

35 of 108

Human motion exhibits “visual pop-out”

George Mather

36 of 108

However, multiple object tracking has limits

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

(Yantis 92; Pylyshn 88; Cavanagh 05)

37 of 108

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.

http://cogweb.ucla.edu/Discourse/Narrative/Heider_45.html

“In 1946, Professor Albert Michotte of Louvain University in Belgium first reported a series of experiments on the perception (now called attribution) of causality. Inspired by the philosopher David Hume and others, Michotte devised an elaborate mechanical apparatus that allowed him to manipulate the animation of two objects on a projection screen. Both could move left and right at various speeds and with various delays. Small variations in their movement produced large variations in the way his subjects described what they saw. Sometimes the description would be entirely factual, for example, "The ball on the left moved from left to right about 20 cm, then stopped for about 3 seconds. Then the ball on the right moved about 10 cm from left to right and stopped." At other times the description included words attributing motivations, emotions, age, gendereand relationships between the two objects, for example, "The little ball is trying to play with the big ball, but the big ball doesn't want to play so he chases the little ball away. But the little ball is stubborn and keeps bothering the big ball. Finally, the big ball gets mad and leaves."”

38 of 108

Attribution of Causality (Michotte ‘46)

Redrawn Colin Ware 2004

39 of 108

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

40 of 108

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.

41 of 108

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

Example via Tamara Munzner

42 of 108

04

Animated Transitions for Visualizations

43 of 108

Principles of Animation (Heer & Robertson ’07)

Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mapping
Respect semantic correspondence (mark should represent same data)
Avoid ambiguity

≈ Expressiveness principle

44 of 108

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

45 of 108

“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?

?

46 of 108

“Animated Transitions in Statistical Graphics” ’07

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

47 of 108

Staged Transitions?

?

48 of 108

Staged Transitions: stacked/grouped bars

49 of 108

50 of 108

Taxonomy of transitions

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

51 of 108

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

52 of 108

Example: Gapminder (2006)

53 of 108

“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)

54 of 108

Variant 1: Animated Scatterplot

55 of 108

Variant 2: Traces

56 of 108

Variant 3: Small multiples

57 of 108

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!)

58 of 108

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

59 of 108

Case Study: A Day in the Life of Americans

60 of 108

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

61 of 108

Case Study: Obama Budget

62 of 108

05

Implementing Animations

63 of 108

Implementation Approaches

Frame-Based Animation

2. Transition-Based, aka tweening

64 of 108

Implementation Approaches

Frame-Based Animation

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

65 of 108

Frame-Based Animation

66 of 108

Frame-Based Animation

Illustration via Jeffery Heer

1

2

3

4

67 of 108

Frame-Based Animation

Illustration via Jeffery Heer

1

circle(10,10)

2

circle(15,15)

3

circle(20,20)

4

circle(25,25)

68 of 108

Frame-Based Animation

Illustration via Jeffery Heer

1

circle(10,10)

2

circle(15,15)

3

circle(20,20)

4

circle(25,25)

69 of 108

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()

70 of 108

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) { x_now = x_start + fraction * (x_end - x_start); }

Timing & redraw managed by UI toolkit

71 of 108

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)

72 of 108

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

73 of 108

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

74 of 108

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.

75 of 108

76 of 108

When in doubt, use easing

77 of 108

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

78 of 108

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

79 of 108

D3 Transitions: parameters

// Animate: interpolate to target values with default timing

bars.transition()

.duration(500)

.delay(0)

.ease(d3.easeBounce)

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

...

Example via Jeffery Heer

80 of 108

D3 Transitions: what does this do?

bars.exit().transition()

.style(“opacity”, 0)

.remove();

Example via Jeffery Heer

81 of 108

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

82 of 108

CSS Transitions

a {

color: black;

transition: color 1s ease-in-out;

}

a:hover {

color: red;

}

Example via Jeffery Heer

83 of 108

CSS Transitions

a {

color: black;

transition: color 1s ease-in-out;

}

a:hover {

color: red;

}

Property

Duration

Easing

Example via Jeffery Heer

84 of 108

Demos & Resources

UX

Google Material Design: Understanding Motion

D3

Learn D3: Animation Observable by Bostock
Jerome Cukier D3 animations & transitions tutorial
Animations & Transitions MIT DUSP Viz tutorial
Bostock: Object Constancy, Sortable Bar Chart, Named Transitions, D3 Show Reel

85 of 108

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

86 of 108

Animation & Narrative go together

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

87 of 108

Narrative (next week)

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

88 of 108

06

Final Projects

Assignment Page

89 of 108

Finding a dataset

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 weekly GPS, time usage?)
...think like The Pudding

The world is your oyster!

90 of 108

91 of 108

Jan Diehm/The Pudding

92 of 108

07

A4 Show-and-tell

93 of 108

We’ll go around and share

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

94 of 108

For example

Comparing GDP growth vs. CO₂ reductions in various countries

Description of the question being asked, the main insight and a hint at the things that can’t be seen in the screenshot but are covered in more detail in the interactive visualization

One thing that was surprisingly hard…

One thing that was surprisingly fun…

Link to the interactive visualization:

http://example.com/my-viz

95 of 108

Interactive Corruption World Map

In this visualization, we aim to capture the difference in perceived corruption vs. actual corruption. Perceived corruption, which we derive from happiness scores provided by the World Happiness Report, reflects how corruption influences individual's sense of well-being. Actual corruption is provided by Worldwide Governance Indicator data from the World Bank. By comparing both metrics, the visualization highlights the discrepancies between what people feel based on their overall well-being, and the reality in a given country.

One thing that was surprisingly hard… was transforming the corruption score from both sources to be comparable.

One thing that was surprisingly fun.. was being able to experiment with many different interactivity features

Link to the interactive visualization:

https://observablehq.com/d/c06a7bf9781bbdf9

96 of 108

IMDB Data!

How are the top 1000 movies connected by their top 4 leading actors? Is there a connection between those movies and their gross income?

One thing that was surprisingly hard…

Making the same points change and highlight between both graphs

One thing that was surprisingly fun…

Seeing the different ways that movie actors were connected!

Link to the interactive visualization:

https://observablehq.com/d/ef26ac61890ca27b

97 of 108

Class-C Violations (with al4402, cf3021, hla2126, & ham2167)

Choropleth map of unresolved Class-C housing code violations in NYC rental units by census tract. When you hover over a census tract, a tooltip pops up with the census tract ID, the number of violations per rental unit and the name of the approximate neighborhood the tract covers.

One thing that was surprisingly hard…

Designing the zoom functionality

One thing that was surprisingly fun…

Linking the borough dropdown menu to the actual visualization

Link to the interactive visualization:

https://observablehq.com/d/3f2bb2bc1ef4c909

98 of 108

Mumbai Pollutant

Description of the question being asked, the main insight and a hint at the things that can’t be seen in the screenshot but are covered in more detail in the interactive visualization

What are the various pollutant levels in different areas of Mumbai between 2018 and 2020?

One thing that was surprisingly hard…

Trying to make a date-range zoom slider

One thing that was surprisingly fun…

Creating a dropdown for the different types of pollutants

Link to the interactive visualization:

https://observablehq.com/d/2d8775fed1036271

99 of 108

The Caitlin Clark Effect (with Adira, Lucy, Jeffrey, and Sarah)

How did Caitlin Clark’s draft into the WNBA impact WNBA attendance figures? Did attendance at the WNBA increase in general, or did people go especially to see Clark play?

One thing that was surprisingly hard…

Deciding what way of representing the attendance data would highlight the Fever/Caitlin’s effect the most (as in to show cumulative attendance, or avg attendance per game).
Trying to get the sizing and positioning of the chart vis-a-vis the legend correct

One thing that was surprisingly fun…

Seeing that our hypothesis actually seems to be true!
Seeing other users interact with our graphic – and seeing whether or not they understood what was going on

Link to the interactive visualization:

https://observablehq.com/d/70d83934aa58f30f

100 of 108

Soundwaves of Popularity (Alex, Kimiya, Vishal, and Logan)

We chose to answer the question “What makes music genres popular?” through a data-rich visualization comparing genres’ popularities along the x-axis to various calculated aspects of the music itself provided by the data set.

Through interacting with the visualization, onca can see insights into which musical aspects within a specific genre influence its overall popularity.

One thing that was surprisingly hard was getting the colors to return back to normal for the different representations e.g. going back to the right shade of green or going back to grey when a genre group was selected.

One thing that was surprisingly fun was exploring the dataset. The data had a lot of really cool derived data like danceability, energy, valence, etc.

Link to the interactive visualization:

https://observablehq.com/d/ac908ec6eaef9729

101 of 108

Arkeenichel (with akc2206, kjl2175, rl3431, & ng2985)

Description of the question being asked, the main insight and a hint at the things that can’t be seen in the screenshot but are covered in more detail in the interactive visualization

One thing that was surprisingly hard…

Getting zooming to work well without strange/unexpected/unintuitive behavior

One thing that was surprisingly fun…

Seeing our abstract ideas being implemented (especially the stacked ranking functionality)

Link to the interactive visualization:

https://observablehq.com/d/14e755b32f0ca896

102 of 108

Spotify (dwr2118, sf3218, sj3229, sjp2226 )

Description of the question being asked, the main insight and a hint at the things that can’t be seen in the screenshot but are covered in more detail in the interactive visualization

We used a Spotify dataset with 900 songs, each including audio features, release dates, genres, and popularity scores. We started our project by exploring ways to show the relationship between Spotify track popularity and audio features.Each point in our interactive scatter plot (1965–2020) represents a single track. The visualization highlights the genre differences.

Users can hover over points to see the artist, genre, valence, album cover, and a Spotify link. A year slider filters by release date, while a "Show All Years" toggle displays the full dataset.

One thing that was surprisingly hard was dealing with the tooltip interaction. Since there’s a lot of points that lay on the bottom right corner, we had to play around with how to move the tooltip accordingly.

One thing that was surprisingly fun…

The insights that emerged from the overlapping colors in different areas of the chart, which revealed general trends for various genres.

Link to the interactive visualization:

https://observablehq.com/d/b01eb889c8f922f0

103 of 108

CovidChrono (eam2316, hz2995, jx2515, yy3204)

An interactive graph that displays the trends in cases and deaths for each state in a 7-day average span using color. Blue is for cases and red is deaths. Users are allowed to click on states and have a more deeper look into the 7-day span.

One thing that was surprisingly hard was creating the map.

One thing that was surprisingly fun seeing the colors get lighter and darker on the states for the trends.

Link to the interactive visualization:

https://observablehq.com/d/86339c808367d8d0

104 of 108

Questions?

Next Class…

105 of 108

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
We’ll send cumulatives grades up to A3 + midterm

106 of 108

107 of 108

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

108 of 108

(not to scale!)

1hr

1-3hr

3-6hr

6-24hr

24+hr

A lot of days

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

0 hours