Web developer and autodidact with an interest in creative coding.
// The current selection.
Inputs.table(allowMultiple ? selection : [selection], {height: '8em'})
viewof selection = {
// The field that should become the selection value.
const selectionField = "properties";
//const selectionField = "properties.iso_a2";
const spec = vl.markGeoshape({ stroke: "#0005" })
.data(countries.features)
.params([
{ name: "selected", select: { type: "point", fields: [selectionField], toggle: allowMultiple } },
{ name: "highlighted", select: { type: "point", on: "mouseover", toggle: false } },
])
.encode(vl.tooltip({ field: "properties.name" }))
.encode(vl.color({
// The first condition that is met applies.
condition: [
{ param: "selected", empty: false, value: "salmon" },
{ param: "highlighted", empty: false, value: "peachpuff" },
],
// Default color.
value: "whitesmoke",
}))
.width(640)
.height(320);
// .render() returns a Promise that resolves to the chart element.
const element = await spec.render();
// The Vega view instance.
const view = element.value;
// Wrap the Vega element so that we can set our own .value property.
const input = html`<div>${element}`;
// Listen to selection changes.
view.addSignalListener("selected", (signal, selection) => {
// Vega rewrites "." in the field path to "\."
const key = selectionField.replace(".", "\\.");
const items = selection[key];
// Update the viewof value and notify the Observable Runtime.
input.value = allowMultiple
? ( items || [] )
: ( items ? items[0] : undefined );
input.dispatchEvent(new Event("input"));
});
return input;
}
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.
