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 vega/vega#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?

[shenenya]

Is there any progress on this? Thanks.

[domoritz]

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

[joelostblom]

I just stumbled upon Gemini, which looks really cool! Is the plan to support animations directly from the VL spec in the future via Gemini?

[domoritz]

We do plan to add animation support without recommendation but probably not via Gemini but native Vega support.

[domoritz]

This idea is implemented in Animated Vega-Lite: https://arxiv.org/abs/2208.03869.

[PBI-David]

Moving examples can be found here. This looks amazing. When will this be merged into the Vega-Lite codebase?

http://vis.csail.mit.edu/pubs/animated-vega-lite/

[PButcher]

This idea is implemented in Animated Vega-Lite: https://arxiv.org/abs/2208.03869.

From their conclusion:

To support this future research, we intend to contribute our work back to the open source Vega-Lite project.

🎉🎉🎉

[domoritz]

We're working on a plan to create prs to add the features from the paper to Vega-Lite.

[gut4]

@domoritz any updates on this?

[PBI-David]

For anyone else looking for timer support in VL, it can be achieved as demonstrated in the nice looking clock example on Stack Overflow here: https://stackoverflow.com/questions/78106640/vega-lite-clock-chart/78117784

[domoritz]

@jonathanzong is working on #8921. All updates are over there.

[apb-reports]

Check out this example also where I switch between 4 different layers with the use of a timer event. A few warning in the log but it works well. https://stackoverflow.com/questions/78126558/animated-vega-lite-charts

[joelostblom]

Neat, thanks for sharing @apb-reports and @PBI-David; those examples are really neat! Maybe there could be room for a simplified example in the VL gallery? Although when #8921 lands, then the way to achieve something like what you have done might change, so waiting for that first probably makes the most sense (although I'm not familiar with timers myself)

@apb-reports I saw that your latest SO post asks to discuss how to "improve the spec further". Just a headsup that it might get closed as too unspecific so feel free to share on the VegaLite slack as well for more potential to discuss.

[apb-reports]

Hi @joelostblom, that would be amazing if you would add my 2 animated clocks and my 2 rotating chart examples as Vega lite examples. I will check out the slack site also. Adam

clocks:
https://stackoverflow.com/questions/78106640/vega-lite-clock-using-a-timer-in-vega-lite

Rotating charts:
https://stackoverflow.com/questions/78126558/animated-vega-lite-charts

These would be work well on a tv dashboard for example.

[domoritz]

@apb-reports please send a pull request to add these.