Area Chart with Rectangular Brush

In this example, we apply an interval selection to select subset of data in an area chart. The selected data is highlighted in gold by the second layer of an area mark that filters its data by the brush selection.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {"url": "data/unemployment-across-industries.json"},
  "encoding": {
      "x": {"timeUnit": "yearmonth", "field": "date"},
      "y": {"aggregate": "sum", "field": "count"}
  },
  "layer": [{
    "params": [{
      "name": "brush",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "mark": "area"
  }, {
    "transform": [
      {"filter": {"param": "brush"}}
    ],
    "mark": {"type": "area", "color": "goldenrod"}
  }]
}