Блог

Я создал график с использованием 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}
      }
    }
  }
}
 

Вот приведенный выше код в редакторе Vega.

Теперь, что я хотел бы сделать, так это создать другую визуализацию, параллельную этой, но с другой функцией, но это также будет отличаться в зависимости от того же связующего.

Возможно ли это? Обратите внимание, что в моем коде каждый график использует разные наборы данных, но использует общую переменную связующего.

Да, например, вы можете сделать это с помощью "concat" . Вот пример, основанный на вашей диаграмме (открыть в редакторе):

 {
  "$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"}}
}