Search code examples
plotdata-visualizationobservablehq

Animating data transition in Observable Plot


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

Bar chart pre-transition

which illustrates data = [ 2, 5, 10, 6 ], to

Bar chart post-transition

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])
  ]
})

Solution

  • 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!