使用 vega-lite 绘制具有两个不同数量级的数据的两个“列”

Question

（这是对this question的跟进）

假设我的数据如下所示：

[
    {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
    {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
    {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
    {"date": "2019-01-04", "foo": 20000,  "bar": 60, "goo": 20}
]

而我的情节是：

{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"width": 1200,
"height": 450,
"data": { "url": "data.json" },
"mark": {
    "type": "line",
    "point": true
},
"transform": [
    { "fold": ["foo", "bar", "goo"] }
],
"encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" },
    "color": { "field": "key", "type": "nominal" },
    "scale": {"zero": false}
},
"resolve": { "scale": { "y": "independent" } }
}

如您所见，由于foo 和其他两列的数量级不同，该图没有帮助。我怎样才能有一个辅助 y 轴和（在图例中提到它）？

Answer 1

您可以通过将分层与折叠变换相结合来做到这一点。以下是您可以如何修改示例 (vega editor link)：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "width": 1200,
  "height": 450,
  "data": {
    "values": [
      {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
      {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
      {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
      {"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
    ]
  },
  "transform": [{"fold": ["foo", "bar", "goo"]}],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "line", "point": true},
      "transform": [{"filter": "datum.key == 'foo'"}]
    },
    {
      "mark": {"type": "line", "point": true},
      "transform": [{"filter": "datum.key != 'foo'"}]
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

然后您可以通过在每一层中指定 y 编码和标题来继续修改轴标题。这是一个例子（vega editor link）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "width": 1200,
  "height": 450,
  "data": {
    "values": [
      {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
      {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
      {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
      {"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
    ]
  },
  "transform": [{"fold": ["foo", "bar", "goo"]}],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "color": {"field": "key", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {"field": "value", "type": "quantitative", "title": "Foo Value"}
      },
      "transform": [{"filter": "datum.key == 'foo'"}]
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "title": "Bar/Goo Value"
        }
      },
      "transform": [{"filter": "datum.key != 'foo'"}]
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}