如何在 vega-lite 中定义重复和图层 api

Question

我有一个看起来像这样的数据：

student_name,d,e
student1,0.1,0.7
student2,0.2,0.3
student3,0.3,0.4
student4,0.25,0.2
student5,0.4,0.15
student6,0.6,0.2
student7,0.15,0.5
student8,0.7,0.13
student9,0.56,0.22
student10,0.35,0.2

我想用vega-lite-api可视化这些数据，这样 X 轴就会有学生，并且d和e列各有两个折线图。 我试过这样的事情：

vl
  .markLine() 
  .encode(
    vl.x().fieldN('student_name').sort('y'), 
    vl.y().fieldQ('d'),
  );

这正确地显示了 y 轴上的d列值与 x 轴上的学生：

但是，我无法猜测我如何在 y 轴上也有列e值。 我想我需要重复和分层，像这样：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/movies.json"
  },
  "repeat": {
    "layer": ["US Gross", "Worldwide Gross"]
  },
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {
        "bin": true,
        "field": "IMDB Rating",
        "type": "quantitative"
      },
      "y": {
        "aggregate": "mean",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Mean of US and Worldwide Gross"
      },
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal"
      }
    }
  }
}

输出：

但我无法猜测如何将上述 vega-lite 语法中的repeat和layer翻译成 vega-lite-api 调用。

Answer 1

根据文档，您可以使用vl.repeat和vl.layer方法来构建repeat和layer对象。

然后，您可以使用vl.encode()返回的spec.repeat方法和y.field方法将它们插入到您的规范中。

使用您的示例，以下 JS 代码

vl
  .markLine()
  .encode(
    vl.x().fieldN('student_name').sort('y'), 
    vl.y().field(vl.repeat('layer')),
  ).repeat(
    vl.layer(["d", "e"])  
  )

将 output 这个 JSON:

{
   "$schema":"https://vega.github.io/schema/vega-lite/v4.json",
   "repeat":{
      "layer":[
         "d",
         "e"
      ]
   },
   "spec":{
      "mark":{
         "type":"line"
      },
      "encoding":{
         "x":{
            "field":"student_name",
            "type":"nominal",
            "sort":"y"
         },
         "y":{
            "field":{
               "repeat":"layer"
            }
         }
      }
   }
}

此笔记本将让您试验此代码的实时版本。