使用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

您可以通过将分层与fold变换结合使用来实现。这是修改示例（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"}}
}