viewof chart = {
const brush = vl.selectInterval("brush").encodings("y");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldQ("Horsepower"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(maxY);
return base.data(data).render();
}
update = {
// From https://codepen.io/keckelt/pen/bGNQPYq?editors=1111
// brush_y -> brush_tuple -> brush
// Updates on pixels
chart.signal("brush_y", [by0, maxY / 2]);
await chart.runAsync();
}
chart.getState(false, true).signals
viewof chart2 = {
const brush = vl.selectInterval("brush").encodings(["y", "x"]);
const base = vl
.markPoint()
.select(brush)
.encode(
vl.x().fieldQ("Displacement"),
vl.y().fieldQ("Horsepower"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(maxY);
return base.data(data).render();
}
update2 = {
chart2.signal("brush_x", [0, by0]);
chart2.signal("brush_y", [0, by0]);
await chart2.runAsync();
}
viewof country = Scrubber(d3.group(data, (d) => d.Origin).keys(), {
delay: 1000
})
viewof chart3 = {
const brush = vl.selectPoint("brush").fields("Origin");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldN("Origin"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(maxY);
return base.data(data).render();
}
update3 = {
// To reverse engineer the format I used JSON.stringify(chart3.getState().signals.brush_tuple)
chart3.signal("brush_tuple", {
unit: "",
fields: [{ type: "E", field: "Origin" }],
values: [country]
});
await chart3.runAsync();
}
data = 'https://vega.github.io/vega-datasets/data/cars.json'
import { vl } from "@vega/vega-lite-api-v5"
import { Scrubber } from "@mbostock/scrubber"
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.
