29:null 2a:["$","title",null,{"children":"H3 Hierarchical (Non)Containment | Nick Rabinowitz | Observable"}] 2f:T449,{ const outside = hexagons.filter(h3Index => { const bounds = h3.h3ToGeoBoundary(h3Index); return bounds.every(([lat, lng]) => h3.geoToH3(lat, lng, parentRes) !== parent) }).length; const parentArea = h3.cellArea(parent, h3.UNITS.km2); const fmtKm2 = (num) => num.toFixed(2) + ' km²'; const details = { 'Parent area': fmtKm2(parentArea), 'Total child area': fmtKm2(hexagons.reduce( (sum, h3Index) => sum + h3.cellArea(h3Index, h3.UNITS.km2), 0 )), 'Child area outside parent': fmtKm2(outsideArea), 'Child % outside parent': (outsideArea / parentArea * 100).toFixed(2) + '%', 'Children inside parent': hexagons.length - outside, 'Childen outside parent': outside }; return html` ${Object.keys(details).map(k => html` `)}

${k}	${details[k]}

` }30:[] 2d:{"id":"f5bc41a8447b5f18","slug":"h3-hierarchical-non-containment","title":"H3 Hierarchical (Non)Containment","thumbnail":"8566c07f52bdaca950e9b2293509338c3cc24a30c540a3686788c1dc89f62208","access_level":"public","create_time":"$D2021-03-17T21:55:16.147Z","update_time":"$D2025-10-06T17:30:44.425Z","view_time":null,"first_public_time":"$D2021-03-17T22:22:25.241Z","has_unpublished_edits":null,"fork":{"id":"47133822aea42d7a","slug":"h3-index-notebook-template","title":"H3 Index Notebook: Template","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"stars":6,"starred":false,"owner":{"type":"team","id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":"starter_2024"},"version":230,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null}],"members":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":{"id":"ea191cef9af22a51","slug":"h3","title":"H3","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"type":"notebook","body":{"title":"H3 Hierarchical (Non)Containment","cells":[{"id":0,"value":"md`# H3 Hierarchical (Non)Containment\n\nWhile H3 has a hierarchical relationship between cells at different resolutions, the hexagon cell shape doesn't allow for exact containment of a cell's descendants. Between each level, a fixed percentage of the children's area lies outside of the parent, and the same percentage of the parent's area is not included within its children. The margin of error is relatively stable across multiple resolutions. At > 2 resolutions finer than the parent, entire cells lie outside the parent's boundary.\n\nThis issue is an unavoidable consequence of using a hexagonal grid rather than a square one, a trade-off for the other advantages of using hexagons. You can find [more discussion of these tradeoffs in the docs](https://h3geo.org/docs/highlights/indexing).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof childDepth = slider({\n min: 0, \n max: 5, \n step: 1, \n value: 1, \n title: \"Child Depth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof map = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n \n const map = container.value = new mapboxgl.Map({\n container,\n center: [config.lng, config.lat],\n zoom: config.zoom,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n \n map.on('load', () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"parentRes = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"h3Resolution = parentRes + childDepth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"parent = h3.geoToH3(config.lat, config.lng, parentRes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"hexagons = {\n return h3.h3ToChildren(parent, h3Resolution);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"config = ({\n lat: 38.2,\n lng: -122.2,\n zoom: 6,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n renderH3IndexesToMap(map, 'hexes', hexagons, {'fill-color': 'steelblue'});\n renderH3IndexesToMap(map, 'parent', [parent], {'fill-color': 'red'});\n \n // Uncomment to double-check the difference\n // renderMapLayer({\n // map,\n // id: 'outside',\n // data: outsideDiff,\n // type: 'fill',\n // paint: {\n // 'fill-color': 'black',\n // 'fill-opacity': 0.4\n // }\n // });\n \n return md`*{map rendering logic}*`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"features = ({\n children: geojson2h3.h3SetToMultiPolygonFeature(hexagons),\n parent: geojson2h3.h3ToFeature(parent)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"outsideDiff = {\n const parentFeature = geojson2h3.h3ToFeature(parent);\n return {\n type: 'FeatureCollection',\n features: hexagons.map(h3Index => difference(geojson2h3.h3ToFeature(h3Index), parentFeature))\n .filter(Boolean)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"outsideArea = getArea(outsideDiff) / 1e6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"h3 = require('h3-js@3.7.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {renderH3IndexesToMap, renderMapLayer, h3ToGeoJSON} from '@nrabinowitz/mapbox-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"geojson2h3 = require('https://bundle.run/geojson2h3@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"difference = require('https://bundle.run/@turf/difference@6.0.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"getArea = {\n const module = await require('https://bundle.run/@turf/area@6.0.1');\n return module.default;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// CSS import required for the Mapbox map\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"