A projection maps [longitude, latitude] to [x, y] pixels (invert goes back). Every flat map distorts: Mercator keeps angles but inflates polar areas, Equal Earth keeps areas (right for choropleths), orthographic shows a globe. d3.geoPath(projection) turns GeoJSON into path data; fitExtent() fits an object in a box:
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0"></script>
<svg width="720" height="190" font-family="Arial" font-size="12" text-anchor="middle"></svg>
<script type="module">
const topo = await d3.json('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/land-110m.json');
const land = topojson.feature(topo, topo.objects.land), sphere = { type: 'Sphere' };
['geoMercator', 'geoEqualEarth', 'geoOrthographic'].forEach((name, i) => {
const box = [[i * 240 + 10, 22], [i * 240 + 230, 188]];
const path = d3.geoPath(d3[name]().fitExtent(box, sphere).clipExtent(box));
const g = d3.select('svg').append('g');
g.append('path').attr('d', path(sphere)).attr('fill', '#e3f2fd').attr('stroke', '#90a4ae');
g.append('path').attr('d', path(land)).attr('fill', '#3f7d3a');
g.append('text').attr('x', i * 240 + 120).attr('y', 14).text(`d3.${name}()`);
});
window.__done = true;
</script>
Only the constructor differs. Mercator's Greenland rivals Africa at a fourteenth of its area, and its frame stops near 85 degrees because the poles lie at infinity. d3-geo-projection (4.0.0) adds dozens more.