Search code examples
vega-lite

Is there a way to zoom and then do a selection interval without further zooming with vega-lite

Have a scatter plot, I know you use bind on the scales for panning and using the wheel to zoom which is great. However once zoomed need a way to then do a selection interval without further zooming effects. Need a way to pause or escape via a shift key for example.

Solution

  • One way to achieve this is to use an event modifier in the selection definition. For example, here is a chart where the zoom action is triggered when the shift key is not held, and the selection action is triggered when the shift key is held (open in editor):

    {
  "data": {"url": "https://vega.github.io/vega-datasets/data/cars.json"},
  "mark": "point",
  "encoding": {
    "color": {"type": "nominal", "field": "Origin"},
    "x": {"type": "quantitative", "field": "Horsepower"},
    "y": {"type": "quantitative", "field": "Miles_per_Gallon"}
  },
  "selection": {
    "zoom": {
      "type": "interval",
      "bind": "scales",
      "on": "[mousedown[!event.shiftKey], mouseup] > mousemove",
      "translate": "[mousedown[!event.shiftKey], mouseup] > mousemove!"
    },
    "select": {
      "type": "interval",
      "on": "[mousedown[event.shiftKey], mouseup] > mousemove",
      "translate": "[mousedown[event.shiftKey], mouseup] > mousemove!"
    }
  }
}

    The syntax here follows vega eventStream selectors.