2b:null 2c:["$","title",null,{"children":"H3 Index Inspector | Matthew Clemens | Observable"}] 31:T4f9,function inspect(indexes) { if (!indexes.length) { return null; } const permalink = `${document.baseURI}#${encodeURIComponent(inputText)}`; if (indexes.length === 1) { const h3Index = indexes[0]; const resolution = h3.h3GetResolution(h3Index); const edges = h3.getH3UnidirectionalEdgesFromHexagon(h3Index); const units = cellUnits(h3Index); return { h3Index, resolution, center: h3.h3ToGeo(h3Index), parent: resolution > 0 ? h3.h3ToParent(h3Index, resolution - 1) : null, children: resolution < 15 ? h3.h3ToChildren(h3Index, resolution + 1) : null, neighbors: edges.map(h3.getDestinationH3IndexFromUnidirectionalEdge), baseCell: h3.h3GetBaseCell(h3Index), 'cellArea': [h3.cellArea(h3Index, units.area), units.area], 'avg edge length': [ edges.reduce( (sum, edge) => sum + h3.exactEdgeLength(edge, units.dist), 0 ) / edges.length, units.dist ], 'icosahedron faces': h3.h3GetFaces(h3Index), vertexes: h3.h3ToGeoBoundary(h3Index).length, isPentagon: h3.h3IsPentagon(h3Index), permalink }; } const resolutions = [...new Set(indexes.map(h3.h3GetResolution))]; return {indexes, resolutions, permalink}; }32:[] 2f:{"id":"2177eeddc8591be7","slug":null,"title":"H3 Index Inspector","thumbnail":"664711ba943b16ff326e7b4552cb00c48b5ca091438d0f4aae22b71ee554fbcd","access_level":"public","create_time":"$D2024-09-18T21:22:06.861Z","update_time":"$D2024-09-18T21:22:06.861Z","view_time":null,"first_public_time":"$D2024-09-18T21:22:06.861Z","has_unpublished_edits":null,"fork":{"id":"de4b3ba9ef3c540d","slug":"h3-index-inspector","title":"H3 Index Inspector","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"97cbe6f543b4fb0f","login":"enjoylife","name":"Matthew Clemens","avatar_url":"https://avatars-next.observableusercontent.com/bc5d14341a7fc847a47529ea41f5b0587e28d757706e15fb2f51dbf65210df29","tier":"starter_2024"},"version":1085,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"89f9fa410aa9686c","login":"enjoylife","name":"Matthew Clemens","avatar_url":"https://avatars-next.observableusercontent.com/bc5d14341a7fc847a47529ea41f5b0587e28d757706e15fb2f51dbf65210df29","tier":null}],"members":[{"type":"individual","id":"89f9fa410aa9686c","login":"enjoylife","name":"Matthew Clemens","avatar_url":"https://avatars-next.observableusercontent.com/bc5d14341a7fc847a47529ea41f5b0587e28d757706e15fb2f51dbf65210df29","tier":null,"role":"editor"},{"type":"team","id":"97cbe6f543b4fb0f","login":"enjoylife","name":"Matthew Clemens","avatar_url":"https://avatars-next.observableusercontent.com/bc5d14341a7fc847a47529ea41f5b0587e28d757706e15fb2f51dbf65210df29","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"H3 Index Inspector","cells":[{"id":0,"value":"md`# H3 Index Inspector\nEnter one or more H3 indexes in the text field below to see more information.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof inputText = {\n const defaultIndex = '85283473fffffff';\n const fromUrl = decodeURIComponent(window.location.hash.slice(1));\n return html``\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"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: [0, 0],\n zoom: 0,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n \n map.on('load', () => {\n map.addSource('hex-source', {\n type: 'geojson',\n data: {type: 'FeatureCollection', features: []}\n });\n map.addLayer({\n id: 'hex-layer',\n source: 'hex-source',\n type: 'line',\n paint: {\n 'line-color': 'red',\n 'line-width': 2\n }\n });\n map.addLayer({\n id: 'hex-layer-fill',\n source: 'hex-source',\n type: 'fill',\n paint: {\n 'fill-color': 'red',\n 'fill-opacity': 0.05\n }\n });\n });\n \n invalidation.then(() => map.remove());\n\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof showIcosa = checkboxInput({\n options: [{ value: true, label: \"Show icosahedron edges\" }],\n value: [true]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"detailsTable(inspect(validIndexes)) ||\n md`*Please enter a valid H3 index (e.g. ${clickableH3Index('85283473fffffff')})*`;\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"md`## (Literal) Edge Cases\n\nAt odd resolutions, cell edges that cross an edge of the icosahedron will have additional distortion vertices added to account for the change in projection plane (at even resolutions, the cells are aligned with the icosahedron edges and do not require this). The possible cells are shown below. Note that we still use \"pentagon\" and \"hexagon\" to describe these cells, because that's still topologically correct (a pentagon always has 5 neighbors, a hexagon always has 6).\n\nVertices | Description | Example\n--- | --- | ---\n6 | Standard hexagon cell | ${clickableH3Index('85283473fffffff')}\n7 | Hexagon cell with an icosahedron edge crossing one vertex and one edge | ${clickableH3Index('85080013fffffff')}\n8 | Hexagon cell with an icosahedron edge crossing two edges | ${clickableH3Index('850802a3fffffff')}\n5 | Even-resolution pentagon cell | ${clickableH3Index('860800007ffffff')}\n10 | Odd-resolution pentagon cell | ${clickableH3Index('85080003fffffff')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"validIndexes = inputText.replace(/[\"']/g, '').split(/[, \\n]+/).filter(h3.h3IsValid);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"{\n zoomToHex();\n \n // Zoom on load\n function handleStyleLoad() {\n zoomToHex();\n }\n \n function handleClick(evt) {\n const {lng, lat} = evt.lngLat;\n selectPoint(lat, lng, map.getZoom());\n }\n \n // Set event handlers\n map.on('styledata', handleStyleLoad);\n map.on('click', handleClick);\n \n // Clear event handlers on each cell refresh\n invalidation.then(() => {\n map.off('styledata', handleStyleLoad);\n map.off('click', handleClick);\n });\n \n return md`*Set up event handlers*`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function detailsTable(details) {\n if (!details) return null;\n const asCSV = array => array.join(', ');\n const asLink = url => \n `${url.length < 75 ? url : url.slice(0, 72) + '...'}`;\n const numFmt = d3Format.format(',.8r');\n const unitFmt = ([val, unit]) => `${numFmt(val)} ${unit}`;\n const formatters = {\n center: asCSV,\n parent: clickableH3Index,\n children: clickableH3Indexes,\n neighbors: clickableH3Indexes,\n indexes: clickableH3Indexes,\n cellArea: unitFmt,\n 'avg edge length': unitFmt,\n resolutions: asCSV,\n 'icosahedron faces': asCSV,\n permalink: asLink\n };\n return html`\n \n ${Object.keys(details).map(k => html`\n \n \n \n \n `)}\n

${k}	${\n (formatters[k] \|\| String)(details[k])\n }

\n ` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"geojson = {\n const features = validIndexes.map(h3Index => {\n // Create a Polygon feature from the current hexagon and render on the map\n const feature = {\n type: 'Feature',\n properties: {h3Index},\n geometry: {\n type: 'Polygon',\n coordinates: [h3.h3ToGeoBoundary(h3Index, true)]\n }\n };\n fixTransmeridian(feature);\n return feature;\n });\n return {type: 'FeatureCollection', features};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"function zoomToHex() {\n // Early exits\n if (!validIndexes.length || !map.isStyleLoaded()) {\n return;\n }\n map.getSource('hex-source').setData(geojson);\n if (validIndexes.length === 1) {\n const h3Index = validIndexes[0];\n const res = h3.h3GetResolution(h3Index);\n const transition = res > 12 ? 'jumpTo' : 'flyTo';\n map[transition]({\n center: h3.h3ToGeo(h3Index).reverse(), \n zoom: resZoom[res]\n });\n } else {\n const bounds = bbox(geojson);\n map.fitBounds(bounds, {\n padding: 40\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function selectPoint(lat, lng, zoom) {\n const res = validIndexes.length > 0 ? \n // Get the resolution we're looking at now\n h3.h3GetResolution(validIndexes[0]) : \n // Otherwise, guess based on map zoom\n Math.floor(Math.max(zoom, 20) * 0.75);\n const h3Index = h3.geoToH3(lat, lng, res);\n const set = new Set(validIndexes);\n if (set.has(h3Index)) set.delete(h3Index);\n else set.add(h3Index);\n selectH3Index([...set].join(','))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"function selectH3Index(index) {\n viewof inputText.value = index;\n viewof inputText.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function clickableH3Index(index, altText) {\n if (!index) {\n return null;\n }\n const el = html`${altText || index}`;\n el.addEventListener(\"click\", () => selectH3Index(index));\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"function clickableH3Indexes(indexes) {\n return indexes && html`\n ${indexes.map((index, i) => html`${i ? ', ' : ''}${clickableH3Index(index)}`)}\n (${clickableH3Index(indexes.join(', '), 'show all')})\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"function cellUnits(h3Index) {\n return h3.cellArea(h3Index, h3.UNITS.km2) > 0.1 ?\n {area: h3.UNITS.km2, dist: h3.UNITS.km} :\n {area: h3.UNITS.m2, dist: h3.UNITS.m}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"resZoom = [0, 1, 2, 4, 6, 8, 10, 12, 13, 14, 16, 17, 18, 19, 20, 20];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"// Placeholder for generating hexagons\ncalculatedHex = {\n // 38.572707,99.825356,72.824938,242.558358\n const polygon = [[\n [72.824938, 99.825356],\n [38.572707, 99.825356],\n [38.572707, 242.558358 - 360],\n [72.824938, 242.558358 - 360],\n ]];\n return 242.558358 - 360 // h3v4.polygonToCells(polygon, 2).join(',')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"{\n const sourceId = 'icosa-source';\n const layerId = 'icosa-layer';\n if (!map.getSource(sourceId)) {\n const icosahedron = await d3Fetch.json('https://gist.githubusercontent.com/nrabinowitz/99642585d87d8b1963f1eef9f9273f0e/raw/77486df9968ae4f46ef86bdc7fa8ff074c65ff48/icosahedron.json');\n map.addSource(sourceId, {\n type: 'geojson',\n data: icosahedron\n });\n map.addLayer({\n id: layerId,\n source: sourceId,\n type: 'line',\n paint: {\n 'line-color': '#DDB27C',\n 'line-opacity': 1,\n 'line-width': 2\n }\n });\n }\n map.setLayoutProperty(layerId, 'visibility', showIcosa === \"true\" ? \"visible\" : \"none\");\n return map.getLayoutProperty(layerId, 'visibility');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"h3 = require('h3-js@3.7.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"h3v4 = require('h3-js@4.0.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@2.15.0');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {fixTransmeridian} from '@nrabinowitz/mapbox-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d3Fetch = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"d3Format = require('d3-format')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"import {checkbox as checkboxInput} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"import {params, permalink} from \"@jeffbaumes/permalink\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"bbox = {\n const lib = await require('https://bundle.run/@turf/bbox@6.0.1');\n return lib.default;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// CSS import required for the Mapbox map\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"