Motivation

Turning data into metaphorical representations like blossoms can enchant audiences. ( View examples) While vivifying these artifacts with animation aligns with the current wave in animated data storytelling, creators face significant technical challenges in ensuring data 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.

Our Work

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

Our proposed authoring workflow.

Spatial coordination of animation clips for data-driven graphical elements.

A prototype authoring tool to animate metaphoric visualizations.

Gallery

Case: OECD Better Life Index (.html)

Example 1: CD Sales (.html)

Example 2: Hotel Ratings (.html)

Example 3: Dreams (.html)

Example 4: Eurovision (.html)

Example 5: Seal Collection (.html)

Example 6: Bamboo Poems (.html)