2b:null 2c:["$","title",null,{"children":"Rough Equal Earth -> Mercator -> North Polar Azimuthal Equidistant | Yusuf Imaad Khan | Observable"}] 31:T4be,Ok so when it transitions to the Azimuthal projection, the colours invert, the land turns white and the sea turns grey. I tried for a while to fix this. I THINK what is happening, is that when it transitions to the Azimuthal, the projection inverts. So the polygons that make up the projection flip over (because of the direction they're wound??? idk). Now usually this wouldn't be so problematic, and the inversion might be off the edges or something depending on how the projection is viewed. BUT, because I wanted to match the **North Polar** Azimuthal Equidistant projection seen [here](https://foreignpolicy.com/2025/02/14/trump-greenland-obsession-map-threats/), I had to rotate the the Azimuthal projection, to centre the North Pole, and to rotate the continents around the North Pole so Africa appeared in the north east. This makes it clearer to see the strategic positioning of Greenland as the article and original image highlight. Unfortunately the extreme rotation exacerbates the polygon flip and then the colours invert. Soooo idk how to fix that. I even tried quickly animating a colour change. I should probably study the documentation more. I don't have enough of a handle on what is happening.32:T62d,canvas = { const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); while (true) { for (let i = 0, n = 960; i < n; ++i) { const tRaw = i / n; const seg = 1 / 6; // 6 segments => each 1/6 of [0..1] let alphaVal; if (tRaw < seg) { const phase = d3.easeCubic(tRaw / seg); alphaVal = 0 + (0.3 - 0) * phase; } else if (tRaw < 2 * seg) { alphaVal = 0.3; } else if (tRaw < 3 * seg) { const phase = d3.easeCubic((tRaw - 2 * seg) / seg); alphaVal = 0.3 + (0.7 - 0.3) * phase; } else if (tRaw < 4 * seg) { alphaVal = 0.7; } else if (tRaw < 5 * seg) { const phase = d3.easeCubic((tRaw - 4 * seg) / seg); alphaVal = 0.7 + (0.3 - 0.7) * phase; // 0.7→0.3 } else { const phase = d3.easeCubic((tRaw - 5 * seg) / seg); alphaVal = 0.3 + (0 - 0.3) * phase; // 0.3→0 } // Set alpha for shape morph projection.alpha(alphaVal); // Also rotate so the third projection points to the north pole projection.rotate(rotateForAlpha(alphaVal)); // Render context.clearRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 1; context.strokeStyle = "#aaa"; context.stroke(); context.beginPath(); path(land); context.fillStyle = "rgba(0, 0, 0, 0.5)"; context.fill("nonzero"); // NOPE // context.fill(); // yield final context.beginPath(); yield context.canvas; } } }33:T438,// Took original interpolation code and added another stage with a bit of pause between transitions function interpolateProjection(raw0, raw1, raw2) { const mutate = d3.geoProjectionMutator((t) => (x, y) => { let t2; if (t < 0.3) { // raw0 → raw1 t2 = t / 0.3; const [x0, y0] = raw0(x, y), [x1, y1] = raw1(x, y); return [x0 + t2 * (x1 - x0), y0 + t2 * (y1 - y0)]; } else if (t < 0.4) { // hold raw1 return raw1(x, y); } else if (t < 0.7) { // raw1 → raw2 t2 = (t - 0.4) / 0.3; const [x1, y1] = raw1(x, y), [x2, y2] = raw2(x, y); return [x1 + t2 * (x2 - x1), y1 + t2 * (y2 - y1)]; } else if (t < 0.8) { // hold raw2 return raw2(x, y); } else { // raw2 → raw0 t2 = (t - 0.8) / 0.2; const [x2, y2] = raw2(x, y), [x0, y0] = raw0(x, y); return [x2 + t2 * (x0 - x2), y2 + t2 * (y0 - y2)]; } }); let t = 0; return Object.assign(mutate(t), { alpha(_) { return arguments.length ? mutate((t = +_)) : t; } }); }34:[{"id":"eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","href":"https://static.observableusercontent.com/files/eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","name":"land-110m.json","type":"application/json","lastModified":1739926521956.118,"size":55207}] 2f:{"id":"5c954792858e9677","slug":null,"title":"Rough Equal Earth -> Mercator -> North Polar Azimuthal Equidistant","thumbnail":"cfd96b19eee75fb554a77e5846e50bfb07e3c72b7a6c68e75d9149d0759b5bfa","access_level":"public","create_time":"$D2025-02-19T00:55:21.956Z","update_time":"$D2025-02-19T21:37:10.428Z","view_time":null,"first_public_time":"$D2025-02-19T16:15:56.878Z","has_unpublished_edits":null,"fork":{"id":"7a4d1a11c2c930f2","slug":"sailing-from-india-to-the-usa-in-a-straight-line","title":"Sailing from India to the USA in a \"straight line\"*","owner":{"id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":"starter_2024"},"version":567,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null}],"members":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null,"role":"editor"},{"type":"team","id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rough Equal Earth -> Mercator -> North Polar Azimuthal Equidistant","cells":[{"id":0,"value":"# Rough Equal Earth -> Mercator -> North Polar Azimuthal Equidistant","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":560,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"// Experiment with the rotation and its timing...this was a bit of an approximation\n\n// Piecewise rotate function:\n// raw0 & raw1 => [0, 0], raw2 => [-140, -70]\nfunction rotateForAlpha(alphaVal) {\n const seg = [0, 0.3, 0.4, 0.7, 0.8];\n\n if (alphaVal < seg[1]) {\n // Segment 1 (0→0.3): raw0→raw1 => no rotation\n return [0, 0];\n } else if (alphaVal < seg[3]) {\n // Segment 2/3 (0.3→0.7): smoothly rotate [0,0] → [-140, -70]\n const phase = (alphaVal - seg[1]) / (seg[3] - seg[1]); // 0..1\n const λ = 0 + (100 - 0) * phase; // 0 → -140\n const φ = 0 + (-90 - 0) * phase; // 0 → -70\n return [λ, φ];\n } else if (alphaVal < seg[4]) {\n // Segment 4 (0.7→0.8): hold raw2 => [-140, -70]\n return [100, -90];\n } else {\n // Segment 5/6 (0.8→1): rotate [-140, -70] → [0,0]\n const phase = (alphaVal - seg[4]) / (1 - seg[4]); // 0..1\n const λ = 100 + (0 - 100) * phase; // -140 → 0\n const φ = -90 + (0 - -90) * phase; // -70 → 0\n return [λ, φ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"world = FileAttachment(\"land-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"projection = interpolateProjection(\n d3.geoEqualEarthRaw,\n d3.geoMercatorRaw,\n d3.geoAzimuthalEquidistantRaw\n) // change from equal earth to Mercator to Azimuthal EQUIDISTANT\n .scale(scale(0))\n .translate([width / 2, height / 2])\n .rotate(rotate(0))\n .precision(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"rotate = d3.interpolate([0, 0], [0, 0], [0, 0]) // nope - this won't do it","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"scale = d3.interpolate(width / 8, width / 14, width / 15) // eyeballing it","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = width / 1.2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"equator = ({\n type: \"LineString\",\n coordinates: [\n [-180, 0],\n [-90, 0],\n [0, 0],\n [90, 0],\n [180, 0]\n ]\n}) // we don't really need this","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3-geo@2\", \"d3-interpolate@2\", \"d3-ease@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"