![Page 1: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/1.jpg)
CSE 442 - Data Visualization
Animation
Jeffrey Heer University of Washington
Visual variable to encode data Direct attention Understand system dynamics Understand state transition Increase engagement
Why Use Motion
Video
Cone Trees [Robertson 91]
Video
Volume Rendering [Lacroute 95]
httpwwwbabynamewizardcomnamevoyagerlnv0105html
NameVoyager [Wattenberg 04]
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 2: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/2.jpg)
Visual variable to encode data Direct attention Understand system dynamics Understand state transition Increase engagement
Why Use Motion
Video
Cone Trees [Robertson 91]
Video
Volume Rendering [Lacroute 95]
httpwwwbabynamewizardcomnamevoyagerlnv0105html
NameVoyager [Wattenberg 04]
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 3: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/3.jpg)
Video
Cone Trees [Robertson 91]
Video
Volume Rendering [Lacroute 95]
httpwwwbabynamewizardcomnamevoyagerlnv0105html
NameVoyager [Wattenberg 04]
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 4: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/4.jpg)
Video
Volume Rendering [Lacroute 95]
httpwwwbabynamewizardcomnamevoyagerlnv0105html
NameVoyager [Wattenberg 04]
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 5: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/5.jpg)
httpwwwbabynamewizardcomnamevoyagerlnv0105html
NameVoyager [Wattenberg 04]
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 6: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/6.jpg)
Motion perception Animated transitions in visualizations Implementing animations
Topics
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 7: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/7.jpg)
Motion Perception
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 8: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/8.jpg)
Under what conditions does a sequence of static images give rise to motion perception
Smooth motion perceived at ~10 framessec (100 ms)
Perceiving Animation
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 9: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/9.jpg)
Pre-attentive stronger than color shape hellip More sensitive to motion at periphery Similar motions perceived as a group Motion parallax provide 3D cue (like stereopsis)
Motion as Visual Cue
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 10: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/10.jpg)
How many dots can we simultaneously track
Tracking Multiple Targets
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 11: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/11.jpg)
How many dots can we simultaneously track ~4-6 Difficulty increases sig at 6
Tracking Multiple Targets
[Yantis 92 Pylyshn 88 Cavanagh 05]
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 12: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/12.jpg)
httpcoesdsuedueetarticlesvisualperc1starthtm
Dots moving together are grouped
Grouped Dots Count as 1 Object
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 13: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/13.jpg)
httpdragonumledupsychcommfatehtml httpwwwsinglecellorgjulyindexhtml
Segment by Common Fate
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 14: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/14.jpg)
httpwwwlifescisussexacukhomeGeorge_MatherMotionWALKMOV
[Johansson 73]
Grouping of Biological Motion
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 15: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/15.jpg)
See change from one state to next
start
Motions Show Transitions
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 16: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/16.jpg)
end
See change from one state to next
Motions Show Transitions
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 17: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/17.jpg)
start end
Shows transition better but
Still may be too fast or too slow Too many objects may move at once
See change from one state to next
Motions Show Transitions
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 18: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/18.jpg)
httpanthropomorphismorgimgHeider_Flashswf
Constructing Narratives
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 19: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/19.jpg)
httpcogwebuclaeduDiscourseNarrativemichotte-demoswf
Attribution of Causality [Michotte 46]
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 20: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/20.jpg)
[Reprint from Ware 04]
Attribution of Causality [Michotte 46]
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 21: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/21.jpg)
Animation
Attention
Constancy
Causality
Engagement
Calibration
distraction
false relations
false agency
ldquochart junkrdquo
too slow boring
too fast errors
direct attention
change tracking
cause and effect
increase interest
HurtsHelps
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 22: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/22.jpg)
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
Problems with Animation [Tversky]
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 23: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/23.jpg)
Animated Transitions in Statistical Graphics
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 24: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/24.jpg)
Log Transform
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 25: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/25.jpg)
Sorting
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 26: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/26.jpg)
Filtering
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 27: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/27.jpg)
Month 1
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 28: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/28.jpg)
Month 2
Timestep
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 29: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/29.jpg)
Change Encodings
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 30: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/30.jpg)
Change Data Dimensions
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 31: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/31.jpg)
Change Data Dimensions
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 32: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/32.jpg)
Change Encodings + Axis Scales
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 33: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/33.jpg)
Visual Encoding
Change selected data dimensions or encodings
Animation to communicate changes
Data Graphics amp Transitions
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 34: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/34.jpg)
During analysis and presentation it is common to transition between related data graphics
Can animation help How does this impact perception
Transitions between Data Graphics
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 35: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/35.jpg)
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]
Expressiveness
Effectiveness
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 36: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/36.jpg)
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 37: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/37.jpg)
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Visual marks should always represent the same data tuple
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 38: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/38.jpg)
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Different operators should have distinct animations
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 39: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/39.jpg)
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Objects are harder to track when occluded
Principles for Animation
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 40: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/40.jpg)
Congruence Maintain valid data graphics during transitions Use consistent syntacticsemantic 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
Keep animation as simple as possible If complicated break into simple stages
Principles for Animation
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 41: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/41.jpg)
Appropriate animation improves graphical perception
Simple transitions beat ldquodo one thing at a timerdquo
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
Study Conclusions
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 42: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/42.jpg)
Heer amp 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
Animation in Trend Visualization
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 43: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/43.jpg)
Animated Scatterplot [Robertson 08]
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 44: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/44.jpg)
Traces [Robertson 08]
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 45: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/45.jpg)
Small Multiples [Robertson 08]
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 46: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/46.jpg)
Which to prefer for analysis For 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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 47: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/47.jpg)
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 (even though less accurate and slower for analysis)
Study Analysis amp Presentation
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 48: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/48.jpg)
Administrivia
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 49: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/49.jpg)
Create an interactive visualization Choose a driving question in your topic area and develop an appropriate visualization + interaction techniques then deploy your visualization on the web
Due by 1159pm on Wednesday May 3
FP Interactive Prototype
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 50: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/50.jpg)
On Thursday May 4 we will view prototype demos
Your next milestone is to complete three peer evaluations of classmatesrsquo submissions
Wersquoll discuss critique methods next lecture
There will be no lecture on Tuesday May 9 due to ACM CHI Work on your peer evaluations
FP Peer Evaluations Next Week
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 51: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/51.jpg)
Implementing Animation
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 52: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/52.jpg)
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 53: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/53.jpg)
Frame-Based Animation
1 2 3 4
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 54: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/54.jpg)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 55: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/55.jpg)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 56: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/56.jpg)
Frame-Based Animation
1 2 3 4
circle(1010) circle(1515) circle(2020) circle(2525)
clear() clear() clear()
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 57: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/57.jpg)
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Animation Approaches
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 58: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/58.jpg)
Frame-Based Animation Redraw scene at regular interval (eg 16ms) Developer defines the redraw function
Transition-Based Animation (Hudson amp Stasko lsquo93) Specify property value duration amp easing Also called tweening (for ldquoin-betweensrdquo) Typically computed via interpolation step(fraction) xnow = xstart + fraction (xend - xstart) Timing amp redraw managed by UI toolkit
Animation Approaches
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 59: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/59.jpg)
from (1010) to (2525) duration 3sec
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 60: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/60.jpg)
from (1010) to (2525) duration 3sec Toolkit handles frame-by-frame updates
Transition-Based Animation
0s 1s 2s 3s
dx=25-10x=10+(03)dx x=10+(13)dx x=10+(23)dx x=10+(33)dx
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 61: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/61.jpg)
Any d3 selection can be used to drive animation
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 62: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/62.jpg)
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values)
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 63: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/63.jpg)
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Static transition update position and color of bars
bars attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 64: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/64.jpg)
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz))
D3 Transitions
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 65: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/65.jpg)
Any d3 selection can be used to drive animation Select SVG rectangles and bind them to data values
var bars = svgselectAll(ldquorectbarsrdquo)data(values) Animated transition interpolate to target values using default timing
barstransition() attr(ldquoxrdquo (d) =gt xScale(dfoo)) attr(ldquoyrdquo (d) =gt yScale(dbar)) style(ldquofillrdquo (d) =gt colorScale(dbaz)) Animation is implicitly queued to run
D3 Transitions
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 66: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/66.jpg)
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
D3 Transitions Continued
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 67: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/67.jpg)
barstransition() duration(500) animation duration in milliseconds delay(0) onset delay in milliseconds ease(d3easeBounce) set easing (or ldquopacingrdquo) style attr(ldquoxrdquo (d) =gt xScale(dfoo)) hellip
barsexit()transition() animate elements leaving the display style(ldquoopacityrdquo 0) fade out to fully transparent remove() remove from DOM upon completion
D3 Transitions Continued
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 68: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/68.jpg)
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
Easing (or ldquoPacingrdquo) 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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 69: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/69.jpg)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1
ease(x) = x (linear no warp)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 70: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/70.jpg)
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
Easing (or ldquoPacingrdquo) Functions
elapsed time duration
frac
0
1
0 1elapsed time duration
frac
00 1
1
ease(x) = x (linear no warp)
ease(x) = s-curve(x) (slow-in slow-out)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 71: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/71.jpg)
httpeasingsnet
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 72: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/72.jpg)
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 73: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/73.jpg)
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 74: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/74.jpg)
Extends CSS with Animated Transitions
a color black transition color 1s ease-in-out
ahover color red
CSS Transitions
Property Easing
Duration
Animate color transition upon mouse in out
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary
![Page 75: CSE 442 - Data Visualization Animationcourses.cs.washington.edu/courses/cse442/17sp/... · Pre-attentive, stronger than color, shape, … More sensitive to motion at periphery Similar](https://reader030.vdocuments.mx/reader030/viewer/2022040918/5e94148dd45d4115a108f41a/html5/thumbnails/75.jpg)
Animation is a salient visual phenomenon Attention object constancy causality timing Design with care congruence amp apprehension
For processes static images may be preferable
For transitions animation has demonstrated benefits but consider task and timing
Summary