Observable Plot 中的动画数据转换

Question

我正在使用 Javascript 库 Observable Plot 在网页上（而不是 Observable 本身）呈现条形图。我希望条形图中的条形能够根据数据的变化进行转换：条形应该在 y 方向上动画 grow/shrink（使用一些特定的缓动）并且 y 轴应该重新缩放。如果可能的话，实现此目标的最佳方法是什么？

我们可以假设柱的数量不随时间变化（即 x 轴不变），但也欢迎处理 x 轴变化的解决方案。

举个例子，我想从

Bar chart pre-transition

说明了data = [ 2, 5, 10, 6 ]，到

Bar chart post-transition

说明了 data = [ 8, 4, 3, 2 ]。

这些图是使用

生成的

Plot.plot({
  y: {
    grid: true
  },
  marks: [
    Plot.barY(data, {x: (d, i) => i}),
    Plot.ruleY([0])
  ]
})

Answer 1

感谢您使用 Observable Plot。我们绝对想在项目中构建动画和交互，但我们还没有完全做到这一点。同时，这里有一个临时方法：https://observablehq.com/@fil/plot-animate-a-bar-chart

感谢您的反馈！

Observable Plot 中的动画数据转换

Animating data transition in Observable Plot

plot

data-visualization

observablehq