Knowing how we can select/brush part of a dataset, and that we can bind these selections to a scale, we can make focus/context plots.

To do this, we define a selection in the source plot (i.e. in the one in which we will do the selecting). This selection is then used to change the domain of the scale in the target plot.

The example below shows this on the S&P500 data. Try selecting a range in the bottom plot.

{ "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/sp500.csv"
  },
  "vconcat": [{
    "width": 480,
    "mark": "area",
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"selection": "my_brush"}},
        "axis": {"title": ""}
      },
      "y": {"field": "price", "type": "quantitative"}
    }
  }, {
    "width": 480,
    "height": 60,
    "mark": "area",
    "selection": {
      "my_brush": {"type": "interval", "encodings": ["x"]}
    },
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative"
      }
    }
  }]
}

The code "encodings": ["x"] in the bottom plot makes sure that you can only select along the x-axis as it makes no sense to select on y-values.

Exercise - See what happens if you remove the "encodings": ["x"].