hn_cherrios = FileAttachment("data.txt").json()
import {vl} from '@vega/vega-lite-api'
{
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();
}
{
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.y().fieldQ(vl.repeat('column')),
vl.x().fieldQ('UNITS').axis({minExtent: 25}),
vl.color().value('grey').if(brush, vl.color().fieldN('FEATURE'))
)
.width(400)
.height(400)
.repeat({column: ['PRICE', 'BASE_PRICE']})
.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.
