The end-to-end solution for building and hosting better data apps, dashboards, and reports.
cars = FileAttachment("cars.csv").csv({typed: true})
Plot.plot({
grid: true,
marks: [
Plot.dot(cars, {x: "economy (mpg)", y: "power (hp)"})
]
})
Plot.plot({
grid: true,
inset: 10,
x: {
label: "Fuel consumption (gallons per 100 miles) →"
},
y: {
label: "↑ Horsepower"
},
marks: [
Plot.dot(cars, {
x: d => 100 / (d["economy (mpg)"] ?? NaN),
y: "power (hp)"
})
]
})
gistemp = FileAttachment("gistemp.csv").csv({typed: true})
Plot.plot({
y: {
grid: true,
tickFormat: "+f",
label: "↑ Surface temperature anomaly (°F)"
},
color: {
type: "diverging",
scheme: "BuRd",
legend: true
},
marks: [
Plot.ruleY([0]),
Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"})
]
})
aapl = FileAttachment("aapl.csv").csv({typed: true})
Plot.plot({
grid: true,
x: {
label: "Daily change (%) →",
tickFormat: "+f",
transform: d => d * 100
},
y: {
label: "↑ Daily trading volume",
type: "log",
tickFormat: "~s"
},
marks: [
Plot.ruleX([0]),
Plot.dot(aapl, {x: d => (d.Close - d.Open) / d.Open, y: "Volume", r: "Volume"})
]
})
diamonds = FileAttachment("diamonds.csv").csv({typed: true})
Plot.plot({
height: 640,
grid: true,
x: {
label: "Carats →"
},
y: {
label: "↑ Price ($)"
},
r: {
range: [0, 20]
},
marks: [
Plot.dot(diamonds, Plot.bin({r: "count"}, {x: "carat", y: "price", thresholds: 100}))
]
})
alphabet = FileAttachment("alphabet.csv").csv({typed: true})
Plot.plot({
marks: [
Plot.dot(alphabet, {x: "letter", r: "frequency", fill: "currentColor"})
]
})
driving = FileAttachment("driving.csv").csv({typed: true})
Plot.plot({
grid: true,
x: {
label: "Miles driven (per capita per year) →"
},
y: {
label: "↑ Price of gas (average per gallon, adjusted)"
},
marks: [
Plot.line(driving, {x: "miles", y: "gas", curve: "catmull-rom"}),
Plot.dot(driving, {x: "miles", y: "gas", fill: "currentColor"}),
Plot.text(driving, {filter: d => d.year % 5 === 0, x: "miles", y: "gas", text: "year", dy: -8})
]
})
Plot.plot({
x: {
label: null,
tickSize: 0
},
y: {
label: "↑ Frequency (%)",
transform: d => d * 100
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(alphabet, {x: "letter", y: "frequency", fill: "black"}),
Plot.dot(alphabet, {x: "letter", y: "frequency", fill: "black", r: 4})
]
})
stateage = {
const data = await FileAttachment("us-population-state-age.csv").csv({typed: true});
const ages = data.columns.slice(1); // convert wide data to tidy data
return Object.assign(ages.flatMap(age => data.map(d => ({state: d.name, age, population: d[age]}))), {ages});
}
{
const xy = Plot.normalizeX({basis: "sum", z: "state", x: "population", y: "state"});
return Plot.plot({
height: 660,
grid: true,
x: {
axis: "top",
label: "Percent (%) →",
transform: d => d * 100
},
y: {
axis: null
},
color: {
scheme: "spectral",
domain: stateage.ages, // in order
legend: true
},
marks: [
Plot.ruleX([0]),
Plot.ruleY(stateage, Plot.groupY({x1: "min", x2: "max"}, xy)),
Plot.dot(stateage, {...xy, fill: "age", title: "age"}),
Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: "end", dx: -6, text: "state"}))
]
});
}
{
const xy = Plot.normalizeY({basis: "sum", z: "state", x: "age", y: "population"});
return Plot.plot({
grid: true,
x: {
domain: stateage.ages, // in order
label: "Age range (years) →",
labelAnchor: "right"
},
y: {
label: "↑ Percent of population (%)",
transform: d => d * 100
},
marks: [
Plot.ruleY([0]),
Plot.line(stateage, {...xy, strokeWidth: 1, stroke: "#ccc"}),
Plot.dot(stateage, xy)
]
});
}
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.
