31:T79e,function map(projection) { const context = DOM.context2d(width, width / 2); projection.fitExtent([[2,2],[width-2, width/2-2]], {type:"Sphere"}) var path = d3.geoPath(projection, context); context.beginPath(), path({type:"Sphere"}), context.fillStyle = "#fefef6", context.fill(); context.beginPath(), path(d3.geoGraticule()()), context.strokeStyle = "#ccc", context.stroke(); context.beginPath(), path(land), context.fillStyle = "black", context.fill(); context.beginPath(), path({type: "Sphere"}), context.strokeStyle = "#000", context.stroke(); // Polyhedral projections expose their structure as projection.root() // To draw them we need to cancel the rotate var rotate = projection.rotate(); projection.rotate([0,0,0]); // run the tree of faces to get all sites and folds var sites = [], folds = []; function recurse(face) { var site = face.site; site.id = face.id; sites.push(site); if (face.children) face.children.forEach(function(child){ folds.push({type:"LineString", coordinates: child.shared.map( e => d3.geoInterpolate(e, site)(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); }); // folding lines folds.forEach(fold => { context.beginPath(), context.lineWidth = 0.5, context.setLineDash([3,4]), context.strokeStyle = "#888", path(fold), context.stroke(); }); // restore the projection’s rotate projection.rotate(rotate); return context.canvas; }32:[] 2f:{"title":"Experimental two world projections","cells":[{"id":0,"value":"md`# Experimental two world projections\n\nExperimental two world projections using [d3-geo-polygon](https://github.com/d3/d3-geo-polygon). In real applications you should probably use d3.geoMollweideHemispheres() instead of this playground [#](https://github.com/d3/d3-geo-projection#geoInterruptedMollweideHemispheres).\n\nSee other [polyhedral projections](https://beta.observablehq.com/@fil/polyhedral-projections-with-d3-geo-polygon).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"map(geoTwoWorld())","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"viewof lambda = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"viewof phi = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof psi = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"viewof faceProjection = html`