30:T4ba,{ const height = Math.min(600, width), projection = d3 .geoOrthographic() .rotate([-110, -35]) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), context = DOM.context2d(width, height), path = d3 .geoPath(projection) .context(context) .pointRadius(Math.min(10, 100 / N) / 1); const _i = g.slice(0, 12), _e = g.slice(12, 12 + 30 * (N - 1)), _v = g.slice(12 + 30 * (N - 1)); function render() { context.clearRect(0, 0, width, height); context.lineWidth = .25; context.beginPath(); path(d3.geoGraticule10()); context.stroke(); context.beginPath(); path({ type: "MultiPoint", coordinates: _v }); context.fillStyle = palette(2); context.fill(); context.beginPath(); path({ type: "MultiPoint", coordinates: _e }); context.fillStyle = palette(1); context.fill(); context.beginPath(); path({ type: "MultiPoint", coordinates: _i }); context.fillStyle = palette(0); context.fill(); } return d3 .select(context.canvas) .call( drag(projection) .on("drag.render", render) .on("end.render", render) ) .call(render) .node(); }31:T452,{ const height = Math.min(600, width); projection .precision(0.1) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }); const context = DOM.context2d(width, height), path = d3.geoPath(projection).context(context); let v = null; function render() { context.clearRect(0, 0, width, height); context.beginPath(); path({ type: "Sphere" }); context.stroke(); context.beginPath(); path(world); context.fillStyle = "#ddd"; context.fill(); if (v) { context.fillStyle = palette(0); context.beginPath(); path({ type: "FeatureCollection", features: v.polygons().features.slice(0, 12) }); context.fill(); context.lineWidth = .25; context.beginPath(); path((showTriangles ? v.mesh : v.cellMesh)()); context.stroke(); } } yield d3 .select(context.canvas) .call( drag(projection) .on("drag.render", render) .on("end.render", render) ) .call(render) .node(); await visibility(); v = d3.geoVoronoi(points); render(); }32:T578,md`_Notes_ This grid can be used to create clusters, interpolations, 3D models, contours, etc. Let me know what you come up with! A different but related discrete global grid system (DGGS) has been studied by Denis White, A. Jon Kimerling, Kevin Sahr and Lian Song in [Comparing area and shape distortion on polyhedral-based recursive partitions of the sphere](https://www.researchgate.net/publication/220649496_Comparing_Area_and_Shape_Distortion_on_Polyhedral-Based_Recursive_Partitions_of_the_Sphere), 1998. [H3](https://observablehq.com/@fil/h3-oddities) is another example of an hexagon-based DGGS. We could also create one from the [geodesic](https://observablehq.com/@mbostock/geodesic-rainbow) distribution, or with an [icosphere](https://observablehq.com/@mourner/fast-icosphere-mesh). There are probably lots of interesting comparisons to make between these proposals, in terms of speed, area and angular distortions, etc. I have started [here](https://observablehq.com/d/93922be7718f42bf). With *N* = 2 the map looks a bit like a soccer ball, but it’s not. If you look closely at the hexagons you’ll see that the sides which touch pentagons are longer than those which touch other hexagons. It _might_ be possible to have a true soccer ball by weighting the Voronoi. Thank you [Job](https://observablehq.com/@jobleonard) for the comments. As always, suggestions are very welcome!`33:T5f3,projection = ({ Airocean: d3 .geoAirocean() .rotate([-83.65929 + 1e-9, 25.44458, -87.45184]) // +1e-9 avoids a tiny bug .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), "Gnomonic icosahedral": d3 .geoIcosahedral() .faceProjection(face => { const c = face.site.map(d => -d); c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0; return d3 .geoProjection(d3.geoGnomonicRaw) .rotate(c) .translate([0, 0]); }) .rotate([-83.65929, 25.44458, -87.45184]) .angle(60) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), "Gray-Fuller icosahedral": d3 .geoIcosahedral() .faceProjection(face => { var c = face.site.map(d => -d); c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0; return d3 .geoProjection(d3.geoGrayFullerRaw()) .rotate(c) .translate([0, 0]); }) .rotate([-83.65929, 25.44458, -87.45184]) .angle(60) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), Orthographic: d3 .geoOrthographic() .rotate([-110, -35]) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), "Azimuthal equal-area": d3 .geoAzimuthalEqualArea() .rotate([-110, -35]) .clipAngle(54) .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }), Mercator: d3 .geoMercator() .fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" }) }[projname])34:[] 2e:{"title":"The Gray-Fuller spatial grid","cells":[{"id":0,"value":"md`# The Gray-Fuller spatial grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"{\n const context = DOM.context2d(width, height),\n path = d3\n .geoPath(d3.geoIdentity().scale(height * .26))\n .context(context)\n .pointRadius(Math.min(20, 190 / N));\n\n context.translate(width / 2, height * .05);\n\n const _v = [...triangleVertices(N)],\n _i = [...triangleInner(N)],\n _e = [...triangleEdges(N)];\n\n context.strokeStyle = \"black\";\n context.beginPath();\n path({ type: \"LineString\", coordinates: [..._v, _v[0]] });\n context.stroke();\n\n context.beginPath();\n path({ type: \"MultiPoint\", coordinates: _v });\n context.fillStyle = palette(0);\n context.fill();\n\n context.beginPath();\n path({ type: \"MultiPoint\", coordinates: _e });\n context.fillStyle = palette(1);\n context.fill();\n\n context.beginPath();\n path({ type: \"MultiPoint\", coordinates: _i });\n context.fillStyle = palette(2);\n context.fill();\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"md`The points in this planar triangle, its edges divided in *N* = ${N} segment${\n N > 1 ? \"s\" : \"\"\n}, are spaced equally. We project them onto a face of a spherical icosahedron with the [Gray-Fuller projection](https://observablehq.com/@fil/buckminster-fullers-triangle-transformation)’s inverse function. That transformation being quite nice, the corresponding spherical points will be gently spaced on the sphere. “Gently” is the best we can get, as we know it’s [impossible](https://observablehq.com/@fil/h3-oddities#dggs) to have a regular distribution.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof N = slider({ min: 1, max: 50, value: 21, step: 1, description: \"N\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"md`In order to fill the whole sphere, we copy the inverse-projected points onto each of the 20 faces of the icosahedron—taking care not to duplicate the points on the 30 edges and the 12 vertices, and obtain this array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"g = grid(N)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1288,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"md`The total number of points is ${tex`12 + 30 \\times ${N -\n 1} + 20 \\times ${((N - 1) * (N - 2)) / 2} = 10 N^2+2 = ${10 * N * N +\n 2}`}. They appear in that order (vertices, edges, inner points) in the array, so we can identify them, like here to set their colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"md`If we want to use this distribution to represent some phenomenon on the Earth, it is a good idea to rotate the whole set so as to align it with Buckminster Fuller’s Dymaxion design. This will put the 12 vertices in the Oceans.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"points = g\n .map(d3.geoRotation([36, 0, 0]))\n .map(d3.geoRotation(d3.geoAirocean().rotate()).invert)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1560,"value":"md`We can now arrange a [Delaunay](https://github.com/Fil/d3-geo-voronoi) triangulation from these points. The 12 pentagons of the Voronoi diagram appear in the 12 locations identified by Fuller.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"viewof projname = select({\n options: [\n \"Orthographic\",\n \"Airocean\",\n \"Gnomonic icosahedral\",\n \"Gray-Fuller icosahedral\",\n \"Azimuthal equal-area\",\n \"Mercator\"\n ],\n description: \"Projection for the map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"viewof showTriangles = checkbox([\"Show triangles\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"md`---\n\nUsage:\n~~~{js}\nimport {grid} from \"@fil/gray-fuller-grid\"\ngrid(N)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"md`---\n\n## Planar triangle computations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"coords = (radius) => (row, col) => [\n (col - row / 2) * radius * Math.sqrt(3),\n row * radius * (3 / 2)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"function* triangleInner(N) {\n const c = coords(radius(N));\n for (let row = 1; row < N; row++)\n for (let col = 1; col < row; col++) yield c(row, col);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1303,"value":"function* triangleEdges(N) {\n for (let row = 1; row <= N; row++) {\n let start = 0,\n end = row,\n step = row;\n if (row === N) {\n start = 1;\n end = N - 1;\n step = 1;\n }\n for (let col = start; col <= end; col += step) yield coords(row, col);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1463,"value":"function* triangleVertices(N) {\n for (let [col, row] of [[0, 0], [0, N], [N, N]]) yield coords(row, col);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1535,"value":"md`## Spherical triangle computations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"theta = atan(0.5) * degrees","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"// One of the icosahedron’s 20 equilateral triangles\ntriangle = ({\n type: \"Polygon\",\n coordinates: [[[0, theta], [36, -theta], [-36, -theta], [0, theta]]]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1229,"value":"c = d3.geoCentroid(triangle)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"tprojection = d3\n .geoProjection(d3.geoGrayFullerRaw()) // d3.geoGnomonicRaw\n .rotate([-c[0], -c[1]])\n .center([0, triangle.coordinates[0][0][1] - c[1]])\n .scale(1)\n .translate([0, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1630,"value":"path = d3.geoPath(tprojection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"vertices = [[0, 90], [0, -90]].concat(\n Array.from({ length: 10 }, function(_, i) {\n var phi = ((i * 36 + 180) % 360) - 180;\n return [phi, i & 1 ? -theta : theta];\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"bounds = path.bounds(triangle)","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"radius = (N) => (bounds[1][1] - bounds[0][1]) / N / 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1322,"value":"function grid(N) {\n const _i = [],\n _e = [],\n _v = [];\n const theta = atan(0.5) * degrees;\n for (let h of triangleInner(N)) {\n h = tprojection.invert(h);\n for (let i = 0; i < 10; i++)\n _i.push([h[0] + i * 36, (i % 2 ? -1 : 1) * h[1]]);\n h = d3.geoRotation([0, 90 - theta, 180])(h);\n for (let i = 0; i < 5; i++) _i.push([h[0] + i * 72, h[1]]);\n for (let i = 0; i < 5; i++) _i.push([36 - h[0] + i * 72, -h[1]]);\n }\n\n for (let i = 0; i < vertices.length; i++) {\n const h = vertices[i];\n _v.push(h);\n for (let j = i + 1; j < vertices.length; j++) {\n const k = vertices[j];\n\n // this test is a shortcut for listing the edges.\n if (Math.abs(d3.geoDistance(h, k) - 1.1) < 0.01) {\n const i = d3.geoInterpolate(h, k);\n for (let n = 1; n < N; n++) _e.push(i(n / N));\n }\n }\n }\n\n return [_v, _e, _i].flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1646,"value":"md`---\n_imports_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"world = d3.json(\n \"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 520","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"import { atan, degrees } from \"@fil/math\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-polygon@1.8\", \"d3-geo-voronoi@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"import { checkbox, select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1673,"value":"import { drag } from \"@d3/versor-dragging\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1795,"value":"// https://www.colourlovers.com/palette/932683\npalette = d3.scaleOrdinal([0, 1, 2], [\"#FF9E9D\", \"#3FB8AF\", \"#DAD8A7\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1731,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}