{
const panzoom = vl.selectInterval().bind('scales')
.translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!')
.zoom('wheel!');
const brush = vl.selectInterval().resolve('union')
.on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')
.translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')
.zoom(null);
return vl.markCircle()
.data(hn_cherrios)
.select(panzoom, brush)
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ('SPEND').axis({minExtent: 25}),
vl.color().value('grey').if(brush, vl.color().fieldQ('PRICE'))
)
.width(400)
.height(400)
.repeat({column: ['UNITS', 'VISITS', 'HHS']})
.render();
}