2d:null 2e:["$","title",null,{"children":"The Global Game | Matt Khinda | Observable"}] 33: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)} }; }34:[] 31:{"id":"0cbbf1a0f11a5c8f","slug":"the-global-game","title":"The Global Game","thumbnail":"5c76062f0f0e8b7f0df8184b551a242d9dc468eb0629de5377ff5f6f934f195d","access_level":"public","create_time":"$D2026-07-10T18:59:32.189Z","update_time":"$D2026-07-17T01:58:00.500Z","view_time":null,"first_public_time":"$D2026-07-17T21:39:14.190Z","has_unpublished_edits":null,"fork":{"id":"6d1810ba8f5ef602","slug":"tissots-indicatrix","title":"Tissot’s indicatrix","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":4,"starred":false,"owner":{"type":"team","id":"bd1a04fba6aa0b96","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/d3ce820bb0a0da07120f1d18fc5462f4d2dda95075bbb7bd7ac6113a256128dd","tier":"starter_2024"},"version":300,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ed01765dbd656ee","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/381c8bb4edddbcd7e2319cbd390f7477b1b4934289bf039a4e881d2d3711d20e","tier":null}],"members":[{"type":"individual","id":"7ed01765dbd656ee","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/381c8bb4edddbcd7e2319cbd390f7477b1b4934289bf039a4e881d2d3711d20e","tier":null,"role":"editor"},{"type":"team","id":"bd1a04fba6aa0b96","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/d3ce820bb0a0da07120f1d18fc5462f4d2dda95075bbb7bd7ac6113a256128dd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"import {projectionInput} from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"downloadSVG = function(projection) {\n const path = d3.geoPath(projection);\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"