CODEWITHSUNDEEP
vegavega-lite
SBhojani
SBhojani

Reputation: 529

Vega Lite independent zooming between rows and columns

I have this chart and as it currently stands, when you zoom in to one of the charts, it zooms in all the other ones too. Now, I don't mind this for the x axis where all the data has similar/related values. However for the y axis where the scales vary even within the same "series", zooming into one of the "variables" essentially hides the other "variables" of the same "series". So, I am looking for one of the following in order of my preference:

  1. A way to have the y-axis zoom be independent between all the charts using Vega Lite.
  2. A way to have the x- and y-axes zoom be independent between all the charts using Vega Lite.
  3. A way to have #1 above but using Vega.
  4. A way to have #2 above but using Vega.

Upvotes: 0

Views: 700

Answers (1)

jakevdp
jakevdp

Reputation: 86463

For concatenated charts, a way to do this is by applying custom bound selections to each chart, sharing selection names between chart for which you want shared zoom behavior. A simple example (vega editor):

{
  "data": {"url": "https://vega.github.io/vega-datasets/data/cars.json"},
  "hconcat": [
    {
      "mark": "point",
      "encoding": {
        "x": {"type": "quantitative", "field": "Horsepower"},
        "y": {"type": "quantitative", "field": "Acceleration"}
      },
      "selection": {
        "zoom_x": {"type": "interval", "bind": "scales", "encodings": ["x"]},
        "zoom_y1": {"type": "interval", "bind": "scales", "encodings": ["y"]}
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {"type": "quantitative", "field": "Horsepower"},
        "y": {"type": "quantitative", "field": "Weight_in_lbs"}
      },
      "selection": {
        "zoom_x": {"type": "interval", "bind": "scales", "encodings": ["x"]},
        "zoom_y1": {"type": "interval", "bind": "scales", "encodings": ["y"]}
      }
    }
  ]
}

Notice that the zoom_x selection is shared between the two charts, while each chart has its own version of zoom_y. The result is that x-axis zoom is shared between charts, and y-axis zoom is independent.

An analogous strategy works for your situation #2 (add a differently-named bound selection for each subchart).

For reproducing this in Vega, you might start by clicking the "Compiled Vega" tab within the Vega editor for the Vega-Lite charts: it will show you how these approaches are implemented in Vega.

Upvotes: 0

Related Questions