Unlisted
Edited
Feb 15, 2023
Insert cell
Insert cell
Plot = FileAttachment("plot@1.umd.js").url().then(require) // a93208acd4e21142fce266b8197e4d0c37432cd3
Insert cell
Insert cell
a = Plot.plot({
grid: true,
symbol: {
legend: true
},
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ r: "count", fill: (d) => (d.length > 3 ? "green" : "yellow") },
{ symbol: "sex", x: "culmen_depth_mm", y: "culmen_length_mm" }
)
)
]
})
Insert cell
a.scale("color").domain // 🌶
Insert cell
a.scale("symbol")
Insert cell
a_stroke = Plot.plot({
grid: true,
symbol: {
legend: true
},
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ r: "count", stroke: (d) => (d.length > 3 ? "green" : "yellow") },
{ symbol: "sex", x: "culmen_depth_mm", y: "culmen_length_mm" }
)
)
]
})
Insert cell
a_stroke.scale("symbol")
Insert cell
Insert cell
b = Plot.plot({
grid: true,
symbol: {
legend: true
},
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ r: "count" },
{
symbol: (d) => (d.sex ? "wye" : "square"),
x: "culmen_depth_mm",
y: "culmen_length_mm"
}
)
)
]
})
Insert cell
b.scale("symbol").domain // 🌶
Insert cell
Insert cell
c = Plot.plot({
grid: true,
symbol: {
legend: true
},
marks: [
Plot.dot(penguins, {
symbol: (d) => (d.sex ? "wye" : "square"),
x: "culmen_depth_mm",
y: "culmen_length_mm"
})
]
})
Insert cell
c.scale("symbol") // 👍
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