Oblique Equal Earth

An equal-area world map you re-centre by rotating the globe, not by zooming. It opens on the familiar north-up view and then turns, settling on an oblique orientation with Africa in the middle and upside down. North-at-the-top is a convention about five centuries old, not a property of the planet — and the curved grid in the final view is the projection's own frame, tilted away from the Earth's.

• Drag to swing the world under the projection — whatever you grab stays under the cursor, and you can carry it right over a pole and out the other side.
• ⌘-drag (Ctrl-drag on Windows/Linux) or the spin slider to roll the map about the viewing axis.
• Hover any country or ocean for its name, click to open its Wikipedia article.
• Pick a view below to swing there smoothly, and read why it is worth looking at.
• Light or dark follows your system by default; the buttons override it.

What you are looking at

The Equal Earth projection is equal-area — every country covers screen space in proportion to its true size, so the Mercator distortion that inflates the high latitudes is gone. Because d3.geoEqualEarth().rotate() transforms spherical coordinates before projecting, rotating produces a genuinely oblique Equal Earth rather than a panned one: the projection's zero-distortion line moves with you, so whichever region you swing to the centre is the region drawn most faithfully. Watch the graticule — when the parallels stop being horizontal lines, you are looking at an oblique aspect.

Dragging composes quaternions rather than adding degrees to Euler angles. That is what lets the map travel past a pole instead of jamming against it, keeps horizontal dragging following the cursor even when the world is upside down, and lets a jump between preset views sweep the short arc in orientation space.

Country fills are chosen at build time by colouring the border graph, so no two neighbouring countries share a colour.

Putting this map on your own page

The map is a self-contained custom element. Build it with npm run build:embed, serve equal-earth.js and the data/ directory, then drop this into your page (run=false here, so the sample below is shown rather than executed):

<script type="module" src="/equal-earth.js"></script>
<equal-earth-map data-base="/equal-earth-data" theme="auto"></equal-earth-map>

Everything renders inside a shadow root, so the map cannot disturb your styles and your styles cannot disturb the map.