Vega-lite: Support Timer Events and Animations

[domoritz]

It would be great if we could create animated charts with Vega-Lite. Note that I do not mean animated transitions during interactions (which need Vega support first https://github.com/vega/vega/issues/641).

Vega has support for timer event streams. These event streams can be used to create animations that play once or repeat.

Use cases

• HOPs such as https://vega.github.io/vega/examples/hypothetical-outcome-plots/
• Animated gif style visualization to show change through time

Proposal

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "data.json"
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "frame": {"field": "time", "type": "ordinal", "interval": 1000},
    "key": {"field": "a", "type": "ordinal"}
  }
}

frame here defines an animation frame or step. The key channel is used to identify the same mark across frames. This is particularly interesting for points that move through the x/y space. Until we have transitions (needs Vega support), this is less relevant, though.

• We only support ordinal (iterate through) and quantitative (do we need a step size?).
• How should users define an interval?

Competing approaches

Expressions

An alternative to the time channel is writing timers in expressions.

Others?

[g3o2]

Is timer more like an encoding or more like a selection/interaction?

[thudata]

Is there any progress on this? Thanks.

[domoritz]

http://www.ycwu.org/Files/Data-GIF.pdf gives a good overview over the design space.