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])
]
})
thank you for using Observable Plot. We definitely want to build animations and interactions into the project, but we're not quite there yet. Meanwhile, here's a temporary approach: https://observablehq.com/@fil/plot-animate-a-bar-chart
Thank you for the feedback!