The end-to-end solution for building and hosting better data apps, dashboards, and reports.
barley = FileAttachment("barley.csv").csv({typed: true})
Plot.plot({
height: 800,
marginLeft: 110,
grid: true,
x: {nice: true},
y: {inset: 5},
color: {type: "categorical"},
facet: {data: barley, y: "site", marginRight: 90},
marks: [
Plot.frame(),
Plot.dot(barley, {
x: "yield",
y: "variety",
stroke: "year",
sort: {
y: {value: "x", reduce: "median", reverse: true},
fy: {value: "x", reduce: "median", reverse: true}
}
})
]
})
anscombe = FileAttachment("anscombe.csv").csv({typed: true})
Plot.plot({
grid: true,
inset: 10,
width: 928,
height: 240,
facet: {
data: anscombe,
x: "series"
},
marks: [
Plot.frame(),
Plot.line(anscombe, {x: "x", y: "y", stroke: "#ccc"}),
Plot.dot(anscombe, {x: "x", y: "y", stroke: "currentColor", fill: "white"})
]
})
Plot.plot({
marginLeft: 75,
marginRight: 70,
x: {insetRight: 10},
y: {grid: true},
facet: {marginRight: 70},
marks: [
Plot.ruleX([0]),
Plot.barX(penguins, Plot.groupY({x: "count"}, {fy: "island", y: "species", fill: "sex"})),
Plot.text([`Did you know? The Adelie species is the only one on Torgersen Island.`], {
fy: ["Torgersen"],
frameAnchor: "right",
lineWidth: 16,
dx: -4
})
]
})
Plot.plot({
height: 400,
marginTop: 0,
marginLeft: 50,
x: {inset: 10, grid: true, label: "weight (kg) →"},
y: {axis: null, inset: 2},
color: {legend: true},
fy: {
transform: (d) => d ? Math.floor(d * 10) / 10 : "",
tickFormat: (d) => d ? d.toFixed(1) : "N/A",
label: "height (m) →",
reverse: true
},
facet: {
data: olympians,
y: "height",
marginLeft: 50
},
marks: [
Plot.frame({stroke: "#aaa", strokeWidth: 0.5}),
Plot.boxX(olympians, {x: "weight", y: "sex", stroke: "sex", r: 1})
]
})
penguins = FileAttachment("penguins.csv").csv({typed: true})
Plot.plot({
height: 600,
grid: true,
facet: {
data: penguins,
x: "sex",
y: "species",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
r: 1.5,
fill: "#ccc",
facet: "exclude"
}),
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm"
})
]
})
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.
