31:T4ec,

Earth on an icosahedron by C. Yamahata on Sketchfab

32:T594,map = function (projection, opts) { if (!projection) { projection = d3.geoOrthographic(); } else if (typeof projection == "string") { const name = "geo" + projection[0].toUpperCase() + projection.slice(1); if (name in d3) projection = d3[name](); else throw `Error: "${name}" not found in d3.`; } opts = { inertia: true, zoom: true, ...opts }; var c = this; if (!c && projection.rotate && opts.rotate) { projection.rotate(opts.rotate); } var path = d3.geoPath(projection); var bounds = path.bounds({ type: "Sphere" }), ratio = (bounds[1][1] - bounds[0][1]) / (bounds[1][0] - bounds[0][0]), height = opts.height || width * Math.sqrt(ratio * 0.6); if (opts.fitExtent !== false) projection.fitExtent( [ [2, 2], [width - 2, height - 2] ], { type: "Sphere" } ); if (c && !c.getContext) c = false; if (!c) c = DOM.context2d(width, height).canvas; mapcanvas(projection, c, opts); c.projection = projection; if (projection.invert && opts.inertia && d3.geoInertiaDrag) { let sel = d3 .select(c) .style("cursor", "-webkit-grab") .style("cursor", "-moz-grab") .style("cursor", "grab"); d3.geoInertiaDrag( sel, function () { c.render(); } /* allow overloading map.render */, c.projection ); invalidation.then(() => sel.on(".drag", null)); } return c; }33:T1340,function mapcanvas( projection, c, { background = "#fefef2", clip = false, keepcanvas = false, show_sphere = true, show_land = true, fill = () => "black", ...opts } = {} ) { const context = c.getContext("2d"); var path = d3.geoPath(projection, context); if (clip) context.beginPath(), path(clip), context.clip(); function render() { if (!keepcanvas) context.clearRect(0, 0, width, c.height); if (show_sphere) { context.beginPath(); path({ type: "Sphere" }); if (background) { context.fillStyle = sphere_fill; context.fill(); } context.beginPath(), path(graticule), (context.strokeStyle = graticule_stroke), context.stroke(); } if (show_land) { var l = land.features ? land.features : [land]; l.forEach((f, i) => { context.beginPath(), path(f), (context.fillStyle = land_fill), context.fill(); }); } if (show_equator) context.beginPath(), path( d3 .geoGraticule() .step([0, 100]) .extent([ [-179.99, -25], [179.99, 25] ])() ), (context.strokeStyle = "brown"), context.stroke(); if (show_sphere || show_structure || !show_land) context.beginPath(), path({ type: "Sphere" }), (context.strokeStyle = "#000"), context.stroke(); // Polyhedral projections expose their structure as projection.tree() // To draw them we need to cancel the rotate if (projection.tree) { var rotate = projection.rotate(); projection.rotate([0, 0, 0]); // run the tree of faces to get all sites and folds var sites = [], folds = [], i = 0; function recurse(face) { var site = d3.geoCentroid({ type: "MultiPoint", coordinates: face.face }); site.id = face.id || i++; sites.push(site); if (face.children) { face.children.forEach(function (child) { folds.push({ type: "LineString", coordinates: child.shared.map((e) => d3.geoInterpolate(e, face.centroid)(1e-5) ) }); recurse(child); }); } } recurse(projection.tree()); // folding lines folds.forEach((fold) => { context.beginPath(), (context.lineWidth = 0.5), context.setLineDash([3, 4]), (context.strokeStyle = "#888"), path(fold), context.stroke(), context.setLineDash([]); }); // restore the projection’s rotate projection.rotate(rotate); } if (show_structure && projection.tree) { var rotate = projection.rotate(); projection.rotate([0, 0, 0]); // run the tree of faces to get all sites and folds var sites = [], folds = [], i = 0; function recurse(face) { var site = d3.geoCentroid({ type: "MultiPoint", coordinates: face.face }); site.id = face.id || i++; sites.push(site); if (face.children) { face.children.forEach(function (child) { folds.push({ type: "LineString", coordinates: child.shared.map((e) => d3.geoInterpolate(e, face.centroid)(1e-5) ) }); recurse(child); }); } } recurse(projection.tree()); // sites & numbers context.beginPath(), path.pointRadius(10)({ type: "MultiPoint", coordinates: sites }), (context.fillStyle = "white"), (context.strokeStyle = "black"), context.fill(), context.stroke(); sites.forEach((site) => { (context.textAlign = "center"), (context.fillStyle = "black"), (context.font = "16px Georgia"), (context.textBaseline = "middle"), context.fillText( site.id, projection(site)[0], projection(site)[1] - 1 ); }); // restore the projection’s rotate projection.rotate(rotate); } if (false) d3.select(context.canvas).on("mousemove", function (event) { var gni = projection.invert(d3.pointer(event, this)); context.beginPath(), path.pointRadius(2)({ type: "Point", coordinates: gni }), (context.fillStyle = "green"), (context.strokeStyle = "black"), context.fill(), context.stroke(); }); mutable lambda = projection.rotate()[0]; mutable phi = projection.rotate()[1]; mutable gamma = projection.rotate()[2]; } context.canvas.path = path; (context.canvas.render = render)(); return context.canvas; }34:[{"id":"3c86f7c05418c62642aa705db5ba2384ad84b79b9462dac0e8f774d93125ac17c7fc76ef3ffdeee7413159c4269d922c9debf23f46622ead71aee6c848ada5d5","href":"https://static.observableusercontent.com/files/3c86f7c05418c62642aa705db5ba2384ad84b79b9462dac0e8f774d93125ac17c7fc76ef3ffdeee7413159c4269d922c9debf23f46622ead71aee6c848ada5d5","name":"110m_land.geojson","type":"application/geo+json","lastModified":1704575606757.097,"size":100851}] 2f:{"title":"Icosahedral projection","cells":[{"id":1377,"value":"# Icosahedral projection\n\n## Mapping the Earth: Optimal foldout on an icosahedron.\n\nThis is a fork from [Philippe Rivière](https://observablehq.com/@fil)'s notebook on ***Icosahedral projection***.\n\nThe map is draggable.","pinned":false,"hidden":false,"mode":"md"},{"id":1481,"value":"// This SVG is kept intentionally hidden\nmutable map_svg = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"icosahedron = map(projection.rotate(rotate))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1933,"value":"

\n ${tex`\\lambda`} = ${lambda.toFixed(2)}°\n
${tex`\\phi`} = ${phi.toFixed(2)}°\n
${tex`\\gamma`} = ${gamma.toFixed(2)}°\n

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1597,"value":"DOM.download(() => serialize(map_svg), \"icosahedron\", \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"md`##### Arrangement\n\nAs for the arrangement of the faces (see tile #), the default layout used is that proposed by Jarke J. van Wijk in Fig. 8 of “[Unfolding the Earth: Myriahedral Projections](https://doi.org/10.1179/000870408X276594),” *The Cartographic Journal*, Vol. 45 No. 1 pp. 32–42, February 2008.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"viewof parents = Inputs.select(new Map([[\"Jarke J. van Wijk\", parents_0], [\"Other\", parents_1]]), {value: parents_0, label: \"Arrangement\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"##### Optional features","pinned":false,"hidden":false,"mode":"md"},{"id":1447,"value":"viewof show_structure = Inputs.toggle({ label: \"Structure (tile #)\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"viewof show_equator = Inputs.toggle({ label: \"Equator\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":2116,"value":"#### 3D model\nHere is a model created from the icosahedral projection.","pinned":false,"hidden":false,"mode":"md"},{"id":2114,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":1181,"value":"md`-----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"angle = -60","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"mutable lambda = -80.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"mutable phi = 28","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"mutable gamma = -85.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"rotate = [lambda, phi, gamma]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"parents_0 = [-1,0,1,11,3,0,7,1,7,8,9,10,11,12,13,6,8,10,19,15]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"parents_1 = [-1,0,1,11,3,14,7,1,7,8,9,10,11,12,13,6,8,10,12,15]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"land_fill = \"#022\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"sphere_fill = \"#dfeef0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"graticule_stroke = \"#ccc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"land = {return await FileAttachment(\"110m_land.geojson\").json();}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"graticule = d3.geoGraticule()()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"projection = d3.geoIcosahedral()\n .parents(parents)\n .angle(angle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"path = d3.geoPath(projection.rotate(rotate))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3-selection@3\", \"d3-geo@3\", \"d3-fetch@3\", \"d3-geo-projection@4\", \"d3-geo-polygon@1.8\", \"d3-inertia@0.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"serialize = { \n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}