Published
Edited
May 20, 2021
25 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projectionOptions = [
["Armadillo", d3.geoArmadillo()],
["Equal Earth", d3.geoEqualEarth()],
["Gilbert", d3.geoGilbert()],
["Mollweide", d3.geoMollweide()],
["Natural Earth 1", d3.geoNaturalEarth1()],
["Natural Earth 2", d3.geoNaturalEarth2()]
]
Insert cell
projection = projectionSelection[1]
.rotate([λ, φ, 0])
.fitSize([width, height], { type: "Sphere" })
Insert cell
height = width * 9 / 16;
Insert cell
rScale = d3
.scaleSqrt()
.domain([0, d3.max(sampleData, d => d.pop)])
.range([0, Math.sqrt([width * height]) / 4]) // Scales with screen size
Insert cell
sampleData = [
{ where: "NORTH AMERICA", pop: 590e6, doses: 325e6, centroid: [-100, 45] },
{ where: "SOUTH AMERICA", pop: 430e6, doses: 96e6, centroid: [-60, -12] },
{ where: "EUROPE", pop: 749e6, doses: 294e6, centroid: [2, 50] },
{ where: "AFRICA", pop: 1.34e9, doses: 25e6, centroid: [13, -4] },
{ where: "MIDDLE EAST", pop: 420e6, doses: 71e6, centroid: [50, 17] },
{ where: "RUSSIA", pop: 150e6, doses: 24e6, centroid: [70, 64] },
{ where: "ASIA", pop: 4.64e9, doses: 758e6, centroid: [110, 20] }
]
Insert cell
d3 = require("d3@6", "d3-geo-projection@3")
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