Public
Edited
Mar 1
1 star
Plot.plot({
color: { legend: true, label: "Species" },
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
]
})
{
const p = Plot.plot({
width: 700,
marginRight: 100,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
]
});
const legend = p.legend("color");
return htl.html`
${p}
<div style="position: absolute; bottom: 40px; left: 460px;">
<span style="font-family:sans-serif; font-size:12px; font-weight: bold">Species</span>
${legend}
</div>`
}
{
const p = Plot.plot({
marginRight: 200,
width: 800,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
]
});
const legend = p.legend("color");
const d = d3.select(p).append("foreignObject")
.attr("width", 280)
.attr("height", 200)
.attr("x", 540)
.attr("y", 320)
.append("xhtml:div")
.html(`
<span style="font-family: sans-serif; font-size: 12px; font-weight: bold">
Species
</span>` + legend.outerHTML);
return p;
}
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.
