Public
Edited
Mar 20
7 stars
Plot.barY([1, 2, 3, 2, 4, 1, 7, 3, 1, 2], {href, fill: "steelblue"}).plot({height: 200})
mutable value = null
Plot.barX(
d3.group(penguins, (d) => d.species),
{ x: (d) => d[1].length, y: "0", fill: "0", href }
).plot({ marginLeft: 80, y: { label: "species" } })
// When clicking on an element in the chart, dispatch a custom event on the window.
// The name ("clicked") is arbitrary. Information payload in the detail property.
href = (value, index) =>
`javascript:dispatchEvent(
new CustomEvent("clicked", {
detail: ${JSON.stringify({ value, index })}
})
);`
// Add the matching event listener on the window
{
function callback(event) {
// do what you want with the value; here we update a Mutable to allow us to inspect the data
mutable value = event.detail;
}
addEventListener("clicked", callback);
invalidation.then(() => removeEventListener("clicked", callback));
return html`<small><em>ready…`;
}
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.
