clicked = Generators.observe((notify) => {
const clicked = (event, {datum}) => notify(datum);
clickable.addEventListener("click", clicked);
return () => clickable.removeEventListener("click", clicked);
})
selected = Generators.observe((notify) => {
const selected = (selection, predicates) => {
const within = penguins.filter(d => {
for (const [key, [min, max]] of Object.entries(predicates))
if (isNaN(+d[key]) || d[key] < min || d[key] > max)
return false;
return true;
})
notify(within);
}
selectable.addSignalListener(signal, selected);
return () => selectable.removeEventListener(signal, selected);
})
signal = Object.keys(selectable.getState({ signals: (name) => name.match(/^sel\d+$/) }).signals)[0]
viewof selectableSingle = {
const brush = vl.selectSingle();
return vl.markCircle({ cursor: "pointer" })
.data(penguins)
.select(brush)
.encode(
vl.x().fieldQ("culmen_length_mm").scale({ zero: false }),
vl.y().fieldQ("culmen_depth_mm").scale({ zero: false }),
vl.color().value("lightgray").if(brush, vl.color().fieldN("species").scale({ scheme: "set2" }))
)
.width(240)
.height(240)
.render();
}
selectedSingle = Generators.observe((notify) => {
const signal = Object.keys(selectableSingle.getState({ signals: (name) => name.match(/^sel\d+$/) }).signals)[0]
const selected = (selection, predicates) => {
notify(predicates);
}
selectableSingle.addSignalListener(signal, selected);
return () => selectableSingle.removeEventListener(signal, selected);
})
import { vl } from '@vega/vega-lite-api'
import { penguins } from '@observablehq/layers-facets-concat'
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.
