{
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('data/cars.json')
.params(panzoom, brush)
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ('Miles_per_Gallon').axis({minExtent: 25}),
vl.color().value('grey').if(brush, vl.color().fieldO('Cylinders')),
vl.opacity().if(brush, vl.value(0.8)).value(0.1)
)
.width(200)
.height(200)
.repeat({column: ['Acceleration', 'Horsepower', 'Displacement']})
.render();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
