Published
Edited
Feb 7, 2021
import { vl } from "@vega/vega-lite-api"
import { aq, op } from "@uwdata/arquero"
cars = aq.fromCSV( await FileAttachment("cars.csv").text() )
{
const selection = vl.selectSingle();
return vl.markCircle()
.data(cars)
.select(selection)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles\_per\_Gallon'),
vl.color().if(selection, vl.fieldO('Cylinders')).value('grey')
)
.height(180)
.render();
}
function plot(selection) {
return vl.markCircle()
.data(cars)
.select(selection)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles\_per\_Gallon'),
vl.color().if(selection, vl.fieldO('Cylinders')).value('grey')
)
.width(240)
.height(180);
}
vl.hconcat(
plot(vl.selectSingle()).title('Single (Click)'),
plot(vl.selectMulti()).title('Multi (Shift-Click)'),
plot(vl.selectInterval()).title('Interval (Drag)'),
plot(vl.selectMulti().on("mouseover").nearest(true)).title('Mouseover Painting')
).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.
