Search code examples
javascriptvega-litevega

vega-lite: Adjustable selection?

Is there a way to get a adjustable selection in vega-lite?

I found this example but I think this is made with plain vega.

enter image description here

Solution

  • Vega-Lite does not provide any way to create an interval selection with a size that is adjustable by clicking and dragging on the edges.

    Available configuration properties are listed in the interval selection docs. The only configurable interactions are translate, which enables moving the selection by clicking and dragging, and zoom, which enables changing the selection's size by zooming on its interior; both of these are True by default.

    Here is a simple specification that lets you see the effect of these configurations (open in editor):

    {
  "data": {"url": "data/sp500.csv"},
  "mark": "area",
  "selection": {
    "brush": {
      "type": "interval",
      "encodings": ["x"],
      "zoom": true,
      "translate": true
    }
  },
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  },
  "width": 400
}