IAT 355 Visual Analytics. Animation 2. Lyn Bartram. Many of these slides were borrowed from M. Hearst and J. Heer

Transcription

1 IAT 355 Visual Analytics Animation 2 Lyn Bartram Many of these slides were borrowed from M. Hearst and J. Heer

2 Today A Primer! Things to do when designing your visualization Project concerns Animation Affect Course evaluations 2

3 What comes next (we re almost done) Next week (14): Text visualization REVIEW!!! Summarise what we have gone over Cover what you are supposed to know First project implementation due Friday! Week 15: Project demos We will set schedule EXAM 3

4 Project primer What are your driving questions/goals? Who is your audience/user population? What kinds of information and insights are you serving? What is the nature of your data? What s missing? Example: understanding life expectancy without GDP data (assignment 1) Form your (possibly incomplete) problem space 4

5 Project primer Deconstruct: Data Variable Type Visual feature Population Location GIS/spatial Point Map location (x,y) Prosperity Density quantitative Point size Median income quantitative Bar height Categories Ordinal Colour.. 5

6 Project primer Prioritise!!! What is your information HIERARCHY? What s most important to reveal or to eliminate at each stage? Align with visual feature priority Choose the appropriate visualization idiom NO SCATTER PLOTS FOR NOMINAL DATA.. 6

7 Choose your idiom 7

8 Project Primer Do a few things well as opposed to many things poorly You WILL have regrets Part of your report should include: Design JUSTIFICATION Why did you do what you did? Design REFLECTION What would you do/have done differently? What would you add? Remove? 8

9 And now back to animation.

10 Motion in visualization for data coding Motion is under-researched, but evidence suggests its power. Initial usable features include velocity, direction, phase, shape (type) and flicker/blink There are interactions between motion features and static features that need to be investigated E.g. brighter dots generate stronger motion signals (Schwartz, 2000?) Kanizsa_observations.html Large design space for animated and affective visualization 10

11 Issues with animation as communication [Tversky] Difficult to estimate paths and trajectories Motion is fleeting and transient Cannot simultaneously attend to many motions for detailed analysis Parse motion into events, actions and behaviors Misunderstanding and wrongly inferring causality Anthropomorphizing physical motion may cause confusion or lead to incorrect conclusions 11

12 Motion as interactive technique support Signaling Filtering and brushing Attention management Transition and story support 12

13 Motion for navigation and situation awareness Chang & Unger, Animation: From Cartoons to the User Interface, UIST 93 Main ideas Visual change in the interface can be sudden and unexpected People have no trouble understanding transitions in animated cartoons They grow and deform smoothly They provide visual cues of what is happening before, during, and after a transition. 13

14 Cartooning principles for animation Character animation [Johnson & Thomas 81, Lasseter 87] Squash and stretch Motion blur Dissolves Arrival and departure (from off-screen) Exaggeration Anticipation, Follow-Through Slow in/ slow out 14

15 Squash and stretch Defines rigidity of material Should maintain constant volume Smoothes fast motion, similar to motion blur 15

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

17 Anticipation Show preparation for an action Uses exaggeration primes viewer 17

18 Follow-through Emphasizes the finishing of an action 18

19 Slow-in, slow-out Space in-betweens to provide slow-in and out Linear interpolation is less pleasing 19

20 Andre and Wally B 20

21 Principles for Animated Presentations [Zongker & Saliesein, 03] Make all movement meaningful Avoid squash and stretch, exaggeration Use anticipation and staging DO ONE THING AT A TIME 21

22 Animated Transitions 22

23 Cone Trees [Robertson 91] 23

24 Polyarchy Visualization [Robertson 02] Animate pivots across intersecting hierarchies. Tested a number of animation parameters. Best duration: ~1 sec Rotational movement degraded performance, translation preferred 24

25 SpaceTree [Grosjean 04] Break animated transitions into discrete stages 25

26 Maintaining smooth transitions Transition Paths Linear interpolation of polar coordinates Node moves in an arc, not straight lines Moves along circle if not changing levels When changing levels, spirals in or out to next ring 26

27 Maintaining smooth transitions Transition constraints Minimize rotational travel (move former parent away from new focus in same orientation) Avoid cross-over of edges 27

28 Constraint Retain Orientation of Edges 28

29 Constraint Retain Ordering of Neighbors 29

30 Gnutellavision Transitions Animation timing Slow in Slow out timing (allows users to better track movement) Small usability study Participants preferred version with animation for larger graphs 30

31 Animated Transitions through Statistical Data Graphics

32 Data transforms 32

33 Log transform 33

34 Sorting 34

35 Data Graphics and Transitions 35

36 Principles for conveying information [Tversky 02] 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. 36

37 Principles for Animation Congruence Maintain valid data graphics during transitions Use consistent syntactic/semantic mappings Respect semantic correspondence Avoid ambiguity Apprehension Group similar transitions Minimize occlusion Maximize predictability Use simple transitions Use staging for complex transitions Objects are harder to track when occluded Make transitions as long as needed, but no longer Different operators should have distinct animations Visual marks should always represent the same data tuple Keep animation as simple as possible. If complicated, break into simple stages 37

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

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

40 40

41 traces 41

42 Small multiples 42

43 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 43

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

45 Animation summary Helps Hurts Attention Direct Attention Distraction Object Constancy Change tracking False relations Causality Cause and effect False agency Engagement Increase interest Chart junk 45