Unlisted
Edited
May 11, 2023
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: 1
}),
Plot.dot(penguins, Plot.pointer({
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "species"
})),
Plot.tip(
penguins,
Plot.pointer({
x: "culmen_depth_mm",
y: "culmen_length_mm",
dy: -5
})
)
]
})
Insert cell
Plot.plot({
color: { scheme: "blues" },
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ fill: "count" },
{ x: "culmen_depth_mm", y: "culmen_length_mm" }
)
),
Plot.tip(
penguins,
Plot.pointer(
Plot.hexbin(
{
"": (data) => Plot.valueof(data, "species").join(", "),
"🏝️": (data) => Plot.valueof(data, "island").map(islands).join(", ")
},
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
// lineWidth: 3, // 👍
lineHeight: 1.3, // 👍
// fontWeight: "bold", // 👍
// fontStyle: "italic", // 👍
// fontVariant: "small-caps", // 👍
textOverflow: "ellipsis-start" // 🌶 not supported
}
)
)
)
]
})
Insert cell
islands = d3.scaleOrdinal(Plot.valueof(penguins, "island"), [
"🤕",
"🤯",
"😤",
"😵‍💫"
])
Insert cell
Plot = (replay,
require("https://aerial-rabbit.surge.sh/plot.umd.js?" + Math.random()))
Insert cell
Plot.plot({
color: { scheme: "blues" },
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ fill: "count" },
{ x: "culmen_depth_mm", y: "culmen_length_mm", tip: true }
)
)
]
})
Insert cell
Plot.plot({
marks: [
Plot.tickX(penguins, { x: "culmen_depth_mm" }),
Plot.tip(penguins, Plot.pointerX({ x: "culmen_depth_mm" }))
]
})
Insert cell
Plot.plot({
height: 130,
marks: [Plot.dotX(penguins, Plot.dodgeY({ x: "culmen_depth_mm", tip: "xy" }))]
})
Insert cell
Plot.plot({
marks: [
Plot.tickX(penguins, { x: "culmen_depth_mm" }),
Plot.tip(
penguins,
Plot.pointerX({ frameAnchor: "top-left", px: "culmen_depth_mm" })
)
]
})
Insert cell
Plot.plot({
x: { axis: "top" },
marks: [
Plot.dot(penguins, { x: "culmen_depth_mm", y: "body_mass_g" }),
Plot.crosshair(penguins, { x: "culmen_depth_mm", y: "body_mass_g" })
]
})
Insert cell
Plot.plot({
marginTop: 40,
style: "overflow: visible",
marks: [
Plot.barX(penguins, Plot.groupZ({ x: "count" }, { fill: "island" })),
Plot.tip(
penguins,
Plot.pointerX(
Plot.stackX(
Plot.groupZ(
{ x: "count" },
{
z: "island",
anchor: "bottom-left",
channels: {
island: ([d]) => d.island,
px: { value: [300, 200, 120] } // ignored after stacking
}
}
)
)
)
)
]
})
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