DataSway: Vivifying Metaphoric Visualization with Animation Clip Generation and Coordination

TL;DR

DataSway is a tool that uses AI to help designers create animated metaphoric visualizations, improving data comprehension and engagement through coordinated, semantically aligned animations.

Contribution

It introduces a human-AI co-creation workflow for designing SVG-based metaphoric animations, guided by vision-language models and timeline coordination techniques.

Findings

User study shows DataSway enhances creativity and usability.

Prototype successfully supports diverse metaphoric visualization animations.

Gallery demonstrates practical applications in web-based hypermedia.

Abstract

Animating metaphoric visualizations brings data to life, enhancing the comprehension of abstract data encodings and fostering deeper engagement. However, creators face significant challenges in designing these animations, such as crafting motions that align semantically with the metaphors, maintaining faithful data representation during animation, and seamlessly integrating interactivity. We propose a human-AI co-creation workflow that facilitates creating animations for SVG-based metaphoric visualizations. Users can initially derive animation clips for data elements from vision-language models (VLMs) and subsequently coordinate their timelines based on entity order, attribute values, spatial layout, or randomness. Our design decisions were informed by a formative study with experienced designers (N=8). We further developed a prototype, DataSway, and conducted a user study (N=14) to evaluate its creativity support and usability. A gallery with seven cases demonstrates its capabilities and applications in web-based hypermedia. We conclude with implications for future research on bespoke data visualization animation.