2b:null 2c:["$","title",null,{"children":"\"Flat-top\" hexagonal grid in an icosahedral foldout | linard-y | Observable"}] 32:T451,As far as I can understand, the h3.js library uses a regular hexagonal grid on each face of an icosahedron and projects each hexagon to the spherical surface of the earth using inverse gnomonic projection. If my understanding is correct, we should be able to recover a regular hexagonal grid by a `d3.geoIcosahedral` projection of the hexagons generated with h3. Nevertheless, in spite of my efforts to play with the rotations, it's tricky to find a "flat-top" grid with the pentagons well positioned on the cut points of the icosahedron foldout. I could find by trial and error the approximative rotation [-30.8, 24.1, -8.1]. But it's h3 resolution-dependent ! These values are only exploitable when the h3 resolution is equal to 1. As a consequence, I developped my own regular flat-top hexagonal grid but, **please, let me know if you know the way to calculate the exact rotation to apply to get a perfect flat-top grid with h3 **. One other interest of my own implementation is that we can get an flat-top grid at more intermediate resolution levels (at each level we operate a division by three).33:T84f,{ const extent = icosahedron.extent; const context = DOM.context2d(extent.width, extent.height); const path = d3.geoPath(icosahedron.projection, context); const h3Path = d3.geoPath(h3Projection, context); const noProjPath = d3.geoPath(d3.geoIdentity(), context); // CLIP context.save(); context.beginPath(); path({type: "Sphere"}); context.clip(); context.fillStyle = "#fff"; context.fillRect(0, 0, 1058.474, extent.height); context.restore(); // LAND context.save(); context.beginPath(); path(land); context.fillStyle = "#CCC"; context.fill(); context.restore(); // GRATICULE context.save(); context.beginPath(); path(d3.geoGraticule()()); context.strokeStyle = "#CCC"; context.stroke(); context.restore(); // CENTROID LABEL context.save(); context.beginPath(); path.pointRadius(6)({type:"MultiPoint", coordinates: icosahedron.centroids.map(f => f.geometry.coordinates)}); context.strokeStyle = "#000"; context.fillStyle = "#fff"; context.stroke(); context.fill(); context.save(); context.beginPath(); context.fillStyle = '#000000'; context.font = '8px Oswald'; context.textAlign = 'center'; icosahedron.centroids.map((d,i) => { let [X,Y] = icosahedron.projection(d.geometry.coordinates); context.fillText(i, X, Y+3); }); // H3 HEX GRID context.save(); context.beginPath(); context.fillStyle = "lightblue"; for (const penta of h3Hexagons.features.filter(d => d.properties.pentagon)) h3Path(penta); context.fill(); context.restore(); context.save(); context.beginPath(); context.strokeStyle = "#E00"; h3Path(h3Hexagons); context.stroke(); context.restore(); // FOLDING LINES context.save(); context.beginPath(); context.lineWidth = 1; //context.setLineDash([5, 5]); context.strokeStyle = "black"; icosahedron.folds.map(d => { path(d); context.stroke(); }); context.restore(); // SPHERE context.save(); context.beginPath(); path({type: "Sphere"}); context.strokeStyle = "#000"; context.stroke(); context.restore(); return context.canvas; }34:T906,{ const extent = icosahedron.extent; const context = DOM.context2d(extent.width, extent.height); const path = d3.geoPath(icosahedron.projection, context); const noProjPath = d3.geoPath(d3.geoIdentity(), context); // CLIP context.save(); context.beginPath(); path({type: "Sphere"}); context.clip(); context.fillStyle = "#fff"; context.fillRect(0, 0, extent.width, extent.height); context.restore(); // LAND context.save(); context.beginPath(); path(land); context.fillStyle = "#CCC"; context.fill(); context.restore(); // GRATICULE context.save(); context.beginPath(); path(d3.geoGraticule()()); context.strokeStyle = "#CCC"; context.stroke(); context.restore(); // CENTROID LABEL context.save(); context.beginPath(); path.pointRadius(6)({type:"MultiPoint", coordinates: icosahedron.centroids.map(f => f.geometry.coordinates)}); context.strokeStyle = "#000"; context.fillStyle = "#fff"; context.stroke(); context.fill(); context.save(); context.beginPath(); context.fillStyle = '#000000'; context.font = '8px Oswald'; context.textAlign = 'center'; icosahedron.centroids.map((d,i) => { let [X,Y] = icosahedron.projection(d.geometry.coordinates); context.fillText(i, X, Y+3); }); // HEX GRID context.save(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = "#E00"; icosahedron.faces.map(face => { path(face.subdivide(subdivision).geo); context.stroke(); }) context.restore(); context.save(); context.beginPath(); context.fillStyle = "lightblue"; context.strokeStyle = "#E00"; icosahedron.faces.map(face => { face.subdivide(subdivision).geo.features.filter(h =>h.geometry.coordinates[0].length==4).map(h => { path(h); context.fill(); context.stroke(); }) }) context.restore(); // FOLDING LINES context.save(); context.beginPath(); context.lineWidth = 1; //context.setLineDash([5, 5]); context.strokeStyle = "black"; icosahedron.folds.map(d => { path(d); context.stroke(); }); context.restore(); // SPHERE context.save(); context.beginPath(); context.lineWidth = 1; path({type: "Sphere"}); context.strokeStyle = "black"; context.stroke(); context.restore(); return context.canvas; }35:T763,// OLD version /* foldout = (options) => { let opts = Object.assign( { scalefactor: 1, angle:0, rotation:[0,0,0], translation:[0,0], ε: 1e-5 }, options ); const εRound = (d) => {return Math.round(d/opts.ε)*opts.ε;} const proj = d3.geoIcosahedral() .scale(opts.scalefactor*100) .rotate(opts.rotation) .translate(opts.translation) .angle(opts.angle) .center([275.0000000000001, 129.9037644322285]) .precision(opts.ε); const path = d3.geoPath(proj); const bounds = path.bounds({type: "Sphere"}); const extent = ({width:εRound(bounds[1][0]-bounds[0][0]), height:εRound(bounds[1][1]-bounds[0][1])}); //const extent = ({width:εRound(faceSide*5.5), height:εRound(faceHeight*3)}); const faceSide = εRound(extent.width/5.5); const faceHeight = εRound(extent.height/3); let nodes = []; let faces = []; function recurse(data) { nodes.push(data); let face = new Face(data, proj, opts); faces.push(face); if (data.children) { data.children.forEach(child => {recurse(child)}) } } recurse(proj.tree()); nodes = Array.from(new Set(nodes.map(d => d.face.slice(0,3)).flat())); faces.sort(function(a, b) { return ((a.index < b.index) ? -1 : ((a.index > b.index) ? 1 : 0));}); let folds = []; faces.map(d => {if (d.folds.length>0) return d.folds.map(d=>folds.push(d))}); let shared = []; faces.map(d => {if (d.shared.length>0) return shared.push(d.shared[0])}); let centroids = []; faces.map(d => centroids.push(d.centroid)); return {nodes:nodes, faces:faces, folds:folds, shared:shared, vertices:faces.map(f => f.vertices), centroids: centroids, projection:proj, extent:extent, bounds:bounds, faceSide:faceSide, faceHeight:faceHeight, scaleFactor:opts.scalefactor, scale:proj.scale(), rotation:proj.rotate(), tanslation:proj.translate()} }*/ 36:T68b,getIcosahedronFoldout = (proj) => { let nodes = []; const faces = []; const folds = []; const shared = []; const centroids = []; const branches = []; const εε = 1e-3; const εεRound = (d) => {return Math.round(d/εε)*εε;} const path = d3.geoPath(proj); const bounds = path.bounds({type: "Sphere"}); const extent = ({width:εεRound(bounds[1][0]-bounds[0][0]), height:εεRound(bounds[1][1]-bounds[0][1])}); const faceSide = εεRound(extent.width/5.5); // vrai, uniquement si angle == 0 const faceHeight = εεRound(extent.height/3); // vrai, uniquement si angle == 0 function recurse(data) { nodes.push(data); let face = new Face(data, proj); faces.push(face); if (data.children) { data.children.forEach(child => {recurse(child)}) } } recurse(proj.tree()); nodes = Array.from(new Set(nodes.map(d => d.face.slice(0,3)).flat())); faces.sort(function(a, b) { return ((a.index < b.index) ? -1 : ((a.index > b.index) ? 1 : 0));}); faces.map(d => {if (d.folds.length>0) return d.folds.map(d=>folds.push(d))}); faces.map(d => {if (d.shared.length>0) return shared.push(d.shared[0])}); faces.map(d => centroids.push({type:"Feature", id:d.index, geometry:{type:"Point", coordinates:d.centroid}})); centroids.sort(function(a, b) { return ((a.id < b.id) ? -1 : ((a.id > b.id) ? 1 : 0));}); faces.map(d => {if (d.branches.length>0) return d.branches.map(d=>branches.push(d))}); return {nodes, faces, folds, shared, vertices:faces.map(f => f.vertices), centroids, branches, projection:proj, extent, bounds, faceSide, faceHeight, scale:proj.scale(), rotation:proj.rotate(), tanslation:proj.translate()} }37:T1a1a,class Face { constructor(data, proj) { const ε = proj.precision(); const εRound = (d) => {return Math.round(d/ε)*ε;} const εε = 1e-6; const εεRound = (d) => {return Math.round(d/εε)*εε;} if (data?.transform) data.transform = data.transform.map(εRound); this.projection = proj; let path = d3.geoPath(proj); let _geoVertices = data.face.slice(0,3).map((d)=>{return d3.geoInterpolate(d, data.centroid)(εε);}); let _geoVertices_inv = _geoVertices.slice().reverse(); let _planVertices = _geoVertices.map(this.projection); this.vertices = isConvex(_planVertices) ? _geoVertices_inv : _geoVertices; this.shape = Object({type: "Polygon", coordinates: [this.vertices]}); this.shape.coordinates[0].push(this.vertices[0]); this.bounds = d3.geoPath(proj).bounds(this.shape); this.extent = ({width:εεRound(this.bounds[1][0]-this.bounds[0][0]), height:εεRound(this.bounds[1][1]-this.bounds[0][1])}); this.centroid = data.centroid; this.index = data.id; this.edges = []; data.edges.map((e) => { if (Array.isArray(e)) { this.edges.push(e); } else { this.edges.push(e.shared); } }); this.folds = []; this.branches = []; if (data.children) { data.children.forEach(child => { this.folds.push({ type:"Feature", id: `${data.id} - ${child.id}`, geometry: { type:"LineString", coordinates: child.shared.map(e => d3.geoInterpolate(e, data.centroid)(εε)) } }); this.branches.push({ type:"Feature", id: `${data.id} - ${child.id}`, geometry: { type:"LineString", coordinates: [data.centroid,child.centroid] } }); }); } this.shared = data.shared?[Object({ index: data.id, type:"LineString", coordinates:data.shared.map(e => d3.geoInterpolate(e, data.centroid)(εε))})]:[]; let area = d3.geoArea({ type: 'Feature', properties: Object({}), geometry:Object({ type:'Polygon', coordinates: [data.face.concat([data.face[0]]).slice()] }) }); this.completness = Math.round(10*area/(d3.geoArea({type:"Sphere"})/20))/10; } isUpwards() { let ε = 1e-3; let y = this.vertices.slice(0,3).map(pt => this.projection(pt)[1]); if (Math.abs(y[0]-y[1])<ε){ return (y[2] d / N); if ((i+j)%3==0) { pts.push([ c[0] * nodes[0][0] + c[1] * nodes[1][0] + c[2] * nodes[2][0], c[0] * nodes[0][1] + c[1] * nodes[1][1] + c[2] * nodes[2][1] ]) } } } return pts; } subdivide(sub) { let rotation = this.projection.rotate(); this.projection.rotate([0,0,0]); const corners = this.vertices.map(this.projection); const tri = isConvex(corners) ? corners.slice() : corners.slice().reverse(); const barycentre = d3.polygonCentroid(tri); const n = 3*(sub+1); const scaleFactor = this.projection.scale(); let pts = []; for (let i = 0; i <= n; i++) { for (let j = 0; j <= i; j++) { const c = [n - i, i - j, j].map(d => d / n); if ((i+j)%3==0) { pts.push([ c[0] * tri[0][0] + c[1] * tri[1][0] + c[2] * tri[2][0], c[0] * tri[0][1] + c[1] * tri[1][1] + c[2] * tri[2][1] ]) } } } let bounds = d3.geoPath(this.projection).bounds({type: "Sphere"}); const delaunay = d3.Delaunay.from(pts); const voronoi = delaunay.voronoi([bounds[0][0]-10, bounds[0][1]-10, bounds[1][0]+10, bounds[1][1]+10]); var planarHex = Object({ type: "FeatureCollection", features: pts.map((d, i) => createFeature(d, i, polygonClip(tri, voronoi.cellPolygon(i)))) }); function triangulate(d) { let c = d.properties.centroid.coordinates; let p = d.geometry.coordinates[0].slice(); p.push(c); let delaunay = d3.Delaunay.from(p); return Array.from(delaunay.trianglePolygons()).filter(t => d3.polygonArea(t) > 1); } planarHex.features.map(d => { if (d.geometry.coordinates[0].length==4) { d.properties['completeness'] = 1/6; d.properties['triangles'] = d.geometry.coordinates; } else if (d.geometry.coordinates[0].length==5) { d.properties['completeness'] = 1/2; d.properties['triangles'] = triangulate(d); } else if (d.geometry.coordinates[0].length==7) { d.properties['completeness'] = 1; d.properties['triangles'] = triangulate(d); } else if (d.geometry.coordinates[0].length>7) { // occurs sometimes due to clipping approximation, have to be fixed... d.properties['completeness'] = 1; d.properties['triangles'] = triangulate(d); } else { d.properties['completeness'] = 0; // error d.properties['triangles'] = triangulate(d); } }); let centralHex = planarHex.features.filter(h => d3.polygonContains(h.geometry.coordinates[0], barycentre))[0].properties.id let geoHex =Object({ type: "FeatureCollection", features: planarHex.features.map(d=> Object({ type:'Feature', properties: Object({ centroid: Object({ type: 'Point', coordinates: this.projection.invert(d.properties.centroid.coordinates) }), id: d.properties.id, completeness: d.properties.completeness, triangles: d.properties.triangles.map(t => Object({type:'Polygon', coordinates: isConvex(t.map(this.projection.invert)) ? [t.map(this.projection.invert)] : [t.map(this.projection.invert).reverse()], properties:{centroid: this.projection.invert(d3.polygonCentroid(t))}})) }), geometry: Object({ type:'Polygon', coordinates: [d.geometry.coordinates[0].map(this.projection.invert)] }) })) }) this.projection.rotate(rotation); return {planar:planarHex, geo:geoHex, centralHex:centralHex}; } }38:[] 2f:{"id":"31474d30247ea8cd","slug":"flat-top-hexagonal-grid-in-an-icosahedral-foldout","title":"\"Flat-top\" hexagonal grid in an icosahedral foldout","thumbnail":"552b0d82b3f6daa2f69974afe2b9f4b9122b9106c8055d1ee68a4af579c57e46","access_level":"public","create_time":"$D2022-09-20T11:03:56.684Z","update_time":"$D2026-09-05T18:24:16.282Z","view_time":null,"first_public_time":"$D2022-09-22T16:24:33.309Z","fork":{"id":"5d7835e92e40c5ae","slug":"flat-h3-grid-via-gnomonic-projection","title":"\"Flat\" H3 Grid via Gnomonic Projection","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"stars":5,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":1825,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"06f314aa212f58b3","slug":"mystara","title":"Mystara","owner":{"id":"9784867a3e59436b","login":"linard-y","name":""}},"type":"notebook","body":{"title":"\"Flat-top\" hexagonal grid in an icosahedral foldout","cells":[{"id":1,"value":"md`# \"Flat-top\" hexagonal grid in an icosahedral foldout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1097,"value":"## with H3","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"viewof resolution = Inputs.range([0,29],{value: 0, step: 1, label:html`Resolution level`});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"viewof rotation = Inputs.form([\n Inputs.range([-90, 90], {value:-30.8, step: 0.01, label: \"AngleX\"}),\n Inputs.range([-90, 90], {value:24.1, step: 0.01, label: \"AngleY\"}),\n Inputs.range([-90, 90], {value:-8.1, step: 0.01, label: \"AngleZ\"})\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"h3Projection = d3\n .geoIcosahedral()\n .faceProjection(face => {\n const c = face.site.map(d => -d);\n c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0;\n return d3\n .geoProjection(d3.geoGnomonicRaw)\n .rotate(c)\n .translate([0, 0]);\n })\n .rotate(rotation)\n .angle(0)\n .fitExtent(icosahedron.bounds, { type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"h3Hexagons = Object({\n type: \"FeatureCollection\",\n features: h3.getRes0Cells()\n .map(i => h3.cellToChildren(i, resolution))\n .flat()\n .map(d => ({\n type: \"Feature\",\n properties: { id: d, pentagon: h3.isPentagon(d) },\n geometry: {\n type: \"Polygon\",\n coordinates: [h3.cellToBoundary(d, true).reverse()]\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"## with foldout method `subdivide`","pinned":false,"hidden":false,"mode":"md"},{"id":1232,"value":"viewof subdivision = Inputs.range([0,29],{value: 1, step: 1, label:html`Number of subdivision cycle`});","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"// OLD version\n// icosahedron2 = foldout({scalefactor: 1, translation:[223.8,76]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"icosahedron = getIcosahedronFoldout(proj)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1769,"value":"proj = d3.geoIcosahedral()\n .scale(scalefactor*100)\n .rotate([0,0,0])\n .translate([223.5,76])\n .angle(0)\n .center([275.0000000000001, 129.9037644322285])\n .precision(1e-5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"scalefactor = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"createFeature = (c, i, h) => {\n return Object({\n type: 'Feature',\n properties: Object({ centroid:Object({ type: 'Point', coordinates:c}), id:i }),\n geometry:Object({ type:'Polygon', coordinates: [h.slice()] })\n })\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"function isConvex(points) {\n const n = points.length;\n if (n<3) return true;\n const [rx, ry] = points[n - 2];\n let [qx, qy] = points[n - 1];\n let vx = rx - qx, vy = ry - qy;\n for (let i = 0; i < n; ++i) {\n const [px, py] = points[i];\n const wx = qx - px, wy = qy - py;\n if (wx * vy < wy * vx) return false;\n if (wx || wy) vx = wx, vy = wy;\n qx = px, qy = py;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"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":162,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"import {polygonClip} from '@d3/polygonclip'","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@2\", \"d3-geo-polygon\", \"d3-tile@1\", \"d3-geo-voronoi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"h3 = import(\"h3-js@4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"