Open jasondavies.com/maps and drag the planet around for thirty seconds. You will feel something most BIM coordinators learn the hard way: the Earth does not want to be flat, and every attempt to flatten it picks a fight with geometry. Jason Davies — a UK-based software engineer and one of the early core contributors to D3.js — has spent years turning that fight into a draggable, re-centreable, browser-native gallery of map projections. No plugin, no install, no Esri licence. Just SVG, Canvas, and maths.

The primary source is blunt about the core truth: “all 2D maps of Earth are interrupted at some point, even if it’s just along the antimeridian at 180°.” Davies puts the interruptions where nobody looks — oceans, for a land-focused map. That is not a bug. That is the entire craft.

←TODAY: swisstopo runs the country on CH1903+/LV95, a custom oblique-Mercator grid, precisely because no global projection fits Switzerland without distortion. →3012: the Zurich-3012 horizon is georeferenced or it is fiction — a city model is only as honest as its CRS. Fulcrum: the same unrolling that turns a sphere into a butterfly net turns your double-curved façade into flat sheet metal.

Why a working architect should care about cartography

Here is the part the trade press skips. Projection is parametric geometry made visible. Mapping a curved manifold onto a flat sheet is the same unrolling problem as developable-surface flattening, sheet-metal unfolds, and UV-unwrapping in Rhino and Grasshopper. The octahedral butterfly map — eight equilateral triangles, the Cahill tradition since 1909 — is literally an unfolding net. Davies notes his butterfly maps “were all automatically generated using the geo.polyhedron D3 plugin.” Swap “octahedron” for “freeform roof” and you are describing a Monday at the office.

The deep reason none of it can be perfect comes from Gauss’s Theorema Egregium: a sphere has non-zero Gaussian curvature, so any flat map must distort area, angle, or distance — pick at most two. Tissot’s indicatrix draws that distortion as little ellipses; Davies lets you watch them stretch in real time. Snyder’s Map Projections: A Working Manual is the canonical reference if you want the closed-form ugliness behind the pretty drag.

This is a Learn piece — clone it, run it, break it

The Tool: The engine under the gallery is D3’s geographic stack — d3-geo plus d3-geo-projection and the geo.polyhedron plugin, all open-source (BSD), all maintained in the D3 orbit Davies helped build. It powers data journalism across Europe — NZZ among them — so you have almost certainly seen its output without knowing it. An afternoon with it gives a computational designer a dependency-light way to render any custom site or data map without buying into a desktop GIS.

Setup:

mkdir map-lab && cd map-lab
npm init -y
npm install d3 d3-geo-projection topojson-client
# grab a world outline (TopoJSON), then serve the folder
npx http-server .
# open http://127.0.0.1:8080 — a static page is all you need

First steps:

1. Create index.html with one <svg> and a module <script>.
2. Import a projection — start with geoNaturalEarth1() from d3-geo-projection, feed it your world TopoJSON through geoPath().
3. Swap the projection line for geoAitoff() or a polyhedral one and reload — same data, different lie. That swap, and seeing the continents re-shape, is the whole lesson.
4. Open Davies’ Map Projection Transitions demo to watch one projection morph into another — that is your visual spec.

Atelier: In a Swiss studio the reach for this is concrete — when you georeference an IFC against the wrong CRS, your site coordinates drift metres and the surveyor’s stake no longer matches the model. Picking CH1903+/LV95 over web-Mercator is the exact projection choice Davies dramatises, except the cost of getting it wrong is a re-survey, not a fuzzy ocean.

Hack: This Hack teaches you to render the Earth in two projections in one file and feel the trade-off in your own hands. The medium is JavaScript; the domain is Geometry. Drop this into your module script after loading a world topojson — flip the one commented line to switch projections.

import * as d3 from "d3";
import { geoAitoff } from "d3-geo-projection";
import { feature } from "topojson-client";

const land = feature(world, world.objects.land);
const proj = geoAitoff();            // swap: d3.geoMercator() and compare
const path = d3.geoPath(proj.fitSize([960, 500], land));
d3.select("svg").append("path").datum(land).attr("d", path);

Run it, screenshot it, then change geoAitoff() to d3.geoMercator() and screenshot again. Lay the two side by side: Greenland’s weight is your distortion budget, drawn.

The longevity question

One sober line, because it is my beat. The buildings that aged worst in my time were not the ugly ones — they were the ones nobody could reopen after a proprietary format went dark. A projection chosen inside a closed GIS that you cannot inspect is the same trap at survey scale. Davies’ gallery is the opposite ethos: open code, readable maths, a file a 25-year-old can still open in 2070. When you pick a CRS this quarter, write down which projection and why — your future self, holding the as-built, will thank you.

Learn-it:

• Gallery (primary): Jason Davies — Map Projections
• Tutorial / demo: Map Projection Transitions
• Curated repo: awesome-projections
• PAZ note: pair this with the Grasshopper unrolling/developable-surface workflow — the butterfly net and your façade unfold are the same algorithm.

Go open the gallery, drag the planet until a continent looks wrong, and ask why. That instinct — distrusting the flat picture — is the most portable skill in this whole stack.