Public
Edited
Apr 21, 2023
5 forks
Importers
7 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bertin.draw({
params: { projection: d3.geoBertin1953() },
layers: [
{ type: "header", text: "Cities with more than one million inhabitants" },
{
type: "bubble",
geojson: dots,
values: "population",
k: 10,
dorling: true,
fill: "#5c7db8",
leg_x: 680,
leg_y: 410,
leg_fontSize2: 7,
leg_title: `Number of inhabitants
in the world's largest cities`,
tooltip: ["$city", "$population", "inh."],
leg_round: -2
},

{
type: "layer",
geojson: countries,
fill: "white",
fillOpacity: 0.3,
stroke: "none"
},
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
d3 = require("d3@7", "d3-geo-projection@4")
Insert cell
cities = d3

.csv(
"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv"
)

.then((r) => r.filter((d) => +d.population > 1000000))
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