${mcindices[index]}

2d:null 2e:["$","title",null,{"children":"Hello H3 | Neil Turley | Observable"}] 33:T4fd,{ const context = DOM.context2d(width, height); const myProjection = d3.geoNaturalEarth1().fitExtent([[10, 10], [width - 10, height - 10]], sphere); const path = d3.geoPath(myProjection, context); let canvas = context.canvas; let index = null; function render() { context.clearRect(0, 0, width, height); context.beginPath(), path(land), context.fillStyle = "#ccc", context.fill(); context.beginPath(), path(res0Features), context.strokeStyle = "#f33", context.lineWidth = 1.5, context.stroke(); context.beginPath(), path(res1Features), context.strokeStyle = "#f99", context.lineWidth = 1.5, context.stroke(); context.beginPath(), path(sphere), context.strokeStyle = "#000", context.lineWidth = 2, context.stroke(); if (index) { const pointPath = indexToGeoJson(index); context.beginPath(), path(pointPath), context.fillStyle = `#f99`, context.fill(); context.fillStyle = `#000`, context.fillText(`H3 index: ${index}`, 0, 10); } } canvas.onmousemove = (ev) => { const { offsetX, offsetY } = ev; let coords = myProjection.invert([offsetX, offsetY]); let lon = +coords[0].toFixed(2); let lat = +coords[1].toFixed(2); index = h3.geoToH3(lat, lon, 0); render(); } render(); return canvas; }34:[] 31:{"id":"8dd5aabf000392a9","slug":"hello-h3","title":"Hello H3","thumbnail":"2f302a58b6c7963c1bf22893bee3fd8e5ebc606dd97dc5e57d7db6c57bb1f531","access_level":"public","create_time":"$D2020-05-16T02:46:55.499Z","update_time":"$D2020-06-04T05:35:44.234Z","view_time":null,"first_public_time":"$D2020-06-03T04:04:47.170Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":"starter_2024"},"version":1144,"publish_version":1144,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null}],"members":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Hello H3","cells":[{"id":0,"value":"md`# Hello H3\n\nH3 is a system of indexing geographic information by subdividing the earth into hexagons (and a few pentagons). Each index represents a geographic area at up to 16 layers of resolution. Resolution 0 has 122 cells that cover the earth. Each layer of resolution has 7 times as many cells as the layer above it. In other words, it roughly subdivides each cell into 7 child cells.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n const context = DOM.context2d(width, height);\n const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], sphere);\n projection.rotate([a, -20, 0]);\n const path = d3.geoPath(projection, context);\n let canvas = context.canvas;\n function render() {\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), context.fillStyle = \"#ccc\", context.fill();\n context.beginPath(), path(res0Features), context.strokeStyle = \"#f33\", context.lineWidth = 1.5, context.stroke();\n context.beginPath(), path(res1Features), context.strokeStyle = \"#f99\", context.lineWidth = 1.5, context.stroke();\n context.beginPath(), path(sphere), context.strokeStyle = \"#000\", context.lineWidth = 2, context.stroke();\n context.fillStyle = \"#000\", context.fillText(\"hexes don't deform near the poles\", width/2+50, 10)\n }\n render();\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`Using H3 indices instead of latitude-longitude, political boundaries, or addresses makes bucketing geographic information more regular, uniform, and immutable over time. Each index is encoded as a 64 bit number and each number follows a regular pattern, for instance, a child index can find it's parent cell through truncation.\n\nHover over the map below to see the H3 index of the hexes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`# Contiguous United States with Adjustable Resolution\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"{\n const usBbox = [\n [53, -135], // northwest\n [50, -55], // northeast\n [24, -80], // southeast\n [20, -120] // southwest\n ];\n const hexagons = h3.polyfill(usBbox, resolution);\n let projection = d3.geoAlbers().scale(1000).translate([487.5, 305])\n let path = d3.geoPath(projection)\n let indexText = svg``;\n let s = svg`\n `\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"viewof resolution = slider({min: 0,\n max: 3,\n step: 1,\n value: 2,\n description:\"Resolution\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"md`## McDonalds Restaurant Locations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"{\n let max = d3.max(Object.values(mcindices))\n let projection = d3.geoAlbers().scale(1000).translate([487.5, 305])\n let path = d3.geoPath(projection)\n let color = d => d3.interpolateHsl('#00f2', '#f009')(d3.scaleLinear().domain([0, max])(d))\n let s = svg`\n `\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"{\n let max = d3.max(Object.values(mcindices))\n let color = d3.scaleSequential([1, max], d3.interpolateHsl('#00f2', '#f009'))\n return legend({color, title:'McDonalds Restaurant Locations'})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"mcgeo = d3.json('https://raw.githubusercontent.com/gavinr/usa-mcdonalds-locations/master/mcdonalds.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"mcindices = {\n let indices = mcgeo.features.map(f => f.geometry.coordinates).map(coord => h3.geoToH3(coord[1], coord[0], resolution))\n let countIndices = {}\n indices.forEach(i => {\n if (i in countIndices) countIndices[i] += 1;\n else countIndices[i] = 1;\n })\n return countIndices;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"humanFormat = require('human-format')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"h3 = require('h3-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"indexToGeoJson = (index) => {\n return {\n \"type\": \"Feature\",\n \"geometry\": {\n type: \"LineString\",\n coordinates: h3.h3ToGeoBoundary(index, true)\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"res0Features = {\n return {\n type: \"FeatureCollection\",\n features: h3.getRes0Indexes().map(indexToGeoJson)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"res1Features = {\n return {\n type: \"FeatureCollection\",\n features: h3.getRes0Indexes().map(r0 => h3.h3ToChildren(r0, 1)).flat().map(indexToGeoJson)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"a= {\n let i = 0;\n while (true) {\n yield Promises.delay(70, i);\n i+=1\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = Math.min(width, 350)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"