{
const context = DOM.context2d(width, width * (rows / cols)),
path = d3.geoPath(projection, context);
const dx = width / cols,
dy = dx;
let i = 0;
for (const country of countries.features) {
const x = i % cols,
y = Math.floor(i / cols);
projection
.rotate(d3.geoCentroid(country).map(d => -d))
.fitExtent(
[[x * dx, y * dy], [(x + 0.95) * dx, (y + 0.95) * dy]],
country
);
context.beginPath();
path(country);
context.fillStyle = "#aaa";
context.fill();
context.fillStyle = "#000";
context.fillText(
country.properties.name.substring(0, 13),
x * dx,
(y + 0.9) * dy
);
i++;
}
yield context.canvas;
}
cols = Math.floor(width / 65)
rows = Math.ceil(countries.features.length / cols)
countries = {
const p = await d3.json(
"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.1.0/world/110m.json"
);
return topojson.feature(p, p.objects.countries);
}
projection = d3.geoAzimuthalEqualArea()
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.
