Published unlisted
Edited
Jul 9, 2021
Insert cell
Insert cell
Plot.plot({
facet: {
data,
x: "sex",
y: "island"
},

marks: [
Plot.frame(), // draws an outline around each facet

Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
fill: "#eee",
facet: "exclude"
}), // draws excluded penguins on each facet

Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
facet: true
}) // draws only the current facet’s subset
]
})
Insert cell
Insert cell
facet = ({
data: { length: 344 }, // just a length!
x: Plot.valueof(data, "island") // instantiated channel
})
Insert cell
Plot.plot({
facet,
marks: [
Plot.barY(
data,
Plot.groupX(
{ y: "mean" },
{
x: "sex",
y: "body_mass",
facet: true,
fill: "#eee"
}
)
),
Plot.tickY(
data,
Plot.groupX(
{ y: "min" },
{
x: "sex",
y: "body_mass",
facet: true
}
)
),
Plot.tickY(
data,
Plot.groupX(
{ y: "median" },
{
x: "sex",
y: "body_mass",
facet: true
}
)
),
Plot.tickY(
data,
Plot.groupX(
{ y: "max" },
{
x: "sex",
y: "body_mass",
facet: true
}
)
)
],
marginLeft: 60,
height: 150
})
Insert cell
Plot = FileAttachment("plot@4.umd.js").url().then(require)
Insert cell
import { data } from "@observablehq/plot-exploration-penguins"
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