More Web Proxy on the site http://driver.im/

research-article

Data Animator: Authoring Expressive Animated Data Graphics

Authors:

John R Thompson,

John StaskoAuthors Info & Claims

CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

Article No.: 15, Pages 1 - 18

https://doi.org/10.1145/3411764.3445747

Published: 07 May 2021 Publication History

Abstract

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.

Supplementary Material

VTT File (3411764.3445747_videofigurecaptions.vtt)

Download
6.19 KB

Supplementary Materials (3411764.3445747_supplementalmaterials.zip)

Download
58.97 MB

MP4 File (3411764.3445747_videofigure.mp4)

Supplemental video

Download
27.47 MB

References

[1]

Dan Abramov. 2020. Redux – A Predictable State Container for JS Apps. http://redux.js.org/

[2]

Adobe Systems Inc.2020. Adobe After Effects. http://www.adobe.com/products/aftereffects.html

[3]

Adobe Systems Inc.2020. Adobe XD. http://www.adobe.com/products/xd.html

[4]

Airbnb Inc.2020. Lottie. http://airbnb.design/lottie/

[5]

Fereshteh Amini, Nathalie Henry Riche, Bongshin Lee, Andres Monroy-Hernandez, and Pourang Irani. 2017. Authoring Data-Driven Videos with DataClips. IEEE Transactions on Visualization and Computer Graphics 23, 1(2017), 501–510. https://doi.org/10.1109/TVCG.2016.2598647

Digital Library

[6]

Apple Inc.2020. Keynote - Apple. http://www.apple.com/keynote/

[7]

Daniel Archambault, Helen Purchase, and Bruno Pinaud. 2010. Animation, Small Multiples, and the Effect of Mental Map Preservation in Dynamic Graphs. IEEE Transactions on Visualization and Computer Graphics 17, 4(2010), 539–552. https://doi.org/10.1109/TVCG.2010.78

Digital Library

[8]

Bohemian Coding. 2020. Sketch - The Digital Design Toolkit. https://www.sketchapp.com/

[9]

Michael Bostock, Vadim Ogievetsky, and Jeffrey Heer. 2011. D3 Data-Driven Documents. IEEE Transactions on Visualization and Computer Graphics 17, 12(2011), 2301–2309. https://doi.org/10.1109/TVCG.2011.185

Digital Library

[10]

Matthew Brehmer, Bongshin Lee, Benjamin Bach, Nathalie Henry Riche, and Tamara Munzner. 2017. Timelines Revisited: A Design Space and Considerations for Expressive Storytelling. IEEE Transactions on Visualization and Computer Graphics 23, 9(2017), 2151–2164. https://doi.org/10.1109/TVCG.2016.2614803

Digital Library

[11]

Matthew Brehmer, Bongshin Lee, Nathalie Henry Riche, David Tittsworth, Kate Lytvynets, Darren Edge, and Christopher White. 2019. Timeline Storyteller: The Design & Deployment of an Interactive Authoring Tool for Expressive Timeline Narratives. In In proceedings of the Computation + Journalism Symposium. C + J, Boston, MA, USA, 1–5. https://aka.ms/TSCJ19

[12]

Matthew Brehmer, Bongshin Lee, Petra Isenberg, and Eun Kyoung Choe. 2019. A Comparative Evaluation of Animation and Small Multiples for Trend Visualization on Mobile Phones. IEEE Transactions on Visualization and Computer Graphics 26, 1(2019), 364–374. https://doi.org/10.1109/TVCG.2019.2934397

[13]

Nadieh Bremer and Marlieke Ranzijn. 2015. Urbanization in East Asia between 2000 and 2010. http://nbremer.github.io/urbanization/

[14]

Ricardo Cabello. 2020. three.js – JavaScript 3D library. http://threejs.org/

[15]

Fanny Chevalier, Pierre Dragicevic, and Steven Franconeri. 2014. The Not-so-Staggering Effect of Staggered Animated Transitions on Visual Tracking. IEEE Transactions on Visualization and Computer Graphics 20, 12(2014), 2241–2250. https://doi.org/10.1109/TVCG.2014.2346424

[16]

Tarik Crnovrsanin, Shilpika, Senthil Chandrasegaran, and Kwan-Liu Ma. 2020. Staged Animation Strategies for Online Dynamic Networks. IEEE. https://doi.org/10.1109/TVCG.2020.3030385 To appear in IEEE Transactions on Visualization and Computer Graphics.

[17]

Datawrapper GmbH. 2020. Create charts and maps with Datawrapper. https://www.datawrapper.de/

[18]

Density Design and Calibro. 2020. Raw Graphs. http://rawgraphs.io/.

[19]

Pierre Dragicevic, Anastasia Bezerianos, Waqas Javed, Niklas Elmqvist, and Jean-Daniel Fekete. 2011. Temporal Distortion for Animated Transitions. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Vancouver, BC, Canada) (CHI ’11). ACM, New York, NY, USA, 2009–2018. https://doi.org/10.1145/1978942.1979233

Digital Library

[20]

Fan Du, Nan Cao, Jian Zhao, and Yu-Ru Lin. 2015. Trajectory Bundling for Animated Transitions. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Seoul, Republic of Korea) (CHI ’14). ACM, New York, NY, USA, 289–298. https://doi.org/10.1145/2702123.2702476

Digital Library

[21]

Facebook Inc.2020. React – A JavaScript library for building user interfaces. http://reactjs.org/

[22]

Figma Design. 2020. Figma: the collaborative interface design tool. https://www.figma.com/

[23]

Danyel Fisher. 2010. Animation for Visualization: Opportunities and Drawbacks. In Beautiful Visualization Edition. O’Reilly Media, Sebastopol, CA, USA. https://www.microsoft.com/en-us/research/publication/animation-for-visualization-opportunities-and-drawbacks/

[24]

Tong Ge, Yue Zhao, Bongshin Lee, Donghao Ren, Baoquan Chen, and Yunhai Wang. 2020. Canis: A High-Level Language for Data-Driven Chart Animations. Computer Graphics Forum 39, 3 (2020), 607–617. https://doi.org/10.1111/cgf.14005

[25]

Russell Goldenberg. 2017. Twenty Years of the NBA Redrafted. http://pudding.cool/2017/03/redraft/

[26]

Google Data Arts team. 2020. Two.js. http://two.js.org/

[27]

Google News Lab. 2020. Visualizing Google Data. http://trends.google.com/trends/story/US_cu_6fXtAFIBAABWdM_en

[28]

Mat Groves. 2020. PixiJS. http://www.pixijs.com/

[29]

David Guilmaine, Christophe Viau, and Michael J McGuffin. 2012. Hierarchically Animated Transitions in Visualizations of Tree Structures. In Proceedings of the International Working Conference on Advanced Visual Interfaces(AVI ’12). ACM, New York, NY, USA, 514–521. https://doi.org/10.1145/2254556.2254653

Digital Library

[30]

Jonathan Harper and Maneesh Agrawala. 2018. Converting Basic D3 Charts into Reusable Style Templates. IEEE Transactions on Visualization and Computer Graphics 24, 3(2018), 1274–1286. https://doi.org/10.1109/TVCG.2017.2659744

[31]

Jeffrey Heer and George Robertson. 2007. Animated Transitions in Statistical Data Graphics. IEEE Transactions on Visualization and Computer Graphics 13, 6(2007), 1240–1247. https://doi.org/10.1109/TVCG.2007.70539

Digital Library

[32]

Edwin Hutchins, James Hollan, and Donald Norman. 1985. Direct Manipulation Interfaces. Human–Computer Interaction 1, 4 (1985), 311–338. https://doi.org/10.1207/s15327051hci0104_2

Digital Library

[33]

InvisionApp Inc.2020. InVision. http://www.invisionapp.com/

[34]

Adam Katz. 2020. Layer Repeater - aescripts. https://aescripts.com/layer-repeater/

[35]

Rubaiat Habib Kazi, Fanny Chevalier, Tovi Grossman, and George Fitzmaurice. 2014. Kitty: Sketching Dynamic and Interactive Illustrations. In Proceedings of the ACM Symposium on User Interface Software and Technology (Honolulu, Hawaii, USA) (UIST ’14). ACM, New York, NY, USA, 395–405. https://doi.org/10.1145/2642918.2647375

Digital Library

[36]

Rubaiat Habib Kazi, Fanny Chevalier, Tovi Grossman, Shengdong Zhao, and George Fitzmaurice. 2014. Draco: Bringing Life to Illustrations with Kinetic Textures. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Toronto, Ontario, Canada) (CHI ’14). ACM, New York, NY, USA, 351–360. https://doi.org/10.1145/2556288.2556987

Digital Library

[37]

Kiln Enterprises Ltd. 2020. Flourish Studio. http://flourish.studio

[38]

Younghoon Kim, Michael Correll, and Jeffrey Heer. 2019. Designing Animated Transitions to Convey Aggregate Operations. Computer Graphics Forum 38, 3 (2019), 541–551. https://doi.org/10.1111/cgf.13709

[39]

Younghoon Kim and Jeffrey Heer. 2020. Gemini: A Grammar and Recommender System for Animated Transitions in Statistical Graphics. IEEE Transactions on Visualization and Computer Graphics 28, 1(2020), 1–10. https://doi.org/10.1109/TVCG.2020.3030360

[40]

Jürg Lehni and Jonathan Puckey. 2020. Paper.js. http://paperjs.org/

[41]

Thomas Lin Pedersen and David Robinson. 2020. A Grammar of Animated Graphics: gganimate. http://gganimate.com/

[42]

Zhicheng Liu, John Thompson, Alan Wilson, Mira Dontcheva, James Delorey, Sam Grigg, Bernard Kerr, and John Stasko. 2018. Data Illustrator: Augmenting Vector Design Tools with Lazy Data Binding for Expressive Visualization Authoring. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Montreal QC, Canada) (CHI ’18). ACM, New York, NY, USA, 1–13. https://doi.org/10.1145/3173574.3173697

Digital Library

[43]

Microsoft Corp.2020. Microsoft Powerpoint. http://products.office.com/en-us/powerpoint

[44]

MW Motion. 2020. Blend - aescripts. https://aescripts.com/blend/

[45]

Don Norman. 2013. The Design of Everyday Things: Revised and Expanded Edition. Basic Books, Philadelphia, PA, USA.

Digital Library

[46]

Palantir. 2020. Blueprint – A React-based UI toolkit for the web. http://blueprintjs.com/

[47]

Casey Reas and Ben Fry. 2006. Processing: Programming for the Media Arts. AI & Society 20, 4 (Aug 2006), 526–538. https://doi.org/10.1007/s00146-006-0050-9

Digital Library

[48]

Donghao Ren, Tobias Hollerer, and Xiaoru Yuan. 2014. iVisDesigner: Expressive Interactive Design of Information Visualizations. IEEE Transactions on Visualization and Computer Graphics 20, 12 (December 2014), 2092–2101. https://doi.org/10.1109/TVCG.2014.2346291

[49]

Donghao Ren, Bongshin Lee, and Matthew Brehmer. 2019. Charticulator: Interactive Construction of Bespoke Chart Layouts. IEEE Transactions on Visualization and Computer Graphics 25, 1(2019), 789–799. https://doi.org/10.1109/TVCG.2018.2865158

Digital Library

[50]

Donghao Ren, Bongshin Lee, and Tobias Höllerer. 2017. Stardust: Accessible and Transparent GPU Support for Information Visualization Rendering. Computer Graphics Forum 36, 3 (2017), 179–188. https://doi.org/10.1111/cgf.13178

Digital Library

[51]

George Robertson, Roland Fernandez, Danyel Fisher, Bongshin Lee, and John Stasko. 2008. Effectiveness of Animation in Trend Visualization. IEEE Transactions on Visualization and Computer Graphics 14, 6(2008), 1325–1332. https://doi.org/10.1109/TVCG.2008.125

Digital Library

[52]

Arvind Satyanarayan and Jeffrey Heer. 2014. Lyra: An Interactive Visualization Design Environment. Computer Graphics Forum 33, 3 (2014), 351–360. https://doi.org/10.1111/cgf.12391

[53]

Arvind Satyanarayan, Bongshin Lee, Donghao Ren, Jeffrey Heer, John Stasko, John Thompson, Matthew Brehmer, and Zhicheng Liu. 2020. Critical Reflections on Visualization Authoring Systems. IEEE Transactions on Visualization and Computer Graphics 26, 1(2020), 461–471. https://doi.org/10.1109/TVCG.2019.2934281

[54]

Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer. 2017. Vega-lite: A Grammar of Interactive Graphics. IEEE Transactions on Visualization and Computer Graphics 23, 1 (January 2017), 341–350. https://doi.org/10.1109/TVCG.2016.2599030

Digital Library

[55]

Arvind Satyanarayan, Ryan Russell, Jane Hoffswell, and Jeffrey Heer. 2016. Reactive Vega: A Streaming Dataflow Architecture for Declarative Interactive Visualization. IEEE Transactions on Visualization and Computer Graphics 22, 1 (January 2016), 659–668. https://doi.org/10.1109/TVCG.2015.2467091

Digital Library

[56]

Charles Stolper, Minsuk Kahng, Zhiyuan Lin, Florian Foerster, Aakash Goel, John Stasko, and Duen Horng Chau. 2014. GLO-STIX: Graph-Level Operations for Specifying Techniques and Interactive eXploration. IEEE Transactions on Visualization and Computer Graphics 20, 12(2014), 2320–2328. https://doi.org/10.1109/TVCG.2014.2346444

[57]

John Thompson, Zhicheng Liu, Wilmot Li, and John Stasko. 2020. Understanding the Design Space and Authoring Paradigms for Animated Data Graphics. Computer Graphics Forum 39, 3 (2020), 207–218. https://doi.org/10.1111/cgf.13974

[58]

Tumult. 2020. Tumult Hype 4.0. http://www.tumult.com/hype/

[59]

Barbara Tversky, Julie Bauer Morrison, and Mireille Betrancourt. 2002. Animation: can it facilitate?International Journal of Human-Computer Studies 57 (2002), 247–262. https://doi.org/10.1006/ijhc.1017

[60]

Bret Victor. 2013. Drawing Dynamic Visualizations. https://vimeo.com/66085662

[61]

Yong Wang, Daniel Archambault, Carlos Scheidegger, and Huamin Qu. 2018. A Vector Field Design Approach to Animated Transitions. IEEE Transactions on Visualization and Computer Graphics 24, 9(2018), 2487–2500. https://doi.org/10.1109/TVCG.2017.2750689

[62]

Hadley Wickham. 2009. ggplot2: Elegant Graphics for Data Analysis. Springer Nature, Houston, TX, USA.

Digital Library

[63]

Hadley Wickham. 2010. A Layered Grammar of Graphics. Journal of Computational and Graphical Statistics 19, 1(2010), 3–28. https://doi.org/10.1198/jcgs.2009.07098

[64]

Stephanie Yee and Tony Chu. 2015. A visual introduction to machine learning. http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

[65]

Szenia Zadvornykh. 2020. three.bas – THREE Buffer Animation System. http://github.com/zadvorsky/three.bas

Cited By

Shen YZhao YWang YGe TShi HLee B(2025)Authoring Data-Driven Chart Animations Through Direct ManipulationIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.349150431:2(1613-1630)Online publication date: Feb-2025
https://doi.org/10.1109/TVCG.2024.3491504
Hu SJiang ORiedmiller JBearfield C(2025)Motion-Based Visual Encoding Can Improve Performance on Perceptual Tasks with Dynamic Time SeriesIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345640531:1(163-173)Online publication date: Jan-2025
https://doi.org/10.1109/TVCG.2024.3456405
Femi-Gege TBrehmer MZhao J(2024)VisConductor: Affect-Varying Widgets for Animated Data Storytelling in Gesture-Aware Augmented Video PresentationProceedings of the ACM on Human-Computer Interaction10.1145/36981318:ISS(133-154)Online publication date: 24-Oct-2024
https://dl.acm.org/doi/10.1145/3698131
Show More Cited By

Index Terms

Data Animator: Authoring Expressive Animated Data Graphics
1. Computing methodologies
  1. Computer graphics
2. Human-centered computing
  1. Human computer interaction (HCI)

Index terms have been assigned to the content through auto-classification.

Recommendations

CAST: Authoring Data-Driven Chart Animations
CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

We present CAST, an authoring tool that enables the interactive creation of chart animations. It introduces the visual specification of chart animations consisting of keyframes that can be played sequentially or simultaneously, and animation parameters (...
Advanced use cases for animation rigging in unity
SIGGRAPH '19: ACM SIGGRAPH 2019 Studio

The Animation Rigging package for Unity enables users to setup rigs to procedurally control skeletal animations as a post-process. Attendees of this Studio Workshop will get hands-on experience working with this system in step-by-step tutorials. We will ...
Cartoonimator: A Paper-based Tangible Kit for Keyframe Animation
TEI '25: Proceedings of the Nineteenth International Conference on Tangible, Embedded, and Embodied Interaction
Animation unlocks exciting creative opportunities to express one’s ideas and stories. However, creating animations with existing software or tangible interfaces is difficult and time-consuming. In this paper, we present Cartoonimator, a paper-based ...

Comments

Please enable JavaScript to view thecomments powered by Disqus.

Information & Contributors

Information

Published In

cover image ACM Conferences

CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

May 2021

10862 pages

ISBN:9781450380966

DOI:10.1145/3411764

General Chairs:
Yoshifumi Kitamura
Tohoku University, Japan
,
Aaron Quigley
University of New South Wales, Australia
,
Program Chairs:
Katherine Isbister
University of California Santa Cruz, USA
,
Takeo Igarashi
The University of Tokyo, Japan
,
Publications Chairs:
Pernille Bjørn
University of Copenhagen, Denmark
,
Steven Drucker
Microsoft Research, USA

Copyright © 2021 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Sponsors

SIGCHI: ACM Special Interest Group on Computer-Human Interaction

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 07 May 2021

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed limited

Conference

CHI '21

Sponsor:

SIGCHI

CHI '21: CHI Conference on Human Factors in Computing Systems

May 8 - 13, 2021

Yokohama, Japan

Acceptance Rates

Overall Acceptance Rate 6,199 of 26,314 submissions, 24%

Upcoming Conference

CHI 2025

Sponsor:
sigchi

ACM CHI Conference on Human Factors in Computing Systems

April 26 - May 1, 2025

Yokohama , Japan

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

24
Total Citations
View Citations
966
Total Downloads

Downloads (Last 12 months)185
Downloads (Last 6 weeks)66

Reflects downloads up to 05 Mar 2025

Other Metrics

View Author Metrics

Citations

Cited By

Shen YZhao YWang YGe TShi HLee B(2025)Authoring Data-Driven Chart Animations Through Direct ManipulationIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.349150431:2(1613-1630)Online publication date: Feb-2025
https://doi.org/10.1109/TVCG.2024.3491504
Hu SJiang ORiedmiller JBearfield C(2025)Motion-Based Visual Encoding Can Improve Performance on Perceptual Tasks with Dynamic Time SeriesIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345640531:1(163-173)Online publication date: Jan-2025
https://doi.org/10.1109/TVCG.2024.3456405
Femi-Gege TBrehmer MZhao J(2024)VisConductor: Affect-Varying Widgets for Animated Data Storytelling in Gesture-Aware Augmented Video PresentationProceedings of the ACM on Human-Computer Interaction10.1145/36981318:ISS(133-154)Online publication date: 24-Oct-2024
https://dl.acm.org/doi/10.1145/3698131
Li HWang YQu H(2024)Where Are We So Far? Understanding Data Storytelling Tools from the Perspective of Human-AI CollaborationProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642726(1-19)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642726
Zhou THuang JChan G(2024)Epigraphics: Message-Driven Infographics AuthoringProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642172(1-18)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642172
Yang VJasim M(2024)Animating the Narrative: A Review of Animation Styles in Narrative Visualization2024 IEEE Visualization and Visual Analytics (VIS)10.1109/VIS55277.2024.00074(321-325)Online publication date: 13-Oct-2024
https://doi.org/10.1109/VIS55277.2024.00074
Liu ZChen CHooker J(2024)Manipulable Semantic Components: A Computational Representation of Data Visualization ScenesIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345629631:1(732-742)Online publication date: 10-Sep-2024
https://dl.acm.org/doi/10.1109/TVCG.2024.3456296
Rodrigues NDennig FBrandt VKeim DWeiskopf D(2024)Comparative Evaluation of Animated Scatter Plot TransitionsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.338855830:6(2929-2941)Online publication date: 16-Apr-2024
https://dl.acm.org/doi/10.1109/TVCG.2024.3388558
Fu YStasko J(2024)More Than Data Stories: Broadening the Role of Visualization in Contemporary JournalismIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2023.328758530:8(5240-5259)Online publication date: Aug-2024
https://doi.org/10.1109/TVCG.2023.3287585
Chen QCao SWang JCao N(2024)How Does Automation Shape the Process of Narrative Visualization: A Survey of ToolsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2023.326132030:8(4429-4448)Online publication date: Aug-2024
https://doi.org/10.1109/TVCG.2023.3261320
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

HTML Format

View this article in HTML Format.

Figures

Tables

Media

View Table of Conten