plot = Plot.dot(penguins, {x: "body_mass_g", y: "culmen_length_mm", stroke: "species"}).plot()
color = plot.scale("color")
viewof filtered = Inputs.checkbox(
new Map(color.domain.map((d, i) => [
htl.html`<div style=${{...styles, background: color.range[i]}}></div> ${d}`, d
])),
{value: color.domain, format: d => d[0]}
)
Plot.dot(
penguins.filter(({ species }) => filtered.includes(species)),
{ x: "body_mass_g", y: "culmen_length_mm", stroke: "species" }
).plot({color})
domain = ["Adelie", "Chinstrap", "Gentoo"]
range = ["#4e79a7", "#f28e2c", "#e15759"]
viewof filtered1 = Inputs.checkbox(
new Map(domain.map((d, i) => [
htl.html`<div style=${{...styles, background: range[i]}}></div> ${d}`, d
])),
{value: domain, format: d => d[0]}
)
Plot.dot(
penguins.filter(({ species }) => filtered1.includes(species)),
{ x: "body_mass_g", y: "culmen_length_mm", stroke: "species" }
).plot({color: {domain, range}})
viewof filtered2 = filterLegend(domain, range)
Plot.dot(
penguins.filter(({ species }) => filtered2.includes(species)),
{ x: "body_mass_g", y: "culmen_length_mm", stroke: "species" }
).plot({color: {domain, range}})
filterLegend = (domain, range) => {
const value = new Map(domain.map(d => [d, true]));
const _set = () => set(node, [...value].filter(d => d[1]).map(d => d[0]));
const oninput = e => (value.set(e.target.id, e.target.checked), _set());
const node = htl.html`<div style="font-family: var(--sans-serif); font-size: 13px; display: flex; gap: 1em;">
${domain.map((d, i) => htl.html`<div style="display: flex;">
<input type="checkbox" id="${d}" name="${d}" checked style="accent-color: ${range[i]}" oninput=${oninput}>
<label for="${d}">${d}</label>
</div>`)}
</div>`;
_set();
return node;
}
styles = ({width: "1em", height: "1em", display: "inline-block", verticalAlign: "middle"})
import {set} from "@observablehq/synchronized-inputs"
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.
