CSE512 :: 4 Feb 2014

Animation

Jeffrey Heer University of Washington

1
Why use motion?
Visual variable to encode data
Direct attention
Understand system dynamics
Understand state transition
Increase engagement

2
Cone Trees [Robertson 91]

Video

3
4
Volume rendering [Lacroute 95]

Video

5
NameVoyager [Wattenberg 04]

http://www.babynamewizard.com/namevoyager/lnv0105.html

6
Topics
Motion perception
Principles for animation
Animated transitions in visualizations

7
Motion Perception

8
Perceiving Animation
Under what conditions does a sequence of static
images give rise to motion perception?

Smooth motion perceived at

~10 frames/second (100 ms).

http://www1.psych.purdue.edu/Magniphi/PhiIsNotBeta/phi2.html

9
Motion as a visual cue
Pre-attentive, stronger than color, shape, …
More sensitive to motion at periphery
Similar motions perceived as a group
Motion parallax provide 3D cue (like stereopsis)

10
Tracking Multiple Targets

How many dots can we simultaneously track?

11
12
13
14
15
16
 Tracking Multiple Targets

How many dots can we simultaneously track?

~4-6. Difficulty increases sig. at 6. [Yantis 92, Pylyshn 88, Cavanagh 05]
17
Segment by Common Fate

http://dragon.uml.edu/psych/commfate.html http://www.singlecell.org/july/index.html

18
19
Grouped dots count as 1 object

Dots moving together are grouped

http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

20
Grouping based on biological motion

[Johansson 73]

http://www.lifesci.sussex.ac.uk/home/George_Mather/Motion/WALK.MOV

21
Motions show transitions
See change from one state to next

start

22
Motions show transitions
See change from one state to next

end

23
Motions show transitions
See change from one state to next

Shows transition better, but

Still may be too fast, or too slow
Too many objects may move at once

start end

24
Velocity Perception
What is perceived as smooth, uniform motion?
Velocity perception can be affected by:
 Path curvature
 Size / depth perception
 Luminance contrast
(DEMO)

25
Constructing Narratives

http://anthropomorphism.org/img/Heider_Flash.swf

26
Attribution of causality [Michotte 46]

http://cogweb.ucla.edu/Discourse/Narrative/michotte-demo.swf

27
Attribution of causality [Michotte 46]

[Reprint from Ware 04]

28
Animation Helps? Hurts?
Attention Adirect attention Adistraction
Object ConstancyAchange tracking Afalse relations
Causality Acause and effectAfalse agency
Engagement Aincrease interestA“chart junk”
Calibration A Atoo slow: boring
Atoo fast: errors

29
Principles for
Animation

30
Principles for Animation
Character Animation
(Johnston & Thomas ‘81, Lasseter ‘87)
Squash and stretch
Exaggeration
Anticipation, Follow-through
Staging, Overlapping Action
Slow-in / Slow-out

31
Squash and stretch
Defines rigidity of
material

Should maintain
constant volume

Smoothes fast motion,

similar to motion blur

32
Staging
Clear presentation of one idea at a time
Highlight important actions
Lead viewers’ eyes to the action
Motion in still scene, stillness in busy scene
Motion clearest at silhouette

33
Anticipation
Show preparation for an action

34
Follow-through
Emphasize termination of action

35
Slow-in, slow-out
Space in-betweens to
provide slow-in and out

Linear interpolation is
less pleasing

36
Example: Andre and Wally B.

37
Example: Andre and Wally B.

38
Example: Andre and Wally B.

39
Example: Andre and Wally B.

40
Principles for Animation
Animated Presentations
(Zongker & Salesin ‘03)

Make all movement meaningful

Avoid squash-and-stretch, exaggeration

Use anticipation and staging

Do one thing at a time

41
Principles for conveying information

Congruence Expressiveness?
The structure and content of the external
representation should correspond to the desired
structure and content of the internal representation.

Apprehension Effectiveness?
The structure and content of the external
representation should be readily and accurately
perceived and comprehended.
[from Tversky 02]

42
Problems understanding animation [Tversky]

Difficult to estimate paths and trajectories

Motion is fleeting and transient
Cannot simultaneously attend to multiple motions
Parse motion into events, actions and behaviors
Misunderstanding and wrongly inferring causality
Anthropomorphizing physical motion may cause
confusion or lead to incorrect conclusions

43
Administrivia

44
A3: Interactive Visualization
Create an interactive visualization application. Choose a data
domain and select an appropriate visualization technique.

1. Choose a data set and storyboard your interface

2. Implement the interface using tools of your choice
3. Submit your application and produce a final write-up

You should work in groups of 2.

Due by 5:00pm on Monday, February 10

45
Animated Transitions

46
Cone Trees [Robertson 91]

47
Polyarchy Visualization [Robertson 02]
Animate pivots across
intersecting hierarchies.
Tested a number of
animation parameters.
Best duration: ~1 sec

Rotational movement
degraded performance,
translation preferred.

48
Degree-of-Interest Trees [Heer 04]

Animation of expanding/collapsing branches

49
SpaceTree [Grosjean 04]

Break animated transitions into discrete stages

50
Radial Graph Layout

Optimize animation to aid comprehension

http://people.ischool.berkeley.edu/~rachna/gtv/

51
52
Animation in Radial Graph Layout
Help maintain context of nodes and general
orientation of user during refocus
Transition Paths
 Linear interpolation of polar coordinates
 Node moves in an arc, not straight lines
 Moves along circle if not changing levels
 When changing levels, spirals to next ring

53
Animation in Radial Graph Layout
Transition constraints
 Minimize rotational travel (move former parent
away from new focus in same orientation)
 Avoid cross-over of edges

54
Constraint: Retain Edge Orientation

55
Constraint: Retain Neighbor Order

56
Animated Transitions in
Statistical Data Graphics

57
58
Log Transform

59
60
Ordering / Sorting

61
62
Filtering

63
64
65
Month 1

66
Timestep

Month 2

67
68
Change Encodings

69
70
Change Data Dimensions

71
Change Data Dimensions

72
Change Encodings + Axis Scaling

73
Data Graphics and Transitions

Visual Encoding

Change selected data Animation to

dimensions or encodings communicate changes?

74
Transitions between Data Graphics

During analysis and presentation it is common to

transition between related data graphics.
Can animation help?
How does this impact perception?

75
Principles for conveying information

Congruence
The structure and content of the external
representation should correspond to the desired
structure and content of the internal representation.

Apprehension
The structure and content of the external
representation should be readily and accurately
perceived and comprehended.
[from Tversky 02]

76
Principles for Animation
Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mappings
Respect semantic correspondence
Avoid ambiguity
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

77
Principles for Animation
Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mappings
Respect semantic correspondence
Avoid ambiguity
Apprehension Visual marks should
Group similar transitions always represent the
Minimize occlusion same data tuple.
Maximize predictability
Use simple transitions
Use staging for complex transitions
Make transitions as long as needed, but no longer

78
Principles for Animation
Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mappings
Respect semantic correspondence
Avoid ambiguity
Apprehension Different operators
Group similar transitions should have distinct
Minimize occlusion animations.
Maximize predictability
Use simple transitions
Use staging for complex transitions
Make transitions as long as needed, but no longer

79
Principles for Animation
Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mappings
Respect semantic correspondence
Avoid ambiguity
Apprehension Objects are harder to
track when occluded.
Group similar transitions
Minimize occlusion
Maximize predictability
Use simple transitions
Use staging for complex transitions
Make transitions as long as needed, but no longer

80
Principles for Animation
Congruence
Maintain valid data graphics during transitions
Use consistent syntactic/semantic mappings
Respect semantic correspondence
Avoid ambiguity
Keep animation as
Apprehension simple as possible. If
Group similar transitions complicated, break
Minimize occlusion into simple stages.
Maximize predictability
Use simple transitions
Use staging for complex transitions
Make transitions as long as needed, but no longer

81
82
Study Conclusions
Appropriate animation improves graphical perception
Simple transitions beat “do one thing at a time”
Simple staging was preferred and showed benefits
but timing important and in need of study
Axis re-scaling hampers perception
Avoid if possible (use common scale)
Maintain landmarks better (delay fade out of lines)
Subjects preferred animated transitions

83
Animation in Trend Visualization
Heer & Robertson study found that animated
transitions are better than static transitions for
estimating changing values.
How does animation fare vs. static time-series
depictions (as opposed to static transitions)?
Experiments by Robertson et al, InfoVis 2008

84
Animated Scatterplot [Robertson 08]
85
Traces [Robertson 08]
86
Small Multiples [Robertson 08]
87
Study Analysis & Presentation
Subjects asked comprehension questions.
Presentation condition included narration.
Multiples 10% more accurate than animation
Presentation: Anim. 60% faster than multiples
Analysis: Animation 82% slower than multiples
User preferences favor animation

88
Summary
Animation is a salient visual phenomenon
 Attention, object constancy, causality, timing
 Design with care: congruence & apprehension
For processes, static images may be preferable
For transitions, animation has demonstrated
benefits, but consider task and timing

89