Plot.plot({
marks: [
Plot.image([logo], {
src: logo,
frameAnchor: "top-right",
href: d => "https://github.com/zachbogart/huh-data",
target: "_blank",
width: 40
}),
Plot.density(data, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species",
strokeWidth: 0.25
}),
Plot.dot(data, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "species",
title: (d) =>
`${d.species}\n ${d.culmen_depth_mm} mm x ${d.culmen_length_mm} mm`
})
],
inset: 5,
nice: true,
color: {
legend: true
},
x: {
label: "Culmen Length (mm) →"
},
y: {
label: "↑ Culmen Depth (mm)"
}
})
tooltipPlugin(Plot)
data = penguins
logo = FileAttachment("huh-avatar-1k.png").url()
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.
