Every map on this page is rendered from Natural Earth geometry at request time — real coordinates, real projections, reprojectable. Nothing here is traced, and nothing is a picture of a map. Eight infographic types, four projections, and the encoding rules that keep them honest.
Each one names the geographic question it answers. Values shown are sample data for the specimen — replace them with verified figures before anything ships.
Answers “where is this quantity higher?” across administrative areas. Requires a rate or a normalised value — never a raw count, or you are drawing a population map by accident.
Answers “how much, and where?” for point locations. Circle area encodes the value, never radius — radius doubles the perceived difference.
Answers “what moves between these places?” Arcs are true great circles from the projection, so the curve is geography rather than decoration.
Answers “where is this?” One accented area, everything else neutral. The most common deck map, and the one most often over-decorated.
Answers “where is this, for someone who does not know the region?” The inset carries the wider context so the main frame can stay tight.
Answers “how did the pattern change?” One shared colour scale across every panel — a per-panel scale makes the comparison meaningless.
Answers “where are they, and how clustered?” Use when individual locations matter more than an aggregate per region.
The map as a slide, not as an illustration. Assertion headline, one accented finding, source on the slide. This exports to PNG and PDF cleanly because it is inline SVG.
Identical geometry. Every projection distorts something — area, shape, distance or direction — and choosing one is choosing which distortion you can live with.
// world — equal-ish area, familiar shape const world = d3.geoNaturalEarth1() .fitSize([width, height], sphere); // region — zoom to the features that matter const region = d3.geoMercator() .fitSize([width, height], featureCollection); // fitExtent gives you padding control const padded = d3.geoMercator() .fitExtent([[16, 16], [width - 16, height - 16]], fc); const path = d3.geoPath(region); svg.append("path") .attr("d", path(feature));
Always fit the projection to the features you are actually drawing. Hard-coded scale and translate values break the moment the frame size changes.
One dataset — engagements by country. Which encoding is correct depends on whether the reader is comparing regions, reading magnitudes, or locating things.
A choropleth of raw counts is a population map wearing a disguise. Normalise to a rate — per capita, per customer, per thousand sessions — or switch to proportional symbols, which read as counts honestly.
Vendor SVG map packs are convenient, but they are licensed assets and they are fixed projections — you get one view of the world and cannot reproject, zoom to a region, or fit the frame. Natural Earth via world-atlas is public domain, carries the same accuracy at 1:110m, and stays real geometry: the same file renders as Natural Earth, Mercator, orthographic or a tight regional crop. If a project genuinely needs a vendor pack — a specific administrative boundary set, say — buy the licence and record it, but do not paste vendor SVG into a design file.
Pair every colour step with a labelled value, and give the map a text alternative that states the finding — “engagements concentrated in Alberta and Ontario; none east of Quebec” — rather than describing the picture.
Inline SVG from d3 exports cleanly to PNG and PDF. Live tile maps do not — they rasterise at the wrong resolution, need network access at export time, and carry attribution requirements into the printed page.
// map pages are plain .html // d3 needs the container to exist before // it measures and fits the projection — // helmet-confined scripts race that. const topo = await d3.json(ATLAS_URL); const land = topojson.feature( topo, topo.objects.countries ); for (const spec of specimens) { render(spec, land); // one fetch, many maps }
The atlas is fetched once and reused by all eight specimens. Re-fetching per map is the most common performance mistake on a map-heavy page.