How to zoom only on a specific axis when mouse over it? - vega-lite

Question

Starting from this concrete example where 2 plots are linked on their horizontal axis and free on their vertical axis, is there a way to zoom only on a specific axis when the mouse is over it ?
The zoom actually set is common to both axis.

Answer 1

If you want scrolling to be independent in each panel, you need to do two things:
set resolve.scale.x and resolve.scale.y to "independent", so the scales will not be linked.
use a different name for the bound selection in each panel, so the selectors will not be linked.
For example (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/stocks.csv"},
"vconcat": [
{
"transform": [{"filter": "datum.symbol==='IBM'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {"scroll_1": {"type": "interval", "bind": "scales"}}
},
{
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {"scroll_2": {"type": "interval", "bind": "scales"}}
}
],
"resolve": {"scale": {"x": "independent", "y": "independent"}}
}