The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
height: 150,
width,
color: {
domain: [, ...order, , , ,],
scheme: "greens",
invert: true
},
x: {
label: "exports (US$, billions) →",
axis: "top"
},
y: {
ticks: [2019, 2020],
tickFormat: (d) => d,
label: null,
invert: true
},
marks: [
Plot.areaX(
exports,
Plot.stackX({
x: "total",
y: "year",
fill: "country",
order,
fillOpacity: 0.7,
stroke: "white"
})
),
Plot.rectX(
exports,
Plot.stackX({
x: "total",
y: "year",
z: "country",
order,
y2: "year",
y1: (d) => +d["year"] + 0.35 * Math.sign(d["year"] - 2019.5),
fill: "country",
stroke: "white",
title: (d) => `${d["total"]} billion US$, ${d["share"]}`
})
),
Plot.text(
exports,
Plot.stackX(
Plot.groupZ(
{ x: "mean", text: "first" },
{
x: "total",
z: "country",
order,
y: 2019.5,
text: "country"
}
)
)
)
]
})
order = d3.groupSort(
exports,
([, { country, total }]) => (country === "Others" ? NaN : total),
(d) => d.country
)
.reverse()
exports = FileAttachment("exports.csv").csv({ typed: true })
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.
