2c:T92c,soccerball = { const phi = (1 + Math.sqrt(5)) / 2; const deg = 180 / Math.PI; const cyc = ([a, b, c]) => [[a, b, c], [b, c, a], [c, a, b]]; const norm = v => { const l = Math.hypot(...v); return v.map(x => x / l); }; const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a, b) => [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0] ]; const expand = bases => { const seen = new Set(), out = []; for (const b of bases) for (const p of cyc(b)) for (const sx of [1, -1]) for (const sy of [1, -1]) for (const sz of [1, -1]) { const v = [p[0] * sx || 0, p[1] * sy || 0, p[2] * sz || 0]; const key = v.map(x => x.toFixed(6)).join(); if (!seen.has(key)) { seen.add(key); out.push(v); } } return out; }; const verts = expand([[0, 1, 3 * phi], [1, 2 + phi, 2 * phi], [phi, 2, 2 * phi + 1]]).map(norm); const ico = expand([[0, 1, phi]]); const d2 = (a, b) => (a[0]-b[0])**2 + (a[1]-b[1])**2 + (a[2]-b[2])**2; const hexCenters = []; for (let i = 0; i < 12; i++) for (let j = i + 1; j < 12; j++) for (let k = j + 1; k < 12; k++) if (Math.abs(d2(ico[i], ico[j]) - 4) < 1e-9 && Math.abs(d2(ico[i], ico[k]) - 4) < 1e-9 && Math.abs(d2(ico[j], ico[k]) - 4) < 1e-9) hexCenters.push(norm([ ico[i][0] + ico[j][0] + ico[k][0], ico[i][1] + ico[j][1] + ico[k][1], ico[i][2] + ico[j][2] + ico[k][2] ])); const faces = [ ...ico.map(v => [norm(v), 5]), ...hexCenters.map(c => [c, 6]) ]; const coords = faces.map(([c, n]) => { const ring = verts.slice().sort((a, b) => dot(b, c) - dot(a, c)).slice(0, n); const e1 = norm(cross(ring[0], c)); const e2 = cross(c, e1); const angle = v => Math.atan2(dot(v, e2), dot(v, e1)); ring.sort((a, b) => angle(a) - angle(b)); const ll = ring.map(([x, y, z]) => [ Math.atan2(y, x) * deg, Math.asin(Math.max(-1, Math.min(1, z))) * deg ]); ll.push(ll[0]); if (d3.geoArea({type: "Polygon", coordinates: [ll]}) > Math.PI) ll.reverse(); return [ll]; }); return { pentagons: {type: "MultiPolygon", coordinates: coords.slice(0, 12)}, hexagons: {type: "MultiPolygon", coordinates: coords.slice(12)} }; }2d:[] 2a:{"title":"The Global Game","cells":[{"id":0,"value":"# The Global Game\n\nHeavily derived from [Mike Bostock's notebook on Map Projections](https://observablehq.com/@d3/tissots-indicatrix) this notebook projects a standard soccer ball pattern.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof projection = projectionInput({\n name: \"projection\",\n value: new URLSearchParams(html``.search).get(\"projection\") || \"orthographic\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"map = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n context.save();\n context.beginPath(), path(outline), context.clip(), context.fillStyle = \"#fff\", context.fillRect(0, 0, width, height);\n context.beginPath(), path(graticule), context.strokeStyle = \"#ccc\", context.stroke();\n context.beginPath(), path(soccerball.pentagons), context.fillStyle = \"#000\", context.fill();\n context.beginPath(), path(soccerball.hexagons), context.strokeStyle = \"#000\", context.stroke(); context.restore();\n context.beginPath(), path(outline), context.strokeStyle = \"#000\", context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"import {projectionInput} from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"downloadSVG = function(projection) {\n const path = d3.geoPath(projection);\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"downloadButton = {\n const button = document.createElement(\"button\");\n button.textContent = \"Download SVG\";\n button.onclick = () => {\n const blob = new Blob([downloadSVG(projection)], {type: \"image/svg+xml\"});\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"projection.svg\";\n a.click();\n URL.revokeObjectURL(a.href);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}