Data Animator: Authoring Expressive Animated Data Graphics

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:
    1. Import static data visualization files (created using Data Illustrator).
    2. Automatically generate transition animations between visualizations.
    3. Adjust animation rhythm and visual objects using the keyframe mechanism.
    4. 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.

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/papers/chi/47655/2021

AdRecommended

Learn AI Coding at CodeNow

open_in_newOpen DOI Link
DOI: https://doi.org/10.1145/3411764.3445747
At a Glance

Paper Snapshot

fact_check
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