31:T8a4,function map(projection, config) { const cfg = config || {showFolds: true, showSites: true}; 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 = [], id = 0; function recurse(face) { var site = d3.geoCentroid({type:"MultiPoint", coordinates:face.face}); site.id = id++; sites.push(site); if (face.children) face.children.forEach(function(child) { var f = d3.geoInterpolate(...child.shared); folds.push([projection(f(0.0001)), projection(f(1-0.0001))]); recurse(child); }); } recurse((projection.tree || projection.root)()); // sites & numbers if (cfg.showSites) { 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 if (cfg.showFolds) { folds.forEach(fold => { context.beginPath(), context.lineWidth = 0.5, context.setLineDash([3,4]), context.strokeStyle = "#888", context.moveTo(...fold[0]), context.lineTo(...fold[1]), context.stroke(); }); } // restore the projection’s rotate projection.rotate(rotate); return context.canvas; }32:[] 2f:{"title":"Cahill-Keyes projection: rotate it.","cells":[{"id":0,"value":"md`# Cahill-Keyes projection: rotate it.\n\nGive it a spin around!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"{\n const {λ, φ, γ} = λφγ;\n return map(d3.geoCahillKeyes().rotate([λ,φ,γ]), {showFolds: true, showSites: false})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"viewof λφγ = {\n const form = html``;\n form.oninput = () => form.value = {\n 'λ': form.aout.value = form.ain.valueAsNumber,\n 'φ': form.bout.value = form.bin.valueAsNumber,\n 'γ': form.cout.value = form.cin.valueAsNumber\n };\n form.oninput(); // Set the initial value.\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"md`## Credits\n\n* map function from [@fil/cahill-keyes-projection](https://beta.observablehq.com/@fil/cahill-keyes-projection)\n* multiple slider from [@jfirebaugh/sunflower](https://beta.observablehq.com/@jfirebaugh/sunflower)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`-----\n\n_Technical zone_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3-selection\", \"d3-fetch\", \"d3-geo\", \"d3-geo-polygon\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"land = {\n const topojson = await require(\"topojson\");\n const world = await d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\");\n return topojson.feature(world, world.objects.land);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"ratio = {\n var projection = d3.geoCahillKeyes(),\n path = d3.geoPath(projection),\n b = path.bounds(land);\n return (b[1][0] - b[0][0]) / (b[1][1] - b[0][1])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"height = width / ratio","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}