Data Animator: Authoring Expressive Animated Data Graphics
Authors
Interactive Data VisualizationTime-Series & Network Graph VisualizationUI/UX DesignersVisual Artists & Designers
Title of the Paper
Data Animator: Authoring Expressive Animated Data Graphics
Paper Information
- Domain: Data visualization and animation design
- Keywords: Animated data graphics, design tools, keyframes, object matching, staging, temporal rhythm
Research Background and Problem
- Identified Problem or Challenge: Creating animated data graphics involves coordinating the behavior of visual objects (e.g., entering, exiting, merging, and splitting) and controlling design through staging and temporal rhythm, tasks that are complex and lack adequate tool support.
- Significance: Animated data graphics can significantly enhance users' ability to track, understand, and engage with data changes, especially by showcasing complex transitions in stages and reducing confusion caused by object movement.
- Motivation and Related Work:
- Current tools used by animation creators, such as keyframe animation tools and most template-based tools, lack features to support visual object coordination and data-driven temporal rhythm.
- Advanced animation design can be achieved through programming (e.g., using the D3 library), but programming is time-consuming and difficult for designers to learn.
Solution
- Proposed Method:
- Data Animator system: A no-code tool for creating animated data graphics. This system relies on static visualization inputs, automatically generates transitions, and allows designers to adjust system outputs through a visual interface.
- Utilizes the Data Illustrator framework to analyze and match objects between two static visualizations.
- Incorporates staging and temporal rhythm design features to visualize complex animations.
- Innovations:
- Automated object matching algorithm: Calculates matching scores between visual objects and generates transition animations.
- Data-driven staging and staggering mechanisms: Defines animation start times and speeds based on data attributes.
- Hierarchical keyframes: Supports rich animation rhythms through hierarchical time definitions.
- Implementation Steps:
- Import static data visualization files (created using Data Illustrator).
- Automatically generate transition animations between visualizations.
- Adjust animation rhythm and visual objects using the keyframe mechanism.
- Users can manually refine object matching and apply preset animation effects.
Research Outcomes
- Specific Achievements:
- Developed the Data Animator system, enabling the creation of complex animated data graphics without programming.
- Demonstrated various animation cases, such as urbanization data analysis and NBA draft data storytelling, showcasing the system's broad applicability.
- Provided an intuitive timeline editor and object matching interface, supporting quick design and animation adjustments.
- Comparison with Existing Solutions:
- Compared to template tools that only support simple transitions, Data Animator offers greater creative flexibility.
- Compared to programmatic tools, the system significantly reduces the learning and usage barriers while saving development time.
- Experimental or Evaluation Results:
- In user experiments, 8 participants with design backgrounds successfully completed non-trivial tasks using the system and expressed high satisfaction with its usability and practicality.
- Most participants reported that after learning the system, they could quickly use it to design complex animations.
- Limitations and Future Directions:
- Limitations: The system currently requires static chart inputs to be created using Data Illustrator, posing operational constraints; it does not support animations like view transitions.
- Future Directions:
- Support importing static charts from more formats and tools.
- Enable rapid generation of complex animation templates, such as time-series animations (e.g., bar chart race animations).
- Integrate enhanced features like data highlighting and dynamic filtering.
- Support exporting interactive web pages to promote animated data storytelling.
Research Questions / Practical Problems
Question signals indexed for this paper.
help
Research Questions
3- How can the design process for complex data animations be simplified so they can be created without programming?Category: Data Animation and Motion VisualizationSimilar questionsarrow_forward
- How can automated object matching and data-driven pacing design improve usability and expressiveness of data animations?Category: Data Animation and Motion VisualizationSimilar questionsarrow_forward
- How can designers intuitively adjust animation pacing and object matching for richer expressive effects?Category: Data Animation and Motion VisualizationSimilar questionsarrow_forward
lightbulb
Practical Problems
1- Designers must invest heavily in programming or cannot achieve flexible design when creating complex data animations.Category: Data Animation and Motion VisualizationSimilar questionsarrow_forward
- 75%
DataInk: Direct and Creative Data-Oriented Drawing
CHI '18· Interactive Data Visualization
- 60%
Methods for Intentional Encoding of High Capacity Human-Designable Visual Markers
CHI '18· Interactive Data Visualization +1
- 60%
Evaluating Multivariate Network Visualization Techniques Using a Validated Design and Crowdsourcing Approach
CHI '20· Interactive Data Visualization +1
- 60%
Interaction Techniques for Visual Exploration Using Embedded Word-Scale Visualizations
CHI '20· Interactive Data Visualization +1
- 60%
Color by Numbers: Interactive Structuring and Vectorization of Sketch Imagery
CHI '21· Interactive Data Visualization +1
- 60%
The Pattern is in the Details: An Evaluation of Interaction Techniques for Locating, Searching, and Contextualizing Details in Multivariate Matrix Visualizations
CHI '22· Interactive Data Visualization +1
- 60%
VisLab: Enabling Visualization Designers to Gather Empirically Informed Design Feedback
CHI '23· Interactive Data Visualization +1
- 60%
RidgeBuilder: Interactive Authoring of Expressive Ridgeline Plots
CHI '25· Interactive Data Visualization +1
- 60%
How Visualization Designers Perceive and Use Inspiration
CHI '25· Interactive Data Visualization +1
- 60%
The Social Construction of Visualizations: Practitioner Challenges and Experiences of Visualizing Race and Gender
CHI '25· Interactive Data Visualization +1
Based on Jaccard similarity of research subtopics & professions (≥60%)
Quick Actions
AdRecommended
Learn AI Coding at CodeNow
open_in_newOpen DOI Link
DOI: https://doi.org/10.1145/3411764.3445747
At a Glance
fact_checkPaper Snapshot
dataset
Source
CHI
calendar_month
Year
2021
emoji_events
Award
No award tagged
group
Authors
3 authors
sell
Subtopics
Interactive Data Visualization, Time-Series & Network Graph Visualization
work
Professions
UI/UX Designers, Visual Artists & Designers
article
Content Status
Full text indexed
hub
Related Papers
10 related papers