The end-to-end solution for building and hosting better data apps, dashboards, and reports.
crimea = FileAttachment("crimea.csv").csv({typed: true})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.lineY(crimea, {x: "date", y: "deaths", stroke: "cause", marker: "circle"}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(crimea, {x: "date", y2: "deaths", fill: "cause", mixBlendMode: "multiply"}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(crimea, {x: "date", y: "deaths", fill: "cause"}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
type: "band",
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
label: null
},
marks: [
Plot.barY(crimea, {x: "date", y: "deaths", fill: "cause"}),
Plot.ruleY([0])
]
})
unemployment = FileAttachment("unemployment.csv").csv({typed: true})
stacked = Plot.plot({
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(unemployment, Plot.stackY({x: "date", y: "unemployed", fill: "industry", title: "industry"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(unemployment, Plot.stackY({offset: "center", x: "date", y: "unemployed", fill: "industry"}))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(unemployment, Plot.stackY({offset: "wiggle", x: "date", y: "unemployed", fill: "industry"}))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(unemployment, Plot.stackY({
x: "date",
y: "unemployed",
curve: "catmull-rom",
fill: "industry",
order: "value"
})),
Plot.ruleY([0])
]
})
riaa = FileAttachment("riaa-us-revenue.csv").csv({typed: true})
{
const xy = {x: "year", y: "revenue", z: "format", order: "appearance", reverse: true};
return Plot.plot({
y: {
grid: true,
label: "↑ Annual revenue (billions, adj.)",
transform: d => d / 1000
},
marks: [
Plot.areaY(riaa, Plot.stackY({...xy, fill: "group", title: d => `${d.format}\n${d.group}`})),
Plot.lineY(riaa, Plot.stackY1({...xy, stroke: "white", strokeWidth: 1})),
Plot.ruleY([0])
],
color: {legend: true}
});
}
{
const xy = {x: "year", y: "revenue", z: "format", order: "appearance", offset: "expand", reverse: true};
return Plot.plot({
y: {
grid: true,
label: "↑ Revenue (%)",
percent: true
},
marks: [
Plot.areaY(riaa, Plot.stackY({...xy, fill: "group", title: d => `${d.format}\n${d.group}`})),
Plot.lineY(riaa, Plot.stackY2({...xy, stroke: "white", strokeWidth: 1})),
Plot.ruleY([0, 1])
]
});
}
congress = FileAttachment("us-congress-members.csv").csv({typed: true})
Plot.plot({
height: 300,
x: {
label: "Age →",
nice: true
},
y: {
grid: true,
label: "← Women · Men →",
labelAnchor: "center",
tickFormat: Math.abs
},
marks: [
Plot.dot(congress, Plot.stackY2({
x: d => 2021 - d.birth,
y: d => d.gender === "M" ? 1 : d.gender === "F" ? -1 : 0,
fill: "gender"
})),
Plot.ruleY([0])
]
})
Plot.plot({
height: 280,
x: {
percent: true
},
facet: {
data: congress,
y: d => Math.floor((2021 - d.birth) / 10) * 10
},
marks: [
Plot.barX(congress, Plot.stackX(Plot.groupZ({x: "proportion-facet"}, {fill: "gender"}))),
Plot.text(congress, Plot.stackX(Plot.groupZ({x: "proportion-facet", text: "first"}, {z: "gender", text: d => d.gender === "F" ? "Women" : d.gender === "M" ? "Men" : null}))),
Plot.ruleX([0, 1])
]
})
iowa = FileAttachment("iowa-energy.csv").csv({typed: true})
energy = Plot.plot({
y: {
grid: true,
label: "↑ Net generation (million MWh)",
transform: d => d / 1000
},
marks: [
Plot.areaY(iowa, Plot.stackY({x: "year", y: "net_generation", fill: "source", title: "source"})),
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.
