如何在Vega-Lite中编码基于表的数据？

Question

首先，很难描述我所说的“基于表的数据”的确切含义，因为从某种意义上来说，vega的所有输入数据都是“ table-ish”的，但此示例应明确说明：

用于多折线图的Vega-Lite examples的大多数（如果不是全部）都使用类似的数据，

"data": {
  "values": [
    {"id": 0, "symbol": "A", "value": 4},
    {"id": 1, "symbol": "A", "value": 2},
    {"id": 0, "symbol": "B", "value": 3},
    {"id": 1, "symbol": "B", "value": 8}
  ]
}

使用这样的编码很容易为A和B的行着色，

"mark": "line",
"encoding": {
  "x": {"field": "id", "type": "quantitative"},
  "y": {"field": "value", "type": "quantitative"},
  "color": {"field": "symbol", "type": "nominal"}
}

但是如果我想使用基于表格的数据形式产生相同的结果怎么办

"data": {
  "values": [
    {"id": 0, "A": 4, "B": 3},
    {"id": 1, "A": 2, "B": 8}
  ]
}

1。如何将基于表格的数据编码为一个彩色的多折线图？

一种基本的编码方式是为每个字段创建折线图，然后像this一样将它们分层放置，

"encoding": {
      "x": {"field": "id", "type": "quantitative"}
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "A", "type": "quantitative"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "B", "type": "quantitative"}
      }
    }
  ]

但是，与此相关的是，我不知道如何对线条进行不同的着色或如何创建图例。

2。这种类型的输入数据是否符合vega / vega-lite的设计方式？

Answer 1

vega-lite处理的数据通常称为“长格式”或“面向列”数据。您要询问的数据类型通常称为“宽格式”或“面向行”数据。在Altair的文档中对此进行了简要讨论，Altair是vega-lite的Python包装器：https://altair-viz.github.io/user_guide/data.html#long-form-vs-wide-form-data

在当前版本的Vega-Lite（v2.X）中，您唯一的选择是使用外部工具将数据源修改为面向列。这将在Vega-Lite v3.0版本中发生变化，该版本增加了Fold transform，该功能旨在在图表规范中将面向行的数据转换为面向列的数据。

因此，在Vega-Lite 3中，您可以像这样（vega editor link）使用折叠变换：

{
  "data": {"values": [{"id": 0, "A": 4, "B": 3}, {"id": 1, "A": 2, "B": 8}]},
  "transform": [{"fold": ["A", "B"]}],
  "mark": "line",
  "encoding": {
    "x": {"field": "id", "type": "quantitative"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  }
}

Answer 2

另一种解决方案（有点乏味）是使用图层并为n列创建n层

Xyz

对图层重复（https://github.com/vega/vega-lite/issues/1274）的未来支持可能使之成为更合理的解决方案。