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

Question

I've created a plot using Vega-Lite that allows me to use a binder to alter the parameters of a functions that I'm visualizing. It's similar to this sample code:

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

Now, what I'd like to do is to create another visualization parallel to this one, but with another function, but that would also vary with the same binder.

Is this possible? Note that in my code, each plot uses a different dataset, but share the variable of the binder in common.

Answer 1

Yes, for example you can do this using a "concat" . Here is an example based on your chart ( 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"}}
}