penguins = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex"
}),
Plot.tip(penguins, Plot.pointer({
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex",
filter: (d) => d.sex,
title: (d) => ` sex: ${d.sex} \n year: ${d.year}`
}))
]
})
Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex"
}),
Plot.tip(penguins, Plot.pointer({
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex"
}))
]
})
Plot.plot({
grid: true,
color: { label: "My custom label" },
marks: [
Plot.dot(penguins, {
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex"
}),
Plot.tip(penguins, Plot.pointer({
x: "bill_length_mm",
y: "flipper_length_mm",
stroke: "sex",
filter: (d) => d.sex,
channels: {year: {
value: {
transform: (data) => data.map((d) => d.year),
label: "My custom year label"
}
}}
}))
]
})
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.
