Plot.plot({
marks: [
Plot.frame(),
Plot.dot(olympians, {x: "height", y: "weight"})
]
})
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(olympians, {x: "height", y: "weight", fy: "sex"})
]
})
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(olympians, {x: "height", y: "weight", fy: "nationality"})
]
})
htl.html`<div style="display: flex; flex-wrap: wrap; gap: 1em; max-height: 700px; overflow: scroll;">
${d3.groups(olympians, (d) => d.nationality)
.sort((a, b) => d3.descending(a[1].length, b[1].length))
.map(([caption, data]) =>
htl.html`<figure>
${Plot.plot({
width: 260,
height: 200,
marks: [Plot.frame(), Plot.dot(data, { x: "height", y: "weight" })]
})}
<figcaption style="text-align: center;">${caption}</figcaption>
</figure>`
)}
</div>`
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.
