Published unlisted
Edited
Jun 7, 2022
1 star
Insert cell
Insert cell
cities = d3.csv(
"https://gist.githubusercontent.com/Fil/17fc857c3ce36bf8e21ddefab8bc9af4/raw/2731d08537f3cb2e4defa78884044a057bba64a0/cities.csv"
)
Insert cell
Insert cell
selectedCities = d3
.bin()
.value((d) => Math.log(+d[2015]))(d3.sort(cities, (d) => -+d[2015]))
.map((d) => d[0])
Insert cell
Inputs.table(selectedCities)
Insert cell
Insert cell
Plot.plot({
marginBottom: 72,
marginLeft: 48,
x: {
type: "log",
ticks: selectedCities.map((d) => d[2015]),
tickFormat: (d, i) =>
`${selectedCities[i]["Urban Agglomeration"]} — ${d3.format(".2s")(
+selectedCities[i]["2015"] * 1000
)}`,
tickRotate: -15,
grid: true
},
y: { type: "log", label: "↑ 2030 vs. 2015" },
color: { type: "ordinal" },
marks: [
Plot.ruleY([1]),
Plot.dot(cities, {
x: "2015",
y: (d) => d[2030] / d[2015],
fill: "Country Code",
title: "Urban Agglomeration"
})
]
})
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