The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Feb 23, 2022
1 star
Plot.plot({
color: { scheme: "cividis", type: "log", reverse: true, legend: true, label: "Frequency" },
width: 820,
height: 320,
x: { inset: 20, ticks: 5 },
y: { inset: 10 },
grid: true,
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.hexbin(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
radius: 12,
fill: "brown",
title: (bin) => `${bin.length} penguins.`
}),
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "white",
stroke: "black",
strokeWidth: 0.5,
r: 1.5
})
]
})
Plot.plot({
width: 820,
height: 320,
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
inset: 14,
marks: [
Plot.frame(),
Plot.dot(
penguins,
Plot.hexbinOpacity({
x: "culmen_depth_mm",
y: "culmen_length_mm",
fill: "brown"
})
),
Plot.text(
penguins,
Plot.hexbinText({ x: "culmen_depth_mm", y: "culmen_length_mm" })
)
],
opacity: {legend: true, color: "brown", ticks: 8}
})
Plot.plot({
marks: [
Plot.dot(
penguins,
Plot.hexbinR({
x: "culmen_depth_mm",
y: "culmen_length_mm",
radius: 20,
fill: "brown"
})
)
]
})
Plot.plot({
width: 820,
height: 320,
facet: {
data: penguins,
x: "sex",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.dot(
penguins,
Plot.hexbinR({ x: "culmen_depth_mm", y: "culmen_length_mm", symbol: "star" })
)
]
})
penguins = FileAttachment("penguins.csv").csv({ typed: true })
Plot = FileAttachment("plot@2.umd.js").url().then(require)
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.
