Vega-Lite

Question

我使用 Vega-Lite 创建了一个绘图，它允许我使用活页夹来更改我正在可视化的函数的参数。它类似于此示例代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Plots two functions using a generated sequence.",
  "width": 300,
  "height": 150,
  "data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
  "transform": [
    {"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
    {"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
    {"fold": ["sin(x)", "cos(x)"]}
  ],
  "mark": "line",
  "encoding": {
    "x": {"type": "quantitative", "field": "x"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal", "title": null}
  },
  "selection": {
    "amp": {
      "type": "single",
      "fields": ["sin", "cos"],
      "init": {"sin": 1, "cos": 1},
      "bind": {
        "sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
        "cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
      }
    }
  }
}

Here is the code above in the Vega editor.

现在，我想做的是创建另一个与此并行的可视化，但具有另一个功能，但它也会因相同的活页夹而异。

这可能吗？请注意，在我的代码中，每个图使用不同的数据集，但共享活页夹的变量。

Answer 1

是的，例如，您可以使用 "concat" 来做到这一点。这是一个基于您的图表 (open in editor) 的示例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Plots two functions using a generated sequence.",
  "data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
  "concat": [
    {
      "width": 300,
      "height": 150,
      "transform": [
        {"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
        {"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
        {"fold": ["sin(x)", "cos(x)"]}
      ],
      "mark": "line",
      "encoding": {
        "x": {"type": "quantitative", "field": "x"},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "key", "type": "nominal", "title": null}
      },
      "selection": {
        "amp": {
          "type": "single",
          "fields": ["sin", "cos"],
          "init": {"sin": 1, "cos": 1},
          "bind": {
            "sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
            "cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
          }
        }
      }
    },
    {
      "width": 300,
      "height": 150,
      "transform": [
        {
          "calculate": "amp.cos * cos(datum.x) - amp.sin * sin(datum.x)",
          "as": "cos(x) - sin(x)"
        }
      ],
      "mark": "line",
      "encoding": {
        "x": {"type": "quantitative", "field": "x"},
        "y": {"field": "cos(x) - sin(x)", "type": "quantitative"}
      }
    }
  ],
  "resolve": {"scale": {"y": "shared", "color": "independent"}}
}

Vega-Lite - 是否可以为两个不同的地块使用相同的选择器？

Vega-Lite - Is it possible to have the same selector for two different plots?

plot

interactive