Unlisted
Edited
Aug 17, 2023
2 stars
Insert cell
Insert cell
{
const { defs, range } = cheyssonDefs(pattern);
return Plot.plot({
color: { range },
marks: [
() => defs,
Plot.barY(
penguins,
Plot.stackY(
Plot.groupX(
{ y: "count" },
{
x: "island",
fill: (d) => `${d.island}-${d.sex}`,
fillOpacity: 0.7,
stroke: "#333",
strokeWidth: 2
}
)
)
)
]
});
}
Insert cell
cheyssonDefs = (pattern) => {
const defs = svg`<defs>${pattern}`;
const range = d3
.select(defs)
.selectAll("pattern[id]")
.nodes()
.map((s) => d3.select(s).attr("id"))
.map((id) => `url(#${id})`);
return { defs, range };
}
Insert cell
Insert cell

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.
Learn more