Published
Edited
Jul 21, 2021
17 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
leg = ({
title: "Total migrant stock at mid-year",
subtitle: "by subregions in 2019 (in thousands)",
labels: [
"People who left this region",
"People who have moved to this region"
],
txtcol: "#585c59",
cols: [coltop, colbottom],
pos: [30, 330],
top: [d3.min(data, d => d.from), 7500, d3.max(data, d => d.from)],
bottom: [d3.min(data, d => d.to), 15000, d3.max(data, d => d.to)]
})
Insert cell
Insert cell
Insert cell
backcol = "#f0e9df"
Insert cell
ramp = d3.interpolateLab(backcol, "white")
Insert cell
Insert cell
Insert cell
projection = d3
.geoPatterson()
.scale(159)
.translate([width / 2, height / 2 + 65])
Insert cell
Insert cell
subregionstopo = topojson.topology({ subregions })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
path = d3.geoPath(projection)
Insert cell
md`## Helpers `
Insert cell
Insert cell
// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)
largestPolygon = function(d) {
var best = {};
var bestArea = 0;
d.geometry.coordinates.forEach(function(coords) {
var poly = { type: 'Polygon', coordinates: coords };
var area = d3.geoArea(poly);
if (area > bestArea) {
bestArea = area;
best = poly;
}
});
return best;
}
Insert cell
Insert cell
Insert cell
Insert cell
topojson = require('topojson')
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