Vega/Lite 中的动画

Question

我尝试实现类似于 https://vimeo.com/177767802（分钟 2:30）

中显示的动画

我的代码如下：

{
  "data": {
    "values": [
      {"A": 2,"B": 3,"C": 4,"D": "a"},
      {"A": 1,"B": 2,"C": 1,"D": "a"},
      {"A": 4,"B": 5,"C": 15,"D": "b"},
      {"A": 9,"B": 10,"C": 80,"D": "b"}
    ]
  },
  "mark": "circle",
  "select": {"id": {"type": "point","on": "mauseover"}},
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": [
      {"if": "id","field": "D","type": "nominal"},
      {"value": "grey"}
    ],
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

本质上它与视频中的代码相同，唯一的区别是我使用了较小的数据集（我从 H. Wickham 获取）

我尝试使用 Vega-Lite 编辑器渲染绘图（https://vega.github.io/vega-editor/?mode=vega-lite&renderer=svg）。生成的散点图是正确的，圆圈是灰色的（它们应该是），但它不显示任何动画并且图例被破坏。

我的问题是代码是否有问题，我忽略了什么。如果代码正确，但问题是我使用 Vega-Lite 1.0 而不是 Vega-Lite 2.0 有没有办法在 Vega 中使用 Vega-Lite 2.0（充分了解使用 alfa 版本代码的风险） -精简版编辑器？

Answer 1

现在已经是 2021 年了，还可以看看 Gemini，它的目的是将数据可视化的语法扩展到 single-view Vega/Vega-Lite 图表

的一些简单动画

Answer 2

您可以尝试 Vega 3 和 Vega-Lite 2，并在 https://vega.github.io/editor 进行选择。我们将不断更新已部署的版本。

Answer 3

Vega-lite 目前不支持选择，但在即将发布的 2.0 版本中将会支持。该视频是互动功能的预览，将于今年晚些时候推出。

Answer 4

为了完整起见，以下是当前版本的 vega-lite (5.18) 的外观：

{
  "data": {
    "values": [
      {"A": 2,"B": 3,"C": 4,"D": "a"},
      {"A": 1,"B": 2,"C": 1,"D": "a"},
      {"A": 4,"B": 5,"C": 15,"D": "b"},
      {"A": 9,"B": 10,"C": 80,"D": "b"}
    ]
  },
  "mark": "circle",
  "params": [{"name": "id", "select": {"type": "point","on": "pointerover"}}],
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": {"value": "gray", "condition": {"param": "id"}},
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

我不太确定你的代码，但我注意到的一件事是

mauseover

- 我认为这应该是

mouseover

，而当前版本的 vega-lite 使用

pointerover

。