Data Animator: Authoring Expressive Animated Data Graphics John Thompson Zhicheng Liu John Stasko Georgia Institute of Technology University of Maryland Georgia Institute of Technology Atlanta, GA, United States College Park, MD, United States Atlanta, GA, United States [email protected] [email protected] [email protected] ABSTRACT transitions between the visualizations. Although animation is not Animation helps viewers follow transitions in data graphics. When always beneficial for analytic tasks [12, 51], carefully designed ani- authoring animations that incorporate data, designers must care- mation of charts can facilitate detection of objects entering into a fully coordinate the behaviors of visual objects such as entering, scene [7], enhance understanding and engagement through staged exiting, merging and splitting, and specify the temporal rhythms transitions [31, 38], and help track changes in data [20, 29]. of transition through staging and staggering. We present Data An- Designing effective animated data graphics often requires thought- imator, a system for authoring animated data graphics without ful considerations on how to coordinate the behavior of visual objects programming. Data Animator leverages the Data Illustrator frame- and pace the temporal rhythms. For example, animated transitions work to analyze and match objects between two static visualizations, can be localized in a specific component (e.g., an axis changes from and generates automated transitions by default. Designers have linear to logarithmic scale), or happen between two completely the flexibility to interpret and adjust the matching results through different visual states (e.g., changing from a scatter plot to astacked a visual interface. Data Animator also supports the division of a bar chart). In the former case, displacing the axis ticks and labels complex animation into stages through hierarchical keyframes, and and updating the objects’ positions might be sufficient; in the latter uses data attributes to stagger the start time and vary the speed case with more drastic changes, designers need to decide which of animating objects through a novel timeline interface. We vali- visual objects should enter or exit the scene, and which objects date Data Animator’s expressiveness via a gallery of examples, and need to be merged, transformed or split. evaluate its usability in a re-creation study with designers. In addition to coordinating the behavior of visual objects, the temporal pacing of animation also requires deliberation. Staging CCS CONCEPTS and staggering are two commonly used techniques to pace animated transition. Staging divides a complex animation into a sequence • Human-centered computing ! Visualization systems and of simpler sub-transitions called stages. Staggering applies an in- tools. cremental offset to the starting time of each moving object, thus KEYWORDS avoiding the confusion caused by all the objects moving simultane- ously. These techniques may be manually designed but are often animated data graphics, authoring, keyframing, object matching, driven by data. For example, staging may be performed based on staging, staggering the data hierarchy, while the parents animate first, and the chil- ACM Reference Format: dren later [29]; the trigger time and the speed at which each shape John Thompson, Zhicheng Liu, and John Stasko. 2021. Data Animator: animate can be specified as a function of data values in an attribute. Authoring Expressive Animated Data Graphics. In CHI Conference on Human Existing animation authoring tools, however, lack support for Factors in Computing Systems (CHI ’21), May 8–13, 2021, Yokohama, Japan. coordinating visual objects and specifying data-driven temporal ACM, New York, NY, USA, 18 pages. https://doi.org/10.1145/3411764.3445747 pacing. Prevalent authoring paradigms for animated graphics in- clude [57]: 1 INTRODUCTION Animated data graphics are an increasingly popular medium for • keyframe animation: specify properties of graphical objects data-driven narratives on media outlets and digital publications at certain points of time by setting a set of keyframes, frames such as The New York Times1 and The Pudding2. These digital in between two keyframes are generated by tweening. narratives present visualizations of data to help communicate in- • procedural animation: generate animation of large number formation to the viewer. An increasing number include animated of animated objects with a set of behavior parameters. • presets & templates: apply predefined animation effects and 1http://www.nytimes.com/ configurations to objects. 2https://pudding.cool/ Through our previous ideation study [57], we found that design- 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 ers have an overall preference for keyframe animation. Under this for profit or commercial advantage and that copies bear this notice and the full citation paradigm, to perform visual object coordination, it is necessary to on the first page. Copyrights for components of this work owned by others than ACM track and manipulate objects across different visual states or frames. 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 It is easy to do so in traditional keyframing tools such as Adobe fee. Request permissions from [email protected]. After Effects for animated graphics, where the number of objects CHI ’21, May 8–13, 2021, Yokohama, Japan is typically small. Animated data graphics, however, often contain © 2021 Association for Computing Machinery. ACM ISBN 978-1-4503-8096-6/21/05...$15.00 hundreds or more visual objects, so analyzing and tracking the ob- https://doi.org/10.1145/3411764.3445747 jects become a challenge. Selectively applying different behaviors CHI ’21, May 8–13, 2021, Yokohama, Japan Thompson et al. to different groups of objects for coordination is also non-trivial. In a few minutes. Users found Data Animator useful for supporting order to specify and control temporal rhythms, designers need to the daunting task of coordinating numerous objects and provided articulate how data attributes may drive the staggering of objects feedback on how to improve the system interface further. or map to the speed of transition. No existing keyframing tools support these tasks with ease and precision. A few template-based 2 RELATED WORK tools provide predetermined temporal designs, but the range of expressivity is limited. 2.1 Effects of Animation on Data Graphics To date, programming remains the only viable way to create The proliferation of animation in data narratives hints to anima- expressive animated data graphics. For example, D3 [9] leverages tion’s benefits for communicating data. It seems a reasonable as- the Document Object Model (DOM) for interaction and graphics sumption that if a static visualization can help viewers understand rendering, and provides the enter, update, exit paradigm to manage data then a moving visualization should be even better [23]. But the differences between current and next visual state of adata what specifically about animation helps to benefit data graphics? graphic. D3 also provides a transition management module for Where is the line drawn between animation that clarifies and en- interpolating any objects’ properties en masse, while supporting riches versus that which obfuscates and distracts? We seek to sup- coordination of temporal aspects of animation (e.g., delay, duration, port designers in creating rich, compelling, and clear animations easing). However, programming takes significant time to learn, rather than animating for animation’s sake. To that end, we sum- write, and preview designs. Designers often favor familiar design marize the current body of knowledge on the advantages and dis- tools for animation and prototyping that provide expressivity and advantages of animation for data graphics. rapid feedback. Recent research empirically explores pacing techniques for visu- In this paper, we propose Data Animator, a system for author- alization. Previous findings from Heer and Robertson demonstrate ing animated data graphics without programming. Our approach the efficacy of staging animations to help viewers track objects and is rooted in the keyframe authoring paradigm and incorporates estimate changing values [31]. Fisher’s synopsis provides further elements from the procedural and presets & templates paradigms support for staging as a logical approach to assist viewers in under- when necessary. Animated transitions are specified between static standing the intermediate steps of complex transitions [23]. More data graphics – called vis boards. Data Animator adopts a dual recently staging has been shown to improve subjects’ accuracy to view design (Storyboard and Timeline views) that lets users switch comprehend transitions that aggregate data [38] and changes to between levels of authoring granularity. dynamic networks [16]. In order to support visual object coordination and data-driven In contrast to positive benefits for staging, Chevalier et al. cast temporal pacing, the system needs to understand the structure doubt on the effectiveness of staggering. They provide evidence that and properties of static visualizations. To this end, we build Data staggering has a negligible, or even negative, impact on multiple Animator on top