I'm using the Javascript library Observable Plot to render a bar chart on a webpage (not on Observable itself). I would like the bars in the bar chart to transition in response to changes in the data: the bars should animatedly grow/shrink in the y-direction (with some particular easing) and the y-axis should rescale. What's the best way of achieving this, if it's possible?
We can assume that the number of bars doesn't change over time (i.e. the x-axis is constant), but solutions that deal with changes to the x-axis are also welcome.
As an example, I would like to transition from
which illustrates data = [ 2, 5, 10, 6 ], to
which illustrates data = [ 8, 4, 3, 2 ].
These plots are generated using
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(data, {x: (d, i) => i}),
Plot.ruleY([0])
]
})