Vega Lite - Animated bar charts without looping
I came across a fantastic article on animated visualizations using Vega-Lite, which you can find here: https://vis.csail.mit.edu/pubs/animated-vega-lite/
However, what I'm currently exploring is whether it's possible to create an animation in Vega-Lite that smoothly transitions from 0 to its respective value and stops there.
For instance, with bar charts, triggered by a filter change etc.
Does anyone happen to know if this is possible?
Attaching sample data:
{
"width": 400,
"height": 220,
"signals": [
{
"name": "ceiling_value",
"value": 4000
},
{
"name": "increment",
"value": 1,
"on": [
{
"events": "timer{70}",
"update": "increment + 500"
}
]
}
],
"data": [
{
"name": "dataset",
"transform": [
{
"type": "formula",
"as": "day",
"expr": "datum['day']"
},
{
"type": "formula",
"as": "value",
"expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "dataset",
"field": "day"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0, 6000],
"range": "height"
}
],
"axes": [
{
"orient": "left",
"scale": "yscale"
},
{
"orient": "bottom",
"scale": "xscale"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "dataset"},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "day"
},
"width": {
"scale": "xscale",
"band": 0.8,
"offset": -1
},
"fill": {
"value": "steelblue"
},
"cornerRadius": {"value": 4}
},
"update": {
"y": {
"scale": "yscale",
"field": "value"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
}
}
]
}
Animation is possible but it is manual and will require you to write the spec. You can see some examples of animation here on my GitHub and use the techniques yourself to build your viz.
https://github.com/PBI-David/Deneb-Showcase
Take a look at Convex Hull, Covid Map, Deneb Bubble Text, Fireworks, Starfield
I can also recommend the smoothing functions from Madison Giammaria as well as a neat animation that demonstrates their use.
