The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({x: {domain: [0, 100]}, grid: true})
Plot.plot({x: {domain: [100, 0]}, grid: true})
Plot.plot({x: {domain: [0, 100], reverse: true}, grid: true})
Plot.plot({x: {domain: [new Date("2021-01-01"), new Date("2022-01-01")]}, grid: true})
Plot.plot({x: {type: "utc", domain: [1609459200000, 1640995200000]}, grid: true})
Plot.plot({x: {type: "time", domain: [new Date(2021, 0, 1), new Date(2022, 0, 1)]}, grid: true})
Plot.plot({x: {type: "log", domain: [1e0, 1e5]}, grid: true})
Plot.plot({x: {type: "log", domain: [1e0, 1e5], tickFormat: ","}, grid: true})
Plot.plot({x: {type: "log", domain: [1e0, 1e5], tickFormat: "~s"}, grid: true})
Plot.plot({x: {type: "log", base: 2, domain: [1e0, 1e4], ticks: 20}, grid: true})
Plot.plot({x: {type: "symlog", domain: [-10, 10]}, grid: true})
Plot.plot({x: {type: "sqrt", domain: [0, 100]}, grid: true})
Plot.plot({x: {type: "pow", exponent: 1 / 3, domain: [0, 100]}, grid: true})
Plot.plot({x: {type: "point", domain: [..."ABCDEFGHIJ"]}, grid: true})
Plot.plot({x: {type: "band", domain: [..."ABCDEFGHIJ"]}, grid: true})
Plot.plot({
color: {
scheme: schemeq
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "linear",
range: ["steelblue", "orange"] // uses d3.interpolateRgb
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "linear",
range: ["steelblue", "orange"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "linear",
interpolate: t => `hsl(${t * 360},100%,50%)` // angry rainbow!
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "diverging"
},
marks: [
Plot.cell([-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "diverging",
pivot
},
marks: [
Plot.cell([-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5], {x: d => d, fill: d => d})
]
})
Plot.plot({
grid: true,
color: {
type: "diverging",
scheme: "BuRd"
},
marks: [
Plot.ruleY([0]),
Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"})
]
})
gistemp = FileAttachment("gistemp.csv").csv({typed: true})
Plot.plot({
color: {
type: "categorical",
scheme: schemec
},
marks: [
Plot.cell([..."ABCDEFGHIJ"], {x: d => d, fill: d => d})
]
})
Plot.plot({
color: {
type: "ordinal",
domain: "ABCDEFGHIJ",
scheme: schemeo,
unknown: "gray"
},
marks: [
Plot.cell([..."ABCDEFGHIJ", null], {x: d => d ?? "N/A", fill: d => d})
]
})
Plot.plot({
r: {
range: [0, radius]
},
marks: [
Plot.dot([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, r: d => d, fill: "black"})
]
})
sftemp = FileAttachment("sf-temperatures.csv").csv({typed: true})
Plot.plot({
y: {
grid: true,
label: `↑ Daily temperature range (°${celsius ? "C" : "F"})`,
transform: celsius ? f => (f - 32) * (5 / 9) : undefined // Fahrenheit to Celsius
},
marks: [
Plot.areaY(sftemp, {x: "date", y1: "low", y2: "high"})
]
})
Plot.plot({
y: {
percent: true
},
color: {
type: "diverging",
scheme: "BuRd"
},
marks: [
Plot.rectY(gistemp, Plot.binX({y: "proportion", fill: "median"}, {x: "Anomaly", fill: "Anomaly"})),
Plot.ruleY([0])
]
})
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.
