2e:null 2f:["$","title",null,{"children":"H3 geospatial indexes playground | Olivier Lange | Observable"}] 34:T40f,placesH3 = ({ // https://goo.gl/maps/9Df4KotXbhyRm34Q7 ⟵ the building has the shape of an octagon genevaTheatreCiteBleue: h3.geoToH3( 46.18687624923539, 6.1587771264109294, res), // https://goo.gl/maps/sqXTUmoG3f1RVDwLA genevaPontCEVA: h3.geoToH3(46.18669723553891, 6.152944760789058, res), // https://goo.gl/maps/1X2j3z6Jhca3R8AP8 genevaTourChampel: h3.geoToH3(46.1876405549345, 6.152107936977695, res), // https://goo.gl/maps/oFsie7hHguQpEQwL8 genevaTCU: h3.geoToH3(46.185601417641635, 6.158754606655257, res), // https://goo.gl/maps/RWJvZMfXqpdcg5Qt8 ⟶ genevaParcFalaises: h3.geoToH3(46.189051772509536, 6.163180109051049, res), // https://goo.gl/maps/RyeEa5CaZjCMyD6p8 ⟶ genevaCentreSportifVessy: h3.geoToH3(46.185450129448576, 6.167344654787411, res), // https://goo.gl/maps/fUWDLbKVpXGnJ58NA ⟶ genevaBergesVessy: h3.geoToH3(46.17938657393315, 6.169982852272059, res), // https://goo.gl/maps/uLEeUiDeLV8i8TAFA ⟶ genevaCimetiereCarouge: h3.geoToH3(46.18197877945335, 6.145689115998625, res) })35:[{"id":"b04f53fc21a7b54b1276c951975b2e8ea3dcedaae423a4f25515af902edc5440a036d6f29fcf253d0d89ac853af00cf5e3018ca52f07d528479b98524198b950","href":"https://static.observableusercontent.com/files/b04f53fc21a7b54b1276c951975b2e8ea3dcedaae423a4f25515af902edc5440a036d6f29fcf253d0d89ac853af00cf5e3018ca52f07d528479b98524198b950","name":"h3-map-places@3.png","type":"image/png","lastModified":1660598425994.759,"size":1198663}] 32:{"id":"fe29635ea7444a94","slug":"h3-geospatial-indexes-playground","title":"H3 geospatial indexes playground","thumbnail":"b749abd46096d706135da1d5f5eb7a4f5a94c4db3f1beba6fe236325885c8b59","access_level":"public","create_time":"$D2021-10-27T19:54:57.167Z","update_time":"$D2022-08-15T21:47:04.896Z","view_time":null,"first_public_time":"$D2021-10-28T01:41:08.293Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/52639e5630d4e3e4e2772fe77680883002a0b9352d8dd7a649dbcb67b1e1fb3a","tier":"starter_2024"},"version":595,"publish_version":595,"role":null,"authored":false,"authors":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null}],"members":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"370e9f1fd8411c5c","slug":"h3","title":"H3","owner":{"id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange"}},"type":"notebook","body":{"title":"H3 geospatial indexes playground","cells":[{"id":0,"value":"# H3 geospatial indexes playground\n\nLearning to use [H3](https://uber.github.io/h3), Uber's hexagon-based geospatial indexing system, with the [@uber/h3-js](https://github.com/uber/h3-js) library, a JavaScript version of H3. Our first steps, nothing fancy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"## Understanding H3 _resolution_\n\nTry changing the base [H3 resolution](https://h3geo.org/docs/core-library/restable) used in this notebook, to see how the coordinates change accordingly in the examples hereafter:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof res = Inputs.range([0,15], { value: 12, step: 1, placeholder: \"0–15\", label: \"res =\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"Resolution **${res.toLocaleString(\"en\")}** designates an average _hexagonal area_ of **${h3.hexArea(res, h3.UNITS.km2)}km²** (${h3.hexArea(res, h3.UNITS.m2)}m²), with an average _edge length_ of **${h3.edgeLength(res, h3.UNITS.km)}km** (${h3.edgeLength(res, h3.UNITS.m)}m). There are ${h3.numHexagons(res)} unique H3 indexes at this resolution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Getting started: H3 _indexes_ of selected _places_\n\nA few lat/lng points converted to H3 indexes at resolution **${res.toLocaleString(\"en\")}** (defined in cell above):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"html`

\n ${await FileAttachment(\"h3-map-places@3.png\").image()}\n

Static image of the places on a map (with resolution 10 at time of snapshot)
\n View the places on a\n dynamic map (with current resolution and places)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"placesH3AsList = Object.values(placesH3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"## Finding the _bounding hexes_ at resolution 0","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"boundingHexes = removeDuplicates(placesH3AsList.map( h3Index => h3.h3ToParent( h3Index, 0)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## Finding the rectangular _bounding box_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"As a simple exercise, let's try to find a rectangular «bounding box» that would **fully contain** all our ${placesH3AsList.length} _hexes_ (if such construct makes sense in a geodesic spatial system). A bit of a weird idea, as H3 maps to areas, which are _bounding hexes_ actually, but nevertheless, let's try to build our bizarre _bounding box_.\n\nSuch a «bounding box» should allow to plot them on a custom made minimap, for instance (although we are not doing this now).\n\nSidenote: _Hexes_ are the areas into which our ${placesH3AsList.length} _places_ were binned; they are usually hexagonal — eventually pentagonal — but we'll call them _hexes_ in any case.\n\nWe'll proceed with the following simple algorithm:\n\n### 1. Collect the _geo boundaries_ of all _hexes_\n\nTo start with, collect the _geo coordinates_ of all _edges_ (usually 6 edges, eventually 5) of our _hexes_ — a list named _geo boundaries_ in H3's API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"placesGeoBoundaries = placesH3AsList.map(\n (place) => h3.h3ToGeoBoundary(place,false))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"### 2. Find the min/max long/lat of all those _geo boundaries_\n\nOf these _geo boundaries_ of all our _hexes_, we can look for the minimum/maximum _longitudes_ and minimum/maximum _latitudes_. These minimum/maximum longitudes and latitudes yield the «corners» of our «bounding box» :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"placesGeoBoundingBox = {\n // This could of course be optimized to avoid unnecessary comparisons \n // and null coalescing evals at every step of the loop – but we'll\n // leave it that way, for the sake of simplicity and readibility\n let minLat, minLng, maxLat, maxLng;\n for( const place of placesGeoBoundaries.flat()) {\n const [lat,lng] = place;\n minLng = Math.min( lng, minLng ?? +Infinity);\n maxLng = Math.max( lng, maxLng ?? -Infinity);\n minLat = Math.min( lat, minLat ?? +Infinity);\n maxLat = Math.max( lat, maxLat ?? -Infinity);\n }\n return { minLng, minLat, maxLng, maxLat };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"### 3. _Corners_ of our _bounding box_ in lng/lat coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"topLeft = [ placesGeoBoundingBox.minLng, placesGeoBoundingBox.maxLat ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"topRight = [ placesGeoBoundingBox.maxLng, placesGeoBoundingBox.maxLat ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"bottomLeft = [ placesGeoBoundingBox.minLng, placesGeoBoundingBox.minLat ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"bottomRight = [ placesGeoBoundingBox.maxLng, placesGeoBoundingBox.minLat ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Dependencies & utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"h3 = import('https://cdn.skypack.dev/h3-js@3.7.2?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"function h3IndexInspectorLink(indexes) {\n return `https://observablehq.com/@nrabinowitz/h3-index-inspector#${encodeURIComponent(indexes)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"function removeDuplicates( arr) {\n return [...new Set(arr)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## See also\n\n* [H3 › Docs](https://h3geo.org/docs/) _hexagonal hierarchical geospatial indexing system_\n* [Observable › @nrabinowitz › H3 Tutorials](https://observablehq.com/@nrabinowitz/h3-tutorial-the-h3-js-library?collection=@nrabinowitz/h3-tutorial) _intro to H3, rendering hexagons, using point & polygon layers, radius lookup, suitability Analysis_\n* [Observable › @nrabinowitz › H3 Index Inspector](https://observablehq.com/@nrabinowitz/h3-index-inspector?collection=@nrabinowitz/h3) _very useful resource, allows to inspect and display a map of a set of H3 indexes_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"