2d:null 2e:["$","title",null,{"children":"\"Flat-top\" hexagonal grid in an icosahedral foldout | linard-y | Observable"}] 33: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).34: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; }35:T907,{ 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.shared.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; }36:T729,getIcosahedronFoldout = (proj, options={}) => { let opts = Object.assign( { εε: 1e-3 }, options ); let nodes = []; const faces = []; const folds = []; const shared = []; const centroids = []; const branches = []; const εεRound = (d) => {return Math.round(d/opts.εε)*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 faceSide = εεRound(extent.width/5.5); // vrai, uniquement si proj.angle() == 0 const faceHeight = εεRound(extent.height/3); // vrai, uniquement si proj.angle() == 0 function recurse(data, parent) { nodes.push(data); let face = new Face(data, parent, proj, options); faces.push(face); if (data.children) { data.children.forEach(child => { recurse(child, face); }); } } recurse(proj.tree(), null); 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:T2234,class Face { constructor(data, parent, proj, options = {}) { let opts = Object.assign( { εε: 1e-7 }, options ); const ε = proj.precision(); const εRound = (d) => { return Math.round(d / ε) * ε; }; const εεRound = (d) => { return Math.round(d / opts.εε) * opts.εε; }; if (data?.transform) data.transform = data.transform.map(εRound); let rot = proj.rotate(); this.parent = parent ? parent.index : null; this.children = []; this.projection = proj.rotate([0, 0, 0]); let _geoVertices = data.face.slice(0, 3).map((d) => { return d3.geoInterpolate(d, data.centroid)(opts.εε); }); let _geoVertices_inv = _geoVertices.slice().reverse(); let _planVertices = _geoVertices.map(this.projection); this.vertices = isConvex(_planVertices) ? _geoVertices_inv : _geoVertices; _planVertices = this.vertices.map(this.projection); this.shape = Object({ type: "Polygon", coordinates: [this.vertices] }); this.shape.coordinates[0].push(this.vertices[0]); this.clipFace = d3.geoClipPolygon(this.shape); this.boundsX = d3.extent(_planVertices, (d) => d[0]); this.boundsY = d3.extent(_planVertices, (d) => d[1]); this.bounds = [ [this.boundsX[0], this.boundsY[0]], [this.boundsX[1], this.boundsY[1]] ]; 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)) return e; // boundary edge (no neighbour) return parent && e.id === parent.index ? data.shared // edge shared with the parent : e.shared; // edge shared with a child }); this.folds = []; this.branches = []; if (data.children) { data.children.forEach((child) => { this.children.push(child.id); this.folds.push({ type: "Feature", id: `${data.id} - ${child.id}`, geometry: { type: "LineString", coordinates: child.shared.map((e) => d3.geoInterpolate(e, data.centroid)(opts.εε) ) } }); 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)(opts.εε) ) }) ] : []; let area = d3.geoArea({ type: "Feature", properties: Object({}), geometry: Object({ type: "Polygon", coordinates: [data.face.concat([data.face[0]]).slice()] }) }); this.completness = (ref = { type: "Sphere", n: 20 }) => Math.round((10 * area) / (d3.geoArea(ref) / ref.n)) / 10; this.projection.rotate(rot); } 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] < y[0] ? 1 : 0; } else if (Math.abs(y[0] - y[2]) < ε) { return y[1] < y[2] ? 1 : 0; } else { return y[0] < y[1] ? 1 : 0; } } isUpwards2() { const backRot = this.projection.rotate(); this.projection.rotate([0, 0, 0]); let ε = 1e-3; let pts = this.vertices .slice(0, 3) .map((pt) => ({ x: this.projection(pt)[0], y: this.projection(pt)[1] })); let O = { x: this.projection(this.centroid)[0], y: this.projection(this.centroid)[1] }; let below = pts.filter((d) => d.y >= O.y).length; let M = null; let topdown = null; if (below > 1) { M = pts.filter((d) => d.y < O.y)[0]; topdown = 1; } else { M = pts.filter((d) => d.y >= O.y)[0]; topdown = -1; } let OM = { x: M.x - O.x, y: M.y - O.y }; let Oy = { x: 0, y: 1 }; this.projection.rotate(backRot); return { angle: (180 * Math.acos( (OM.x * Oy.x + OM.y * Oy.y) / (Math.sqrt(OM.x ** 2 + OM.y ** 2) * Math.sqrt(Oy.x ** 2 + Oy.y ** 2)) )) / Math.PI, M, O, topdown, below, pts }; } planarDivide(N) { let nodes = this.vertices.map(this.projection); nodes = isConvex(nodes) ? nodes.slice() : nodes.slice().reverse(); 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] * 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] ]); } } } const delaunay = d3.Delaunay.from(pts); const voronoi = delaunay.voronoi([ this.bounds[0][0] - 10, this.bounds[0][1] - 10, this.bounds[1][0] + 10, this.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) > 0.0002 ); } 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:[] 31:{"id":"31474d30247ea8cd","slug":"flat-top-hexagonal-grid-in-an-icosahedral-foldout","title":"\"Flat-top\" hexagonal grid in an icosahedral foldout","thumbnail":"6bd8bcf0633d3cf7e4ad715ca9d7064af9094143c5d84b1b690883b3cf10d6cc","access_level":"public","create_time":"$D2022-09-20T11:03:56.684Z","update_time":"$D2026-10-02T12:02:32.247Z","view_time":null,"first_public_time":"$D2022-09-22T16:24:33.309Z","has_unpublished_edits":null,"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":1910,"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,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"06f314aa212f58b3","slug":"mystara","title":"Mystara","owner":{"id":"9784867a3e59436b","login":"linard-y","name":""}},"type":"notebook","body":{"titling":"auto","title":"\"Flat-top\" hexagonal grid in an icosahedral foldout","cells":[{"id":1,"value":"# \"Flat-top\" hexagonal grid in an icosahedral foldout\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":862,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1097,"value":"## with H3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"viewof resolution = Inputs.range([0,29],{value: 0, step: 1, label:html`Resolution level`});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"## with foldout method `subdivide`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"icosahedron = getIcosahedronFoldout(proj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"icosahedron.faces[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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-6);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"scalefactor = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"import {polygonClip} from '@d3/polygonclip'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"h3 = import(\"h3-js@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 32:"$31:body"