Data Animator: Authoring Expressive Animated Data Graphics

Animation helps viewers follow transitions in data graphics. When authoring animations that incorporate data, designers must carefully coordinate the behaviors of visual objects such as entering, exiting, merging and splitting, and specify the temporal rhythms of transition through staging and staggering. We present Data Animator, a system for authoring animated data graphics without programming. Data Animator leverages the Data Illustrator framework to analyze and match objects between two static visualizations, and generates automated transitions by default. Designers have the flexibility to interpret and adjust the matching results through a visual interface. Data Animator also supports the division of a complex animation into stages through hierarchical keyframes, and uses data attributes to stagger the start time and vary the speed of animating objects through a novel timeline interface. We validate Data Animator’s expressiveness via a gallery of examples, and evaluate its usability in a re-creation study with designers.

[1]  Tobias Höllerer,et al.  Stardust: Accessible and Transparent GPU Support for Information Visualization Rendering , 2017, Comput. Graph. Forum.

[2]  Jian Zhao,et al.  Trajectory Bundling for Animated Transitions , 2015, CHI.

[3]  Jeffrey Heer,et al.  Animated Transitions in Statistical Data Graphics , 2007, IEEE Transactions on Visualization and Computer Graphics.

[4]  Bongshin Lee,et al.  Charticulator: Interactive Construction of Bespoke Chart Layouts , 2019, IEEE Transactions on Visualization and Computer Graphics.

[5]  Arvind Satyanarayan,et al.  Critical Reflections on Visualization Authoring Systems , 2019, IEEE Transactions on Visualization and Computer Graphics.

[6]  Bongshin Lee,et al.  Authoring Data-Driven Videos with DataClips , 2017, IEEE Transactions on Visualization and Computer Graphics.

[7]  Arvind Satyanarayan,et al.  Lyra: An Interactive Visualization Design Environment , 2014, Comput. Graph. Forum.

[8]  Jeffrey Heer,et al.  Gemini: A Grammar and Recommender System for Animated Transitions in Statistical Graphics , 2020, IEEE Transactions on Visualization and Computer Graphics.

[9]  Pierre Dragicevic,et al.  Temporal distortion for animated transitions , 2011, CHI.

[10]  Bongshin Lee,et al.  Timelines Revisited: A Design Space and Considerations for Expressive Storytelling , 2017, IEEE Transactions on Visualization and Computer Graphics.

[11]  John T. Stasko,et al.  Effectiveness of Animation in Trend Visualization , 2008, IEEE Transactions on Visualization and Computer Graphics.

[12]  Casey Reas,et al.  Processing: programming for the media arts , 2006, AI & SOCIETY.

[13]  Bongshin Lee,et al.  A Comparative Evaluation of Animation and Small Multiples for Trend Visualization on Mobile Phones , 2019, IEEE Transactions on Visualization and Computer Graphics.

[14]  Tobias Höllerer,et al.  iVisDesigner: Expressive Interactive Design of Information Visualizations , 2014, IEEE Transactions on Visualization and Computer Graphics.

[15]  Daniel W. Archambault,et al.  Animation, Small Multiples, and the Effect of Mental Map Preservation in Dynamic Graphs , 2011, IEEE Transactions on Visualization and Computer Graphics.

[16]  Maneesh Agrawala,et al.  Converting Basic D3 Charts into Reusable Style Templates , 2016, IEEE Transactions on Visualization and Computer Graphics.

[17]  Hadley Wickham,et al.  A Layered Grammar of Graphics , 2010 .

[18]  Danyel Fisher,et al.  Animation for Visualization: Opportunities and Drawbacks , 2010, Beautiful Visualization.

[19]  John T. Stasko,et al.  GLO-STIX: Graph-Level Operations for Specifying Techniques and Interactive eXploration , 2014, IEEE Trans. Vis. Comput. Graph..

[20]  James D. Hollan,et al.  Direct Manipulation Interfaces , 1985, Hum. Comput. Interact..

[21]  Hadley Wickham,et al.  ggplot2 - Elegant Graphics for Data Analysis (2nd Edition) , 2017 .

[22]  John T. Stasko,et al.  Understanding the Design Space and Authoring Paradigms for Animated Data Graphics , 2020, Comput. Graph. Forum.

[23]  Bongshin Lee,et al.  Timeline Storyteller: The Design & Deployment of an Interactive Authoring Tool for Expressive Timeline Narratives , 2018 .

[24]  Senthil K. Chandrasegaran,et al.  Staged Animation Strategies for Online Dynamic Networks , 2020, IEEE Transactions on Visualization and Computer Graphics.

[25]  Barbara Tversky,et al.  Animation: can it facilitate? , 2002, Int. J. Hum. Comput. Stud..

[26]  Bongshin Lee,et al.  Canis: A High‐Level Language for Data‐Driven Chart Animations , 2020, Comput. Graph. Forum.

[27]  Rubaiat Habib Kazi,et al.  Draco: bringing life to illustrations with kinetic textures , 2014, CHI.

[28]  Yong Wang,et al.  A Vector Field Design Approach to Animated Transitions , 2018, IEEE Transactions on Visualization and Computer Graphics.

[29]  Jeffrey Heer,et al.  Designing Animated Transitions to Convey Aggregate Operations , 2019, Comput. Graph. Forum.

[30]  Rubaiat Habib Kazi,et al.  Kitty: sketching dynamic and interactive illustrations , 2014, UIST.

[31]  D. Norman.  The Design of Everyday Things: Revised and Expanded Edition , 2013 .

[32]  Arvind Satyanarayan,et al.  Vega-Lite: A Grammar of Interactive Graphics , 2018, IEEE Transactions on Visualization and Computer Graphics.

[33]  HeerJeffrey,et al.  D3 Data-Driven Documents , 2011 .

[34]  Michael J. McGuffin,et al.  Hierarchically animated transitions in visualizations of tree structures , 2012, AVI.

[35]  Pierre Dragicevic,et al.  The Not-so-Staggering Effect of Staggered Animated Transitions on Visual Tracking , 2014, IEEE Transactions on Visualization and Computer Graphics.

[36]  Shawn Graham.  A Visual Introduction to Machine Learning , 2015 .

[37]  Arvind Satyanarayan,et al.  Reactive Vega: A Streaming Dataflow Architecture for Declarative Interactive Visualization , 2016, IEEE Transactions on Visualization and Computer Graphics.

[38]  John T. Stasko,et al.  Data Illustrator: Augmenting Vector Design Tools with Lazy Data Binding for Expressive Visualization Authoring , 2018, CHI.