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

Question

首先，很难描述我所说的 "table based data" 的确切含义，因为在某种程度上，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"}
}

但是如果我想用像这样的基于 table 的数据形式产生相同的结果怎么办，

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

1.如何将基于 table 的数据编码为一张彩色多折线图？

基本编码可以是为每个字段创建折线图并将它们层叠在一起，例如 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 使用的数据通常称为 "long-form" 或 "column-oriented" 数据。您询问的数据类型通常称为 "wide-form" 或 "row-oriented" 数据。这在 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 层

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {"url": "data/seattle-weather.csv", "format": {"type": "csv"}},
  "layer": [{
    "mark": {"type": "line", "color": "orange"},
    "encoding": {
      "x": {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
      "y": {"field": "temp_max", "type": "quantitative"}
    }
  }, {
    "mark": {"type": "line", "color": "red"},
    "encoding": {
      "x": {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
      "y": {"field": "temp_min", "type": "quantitative"}
    }
  }]
}

未来对图层重复的支持 (https://github.com/vega/vega-lite/issues/1274) 可能会使这个解决方案更合理。

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

How to encode table based data in Vega-Lite?

encoding

data-visualization

vega

vega-lite