${name}

30:T43b,md`# Tidying up Earth The map below was my submission for the [2022 GeoHipster Calendar](https://geohipster.com/2022-geohipster-calendar/). It was not selected to be included in the calendar, but you can still see it here, and there's even an animated version as a bonus! ## How this map was made Inspired by Ursus Wehrli's "Tidying Up Art" and Art. Lebedev Studio's Суша (which used an [impressive but tedious manual process](https://www.artlebedev.com/susha/process-1/)), this map shows the countries of the world neatly aligned, rather than randomly spread all over the planet. Data is from Natural Earth (medium scale), processed using D3, an adapted version of [potpack](https://github.com/mapbox/potpack), and a few dozen lines of Javascript code. Countries are shown in orthographic projection, scaled such that their relative sizes are correct. _The boundaries and names shown and the designations used on this map are based on [Natural Earth](https://www.naturalearthdata.com) data version 4.1.0 and do not imply endorsement or acceptance of any territorial claims._`31:T4c4,map = { const { w, h, padding, boxes } = arranged; const width = w + 2 * padding; const height = h + 2 * padding; const percentX = width / 100; const percentY = height / 100; return svg` `; }32:Ta61,function render(t) { const { w, h, padding, boxes } = sorted; const width = w + 2 * padding; const height = h + 2 * padding; const percentX = width / 100; const percentY = height / 100; const baseProjection = d3.geoEqualEarth(); const outline = { type: "Sphere" }; baseProjection.fitWidth(w, outline); const path = d3.geoPath(baseProjection); const projectedHeight = path.bounds(outline)[1][1]; const translate = baseProjection.translate(); baseProjection.translate([ translate[0], translate[1] + (h - projectedHeight) / 4 ]); const tLooped = (t < 0.5 ? t : 1 - t) * 2; const pauseFraction = 0.1; const tEased = ease( Math.max( 0, Math.min(1, (tLooped - pauseFraction) / (1 - 2 * pauseFraction)) ) ); const outlineFraction = 0.5; const tOutline = ease(Math.min(1, tLooped / outlineFraction)); const outlineColor = d3.interpolateLab("#000", "#00000000")(tOutline); return svg` `; }33:Tdaa,packed = { /* Adapted from https://github.com/mapbox/potpack Copyright (c) 2018, Mapbox, ISC License */ // Shallow clone const boxes = polygonBoxes.map((box) => ({ ...box })); const padding = 0.5; const targetSize = [10.5 - 2 * padding, 8 - 2 * padding]; const infoBoxSize = [2 - padding, 1.5 - padding]; // calculate total box area and maximum box width let area = 0; let maxWidth = 0; for (const box of boxes) { area += box.w * box.h; maxWidth = Math.max(maxWidth, box.w); } // sort the boxes for insertion by height, descending boxes.sort((a, b) => b.h - a.h); // aim for a squarish resulting container, // slightly adjusted for sub-100% space utilization const ratio = targetSize[0] / targetSize[1]; const startWidth = Math.max( Math.ceil(Math.sqrt((area / 0.84) * ratio)), maxWidth ); const pixelsPerInch = startWidth / targetSize[0]; // start with a single empty space, unbounded at the bottom const spaces = [ { x: 0, y: 0, w: startWidth, h: Math.ceil((targetSize[1] - infoBoxSize[1]) * pixelsPerInch) }, { x: 0, y: Math.ceil((targetSize[1] - infoBoxSize[1]) * pixelsPerInch), w: Math.ceil((targetSize[0] - infoBoxSize[0]) * pixelsPerInch), h: Math.ceil(infoBoxSize[1] * pixelsPerInch) } ]; let width = 0; let height = 0; for (const box of boxes) { let noSpace = true; // look through spaces backwards so that we check smaller spaces first for (let i = spaces.length - 1; i >= 0; i--) { const space = spaces[i]; // look for empty spaces that can accommodate the current box if (box.w > space.w || box.h > space.h) continue; noSpace = false; // found the space; add the box to its top-left corner // |-------|-------| // | box | | // |_______| | // | space | // |_______________| box.x = space.x; box.y = space.y; height = Math.max(height, space.y + box.h); width = Math.max(width, space.x + box.w); if (box.w === space.w && box.h === space.h) { // space matches the box exactly; remove it const last = spaces.pop(); if (i < spaces.length) spaces[i] = last; } else if (box.h === space.h) { // space matches the box height; update it accordingly // |-------|---------------| // | box | updated space | // |_______|_______________| space.x += box.w; space.w -= box.w; } else if (box.w === space.w) { // space matches the box width; update it accordingly // |---------------| // | box | // |_______________| // | updated space | // |_______________| space.y += box.h; space.h -= box.h; } else { // otherwise the box splits the space into two spaces // |-------|-----------| // | box | new space | // |_______|___________| // | updated space | // |___________________| spaces.push({ x: space.x + box.w, y: space.y, w: space.w - box.w, h: box.h }); space.y += box.h; space.h -= box.h; } break; } if (noSpace) { throw new Error("Not enough space"); } } return { w: width, // container width h: height, // container height padding: Math.floor(padding * pixelsPerInch), boxes }; }34:[{"id":"50364cd6e8326422f59512663c5bab95e84e17647a8e0324855ea8b7a95c41134e25d7d098373f130b8f1769b69fa53913a5e73b9b3946b481f72adcbf42d2bd","href":"https://static.observableusercontent.com/files/50364cd6e8326422f59512663c5bab95e84e17647a8e0324855ea8b7a95c41134e25d7d098373f130b8f1769b69fa53913a5e73b9b3946b481f72adcbf42d2bd","name":"tidying-up-earth.mp4","type":"video/mp4","lastModified":1658334329175.239,"size":2845018},{"id":"c90763aeb01888fb08177db64f239ae1e41e9d16c19083d37e866ce1e50caf2d38c42a8dfe2c0cdb29547fdd92a523bb61fc3186510972c0d13811fd80b385a4","href":"https://static.observableusercontent.com/files/c90763aeb01888fb08177db64f239ae1e41e9d16c19083d37e866ce1e50caf2d38c42a8dfe2c0cdb29547fdd92a523bb61fc3186510972c0d13811fd80b385a4","name":"Tidying_up_Earth.png","type":"image/png","lastModified":1658334333273.192,"size":1630635}] 2e:{"title":"Tidying up Earth","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"tidying_up_earth = FileAttachment(\"Tidying_up_Earth.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"---\n\n## Static map generation","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"DOM.download(() => svgToBlob(map), \"Tidying_up_Earth.png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"## Animated map generation\n\nClick button below, then run:\n\n~~~\nffmpeg -framerate 30 -i tidying-up-earth-%04d.png -c:v libx264 -pix_fmt yuv420p tidying-up-earth.mp4\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":785,"value":"{\n const form = html``;\n form.button.onclick = async (event) => {\n event.preventDefault();\n const frames = 240;\n\n const targetWidth = 1280;\n const targetHeight = 960;\n const sourceWidth = sorted.w + 2 * sorted.padding;\n const scale = targetWidth / sourceWidth;\n\n for (let i = 0; i < frames; i += 1) {\n const t = i / frames;\n const svgNode = render(t);\n const blob = await svgToBlob(svgNode, scale, {\n width: sourceWidth,\n height: targetHeight / scale\n });\n const url = URL.createObjectURL(blob);\n await download(url, `tidying-up-earth-${String(i).padStart(4, \"0\")}.png`);\n URL.revokeObjectURL(url);\n }\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"viewof t = Inputs.range([0, 1], { value: 0, step: 0.001, label: \"t\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"render(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"function interpolateProjection(raw0, raw1) {\n const { scale: scale0, translate: translate0, rotate: rotate0 } = raw0;\n const { scale: scale1, translate: translate1, rotate: rotate1 } = raw1;\n return (t) =>\n d3\n .geoProjection((x, y) =>\n lerp2(d3.geoEqualEarthRaw(x, y), d3.geoOrthographicRaw(x, y), t)\n )\n .scale(lerp1(scale0(), scale1(), t))\n .translate(lerp2(translate0(), translate1(), t))\n .rotate(lerp2(rotate0(), rotate1(), t));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"function lerp1(x0, x1, t) {\n return (1 - t) * x0 + t * x1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"function lerp2([x0, y0], [x1, y1], t) {\n return [(1 - t) * x0 + t * x1, (1 - t) * y0 + t * y1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"ease = d3.easeCubicInOut","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"narrowSpace = \"\\u2009\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"## Experiments & implementation","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"{\n const { w, h, padding, boxes } = arranged;\n const width = w + 2 * padding;\n const height = h + 2 * padding;\n const percentX = width / 100;\n const percentY = height / 100;\n\n const projection = d3.geoEqualEarth();\n const outline = { type: \"Sphere\" };\n projection.fitWidth(w, outline);\n const path = d3.geoPath(projection);\n const projectedHeight = path.bounds(outline)[1][1];\n const t = projection.translate();\n projection.translate([t[0], t[1] + (h - projectedHeight) / 2]);\n\n return svg`\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"sorted = ({\n ...arranged,\n boxes: [...arranged.boxes]\n .map((box, colorIndex) => ({ ...box, colorIndex }))\n .sort((a, b) => b.polygon.properties.area - a.polygon.properties.area)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"arranged = ({\n ...packed,\n boxes: packed.boxes.map(({ projection, polygon, name, x, y }) => {\n const clonedProjection = cloneOrthographicProjection(projection);\n const t = projection.translate();\n clonedProjection.translate([t[0] + x, t[1] + y]);\n return { projection: clonedProjection, polygon, name };\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"polygonBoxes = largePolygons.map((polygon) => {\n const centroid = d3.geoCentroid(polygon);\n const projection = d3\n .geoOrthographic()\n .rotate([-centroid[0], -centroid[1]])\n .fitWidth(1000, polygon);\n const area = polygon.properties.area;\n projection.fitWidth(\n 1000000 * (area / d3.geoPath(projection).area(polygon)) ** 0.5,\n polygon\n );\n const path = d3.geoPath(projection);\n const [w, h] = path.bounds(polygon)[1].map((size) => Math.ceil(size));\n const name = polygon.properties.name;\n return { w, h, projection, polygon, name };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"largePolygons = polygons.filter(({ properties: { area } }) => area > 0.0001)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"polygons = land.features\n .flatMap((feature) => {\n if (feature.geometry.type === \"MultiPolygon\") {\n return feature.geometry.coordinates.map((coordinates) => {\n const clonedFeature = cloneJson(feature);\n return {\n ...clonedFeature,\n geometry: {\n type: \"Polygon\",\n coordinates\n }\n };\n });\n } else {\n return [feature];\n }\n })\n .map((feature) => {\n feature.properties.area = d3.geoArea(feature.geometry);\n return feature;\n })\n .sort((a, b) => b.properties.area - a.properties.area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"async function download(url, name) {\n const a = document.createElement(\"a\");\n a.download = name;\n a.href = url;\n a.style.display = \"none\";\n document.body.append(a);\n a.click();\n await Promises.delay(100);\n a.remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"function svgToBlob(svgNode, scale = 2, dimensions) {\n return new Promise((resolve) => {\n const svgRoot = svgNode.cloneNode(true);\n const { width, height } = dimensions || svgRoot.viewBox.baseVal;\n svgRoot.setAttribute(\"width\", width);\n svgRoot.setAttribute(\"height\", height);\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svgRoot);\n const blob = new Blob([svgString], { type: \"image/svg+xml\" });\n const url = URL.createObjectURL(blob);\n const image = new Image();\n image.onload = () => {\n URL.revokeObjectURL(url);\n const context = DOM.context2d(width, height, scale);\n context.fillStyle = backgroundColor;\n context.rect(0, 0, width, height);\n context.fill();\n context.drawImage(image, 0, 0);\n context.canvas.toBlob(resolve);\n };\n image.src = url;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"function cloneOrthographicProjection(projection) {\n const clone = d3.geoOrthographic();\n [\"rotate\", \"scale\", \"translate\"].forEach((attribute) => {\n clone[attribute](projection[attribute]());\n });\n return clone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"function cloneJson(json) {\n return JSON.parse(JSON.stringify(json));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"backgroundColor = \"#15202b\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"land = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"world = fetch(\n await require.resolve(\"world-atlas@2.0.2/countries-50m.json\")\n).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\", \"d3-scale-chromatic@3\", \"d3-ease@3\", \"d3-interpolate@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"font = new Promise(async (resolve) => {\n const response = await fetch(\n \"https://fonts.gstatic.com/s/inter/v3/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2\"\n );\n const blob = await response.blob();\n const reader = new FileReader();\n reader.onload = () => {\n resolve(reader.result);\n };\n reader.readAsDataURL(blob);\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}