The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Feb 24, 2022
Importers
Plot.plot({
color: { scheme: "cividis", type: "log", reverse: true },
width: 820,
height: 320,
x: { inset: 20, ticks: 5 },
y: { inset: 10 },
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.hexgrid({ radius: 12 }),
Plot.dot(
penguins,
Plot.hexbin(
{ fill: "count" },
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
radius: 12,
strokeWidth: 0.5
}
)
),
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "white",
stroke: "black",
strokeWidth: 0.5,
r: 1.5
})
]
})
Plot.plot({
color: { scheme: "viridis", legend: true, label: "body mass (g)" },
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ r: "count", fill: "median" }, // reducers!
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "body_mass_g",
radius: 20,
symbol: "circle" // any symbol is possible
}
)
)
]
})
Plot.plot({
width: 820,
height: 320,
color: {
scheme: "reds",
nice: true,
tickFormat: (d) => 100 * d,
label: "Proportion of each facet (%)",
legend: true
},
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.dot(
penguins,
Plot.hexbin(
{ title: "proportion-facet", r: "count", fill: "proportion-facet" }, // more difficult reducers
{ x: "culmen_depth_mm", y: "culmen_length_mm", strokeWidth: 1 }
)
)
]
})
Plot.plot({
width: 820,
height: 320,
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
inset: 14,
marks: [
Plot.frame(),
Plot.dot(
penguins,
Plot.hexbin(
{ fillOpacity: "count" },
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "brown",
stroke: "black",
strokeWidth: 0.5
}
)
),
Plot.text(
penguins,
Plot.hexbin(
{ text: "count" },
{ x: "culmen_depth_mm", y: "culmen_length_mm" }
)
)
]
})
Plot.plot({
symbol: { legend: true },
marks: [
Plot.dot(
penguins,
Plot.hexbin(
{ fill: "mode", symbol: "mode", r: "count" },
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "island",
symbol: "island",
stroke: "white"
}
)
)
]
})
Plot = FileAttachment("plot@2.umd.js").url().then(require)
penguins = FileAttachment("penguins.csv").csv({typed: true})
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.
