This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Bar Chart with a Minimap

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "hconcat": [{
    "mark": "bar",
    "transform": [{
      "filter": {"selection": "brush"}
    }],
    "encoding": {
      "y": {
        "field": "Name",
        "type": "nominal",
        "axis": {"minExtent": 200, "title": null},
        "sort": "-x"
      },
      "x": {
        "aggregate": "count",
        "scale":{"domain":  [0, 6]},
        "axis": {"orient": "top"}
      }
    }
  }, {
    "height": 200,
    "width": 50,
    "selection": {
      "brush": {
        "type": "interval",
        "encodings": ["y"]
      }
    },
    "mark": "bar",
    "encoding": {
      "y": {
        "field": "Name",
        "type": "nominal",
        "sort": "-x",
        "axis": null
      },
      "x": {
        "aggregate": "count",
        "axis": null
      }
    }
  }]
}