Public
Edited
Aug 3, 2023
Insert cell
Insert cell
Plot.plot({
projection: "equal-earth",
// projection: "equirectangular",
color: { legend: true, type: "log", scheme: "ylOrRd" },
marks: [
Plot.graticule(),
Plot.geo(countries,
{
fill: (d) => stats.country_distribution[d.properties.name] ?? 0,
title: (d) => `${d.properties.name}\n${stats.country_distribution[d.properties.name]?.toLocaleString() ?? "unknown"}`
}),
Plot.sphere()
]
})
Insert cell
Plot.plot({
grid: true,
color: { legend: true },
marks: [
Plot.axisY({label: "Monthly count (millions)", tickFormat: (d) => (d / 1_000_000).toLocaleString()}),
Plot.axisX({label: "Date"}),
Plot.ruleY([0]),
Plot.lineY(mapped, {x: "x", y: "y", stroke: "key"}),
Plot.tip(mapped, Plot.pointer({x: "x", y: "y", title: (point) => `${point.x.toLocaleDateString()}\n${point.y.toLocaleString()} ${point.key}`})),
]
})
Insert cell
Plot.plot({
grid: true,
color: { legend: true },
marks: [
Plot.axisY({label: "Number of users (millions)", tickFormat: (d) => (d / 1_000_000).toLocaleString()}),
Plot.axisX({label: "Age"}),
Plot.ruleY([0]),
Plot.barY(stats.age_distribution_data[0].values, {x: "x", y: "y", tip: true})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more