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 6 cases demonstrates its capabilities and applications in web-based hypermedia. We conclude with implications for future research on bespoke data visualization animation.

Keywords: Animation, Visualization Authoring Tools, VLM Applications, Human-AI Interaction

Motivation

Do you feel intrigued by these examples? Turning data into metaphorical representations can naturally enchant audiences. While vivifying these artifacts with animation aligns with the current wave in animated data storytelling, creators face significant technical challenges in ensuring graphical integrity alongside metaphor-consistent animations. Moreover, as the graphical elements are dynamically rendered from data filters, the animation needs to accommodate interactivity. Witnessing the rise of VLMs in generating SVG animation, we aim to explore a human-AI co-design approach for animating metaphoric visualizations.

Challenges

Can MLLMs directly generate amazing animations for metaphoric visualizations? Probably not in the near future. Below is an example based on the famous visualization of OECD Better Life Index generated by Kling. Despite the creative output, one may observe that the petal sizes and positions are not consistent with the data. And the output video format prohibits interactivity.

In general, there are three major challenges unique to creating animated metaphoric visualizations:

• Ensuring semantic coherence in the animation of (multiple) data-driven elements.
• Maintaining graphical integrity of the data. That say, the visual attributes of marks encoding data should be carefully designed to avoid misleading representations.
• Accounting for data updates. Visualizations are not static, they change over time with user interactions like filtering or inherent updates of data like your daily walking steps.

Our Work

We propose a workflow that facilitates the creation of animations for SVG-based metaphoric visualizations. Users can initially derive animation clips for data elements from VLMs and subsequently coordinate their timelines based on entity order, attribute values, spatial layout, or randomness.

Gallery

---

---

---

---

---

---

Citation

@misc{xie2025datasway,
    title = { {DataSway}: Vivifying Metaphoric Visualization with Animation Clip Generation and Coordination },
    author = { Liwenhan Xie and Jiayi Zhou and Anyi Rao and Huamin Qu and Xinhuan Shu },
    year = { 2025 },
    eprint = { 2507.22051 },
    archivePrefix = { arXiv },
    primaryClass = { cs.HC },
    url = { https://arxiv.org/abs/2507.22051 }, 
}