Animated Vega-Lite: Unifying Animation with a Grammar of Interactive Graphics

TL;DR

Animated Vega-Lite extends the Vega-Lite visualization grammar to unify static, animated, and interactive visualizations by modeling time as data and event streams, enabling seamless combination of these modalities.

Contribution

It introduces a unified approach to animation and interaction in Vega-Lite by representing time as an encoding channel and event stream, simplifying the creation of animated visualizations.

Findings

Expressive coverage demonstrated through diverse examples

Effective unification of static, animated, and interactive visualizations

Insights from expert developer interviews on design tradeoffs

Abstract

We present Animated Vega-Lite, a set of extensions to Vega-Lite that model animated visualizations as time-varying data queries. In contrast to alternate approaches for specifying animated visualizations, which prize a highly expressive design space, Animated Vega-Lite prioritizes unifying animation with the language's existing abstractions for static and interactive visualizations to enable authors to smoothly move between or combine these modalities. Thus, to compose animation with static visualizations, we represent time as an encoding channel. Time encodings map a data field to animation keyframes, providing a lightweight specification for animations without interaction. To compose animation and interaction, we also represent time as an event stream; Vega-Lite selections, which provide dynamic data queries, are now driven not only by input events but by timer ticks as well. We evaluate the expressiveness of our approach through a gallery of diverse examples that demonstrate coverage over taxonomies of both interaction and animation. We also critically reflect on the conceptual affordances and limitations of our contribution by interviewing five expert developers of existing animation grammars. These reflections highlight the key motivating role of in-the-wild examples, and identify three central tradeoffs: the language design process, the types of animated transitions supported, and how the systems model keyframes.