The end-to-end solution for building and hosting better data apps, dashboards, and reports.
salamanders
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(salamanders, {
x: "totalLength",
y: d => d.weight, // You can use functions instead of "variableName"!
fill: "creekSection",
opacity: 0.5,
r: "totalLength",
// sort: {channel: "fill"},
tip: true
})
]
})
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(salamanders, {
x: "totalLength",
y: d => d.weight,
fill: "creekSection", // Later, switch to totalLength to see continuous custom scheme!
opacity: 0.5,
r: "totalLength",
sort: {channel: "fill"},
tip: true
})
],
y: {type: "pow", exponent: 0.5},
x: {domain: [0, 400], ticks: 5, reverse: true},
color: {range: ["cyan", "purple"], legend: true},
grid: true
})
Plot.plot({
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ y: "mean" },
{ x: "date", y: "totalLength", interval: "5 years"}
)
)
]
})
salamanders
X
date
Y
mean
totalLength
Color
mean
totalLength
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ fill: "mean", y: "mean" },
{ x: "date", y: "totalLength", fill: "totalLength", tip: true, interval: "5 years" }
)
),
Plot.ruleY([0])
]
})
salamanders
X
—
Y
creekSection
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.barX(
salamanders,
Plot.groupY({ x: "count" }, { y: "creekSection", tip: true, fill: "reach"})
),
Plot.ruleX([0])
]
})
monoYearly
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.line(monoYearly, Plot.normalizeY({x: "year", y: "volume", basis: "first"})) // Try mean, min, last,!
],
marginLeft: 60,
x: {tickFormat: ""}
})
monoYearly
Plot.plot({
marks: [
Plot.line(monoYearly, Plot.normalizeY("first", {x: "year", y: "lake"}))
]
})
import {monoYearly} from "@observablehq/keep-saving-mono-lake"
mackCreekVertebrates.csv
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.
