Skip to content
Vega-Lite templates

Interactive Brush Selection

Drag a rectangle to highlight points — linked-brushing primitive.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data":{"values":[
    {"x":1,"y":1,"c":"A"},{"x":2,"y":3,"c":"A"},{"x":3,"y":2,"c":"A"},
    {"x":4,"y":5,"c":"B"},{"x":5,"y":4,"c":"B"},{"x":6,"y":6,"c":"B"},
    {"x":7,"y":3,"c":"C"},{"x":8,"y":7,"c":"C"},{"x":9,"y":5,"c":"C"}
  ]},
  "params":[{"name":"brush","select":{"type":"interval","encodings":["x","y"]}}],
  "mark":{"type":"point","filled":true,"size":100},
  "encoding":{
    "x":{"field":"x","type":"quantitative"},
    "y":{"field":"y","type":"quantitative"},
    "color":{"condition":{"param":"brush","field":"c","type":"nominal"},"value":"#cbd5e1"}
  },
  "width":420,"height":280
}