Support Timer Events and Animations #4060
Comments
domoritz
added
RFC / Discussion 💬
|
Is timer more like an encoding or more like a selection/interaction? |
|
Is there any progress on this? Thanks. |
|
http://www.ycwu.org/Files/Data-GIF.pdf gives a good overview over the design space.
|
|
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? |
|
We do plan to add animation support without recommendation but probably not via Gemini but native Vega support. |
|
This idea is implemented in Animated Vega-Lite: https://arxiv.org/abs/2208.03869. |
|
Moving examples can be found here. This looks amazing. When will this be merged into the Vega-Lite codebase? |
From their conclusion:
🎉🎉🎉 |
|
We're working on a plan to create prs to add the features from the paper to Vega-Lite. |
|
@domoritz any updates on this? |
|
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 |
|
@jonathanzong is working on #8921. All updates are over there. |
|
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 |
|
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. |
|
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: Rotating charts: These would be work well on a tv dashboard for example. |
|
@apb-reports please send a pull request to add these. |
This change implements basic features of [Animated Vega-Lite](https://vis.csail.mit.edu/pubs/animated-vega-lite/). With this change, users can create frame animations using a `time` encoding, a `timer` point selection, and a `filter` transform. This change does _not_ include more complex features e.g.: interpolation, custom predicates, rescale, interactive sliders, or data-driven pausing. - Adds a `time` encoding channel - Adds `isTimerSelection` function to check if a selection is an animation selections - Builds `_curr` animation dataset for `timer` selections to store the current animation frame - Adds animation signals to track the elapsed time (`anim_clock`), current animation value (`anim_value`), current position in the animation field's domain (`t_index`), etc. - When `time` encoding is present, updates associated marks' `from.data` to use the animation dataset (current frame). Relevant issue: #4060 Coauthor: @joshpoll ## Example specs Hop example: ```json { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "url": "data/seattle-weather.csv" }, "mark": "tick", "config": { "tick": { "thickness": 3 } }, "params": [ { "name": "date", "select": { "type": "point", "fields": [ "date" ], "on": "timer" } } ], "transform": [ { "filter": { "param": "date" } } ], "encoding": { "y": { "field": "precipitation", "type": "quantitative" }, "time": { "field": "date" } } } ``` Gapminder: ```json { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "url": "data/gapminder.json" }, "mark": "point", "params": [ { "name": "avl", "select": { "type": "point", "fields": [ "year" ], "on": "timer" } } ], "transform": [ { "filter": { "param": "avl" } } ], "encoding": { "color": { "field": "country" }, "x": { "field": "fertility", "type": "quantitative" }, "y": { "field": "life_expect", "type": "quantitative" }, "time": { "field": "year" } } } ``` --------- Co-authored-by: Josh Pollock <jopo@mit.edu> Co-authored-by: mattijn <mattijn@gmail.com>
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
timerevent streams. These event streams can be used to create animations that play once or repeat.Use cases
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"} } }framehere defines an animation frame or step. Thekeychannel 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.Competing approaches
Expressions
An alternative to the time channel is writing timers in expressions.
Others?
The text was updated successfully, but these errors were encountered: