2e:null 2f:["$","title",null,{"children":"Hexagon Aggregation (Multigraph + DeckGL part 1) | Targomo | Observable"}] 34:[] 32:{"id":"ea18c1289c62f181","slug":"hexagon-aggregation-multigraph-deckgl","title":"Hexagon Aggregation (Multigraph + DeckGL part 1)","thumbnail":"586ad728bbb1afc93d086621dba98ea44e46f5b47847a0bb6e4d45d33507df9e","access_level":"public","create_time":"$D2022-06-22T12:07:16.962Z","update_time":"$D2023-01-24T10:50:42.630Z","view_time":null,"first_public_time":"$D2022-06-22T14:31:33.873Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"b873ed05f5a7d959","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":"starter_2024"},"version":170,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null},{"type":"individual","id":"59ca7144f8ccf1d1","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":null}],"members":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Hexagon Aggregation (Multigraph + DeckGL part 1)","cells":[{"id":0,"value":"tgmIntro(\n \"Hexagon Aggregation (Multigraph + DeckGL part 1)\",\n \"multigraph service\",\n \"https://targomo.com/developers/services/multigraph/\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"[DeckGL](https://deck.gl/) offers some really powerful visualization options, which we can use quite well with our multigraph results, specifically with the _nodes_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"Here we'll use Deck's `HexagonLayer`, aggregating the multigraph nodes to each hexagon. [Traditional JS example here](https://www.targomo.com/developers/documentation/javascript/code_example/deckgl_multigraph/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"html`\n

${viewof hexSize}

${viewof hexPct}

${viewof travelMode}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // set the targomo client\n const client = tgmCoreClient(\"westcentraleurope\");\n\n // Create the \"map\" object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: source,\n zoom: 11,\n pitch: 40,\n style: client.basemaps.getGLStyleURL(\"Light\"),\n // scrollZoom: false,\n attributionControl: false\n })\n .addControl(new mapboxgl.NavigationControl())\n .addControl(\n new mapboxgl.AttributionControl({\n compact: true,\n customAttribution: attribution\n })\n );\n\n const marker = new mapboxgl.Marker({\n //draggable: true\n })\n .setLngLat(source)\n .addTo(map);\n\n map.on(\"load\", async () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof hexSize = Inputs.range([100, 500], {\n label: html`Hex Size`,\n step: 50,\n value: 200\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof hexPct = Inputs.range([0, 1], {\n label: html`Hex Percent`,\n step: 0.1,\n value: 0.9\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof travelMode = Inputs.radio(\n [\n { label: \"Walk\", value: \"walk\" },\n { label: \"Bike\", value: \"bike\" },\n { label: \"Car\", value: \"car\" },\n { label: \"Transit\", value: \"transit\" }\n ],\n {\n label: html`Select mode of transport`,\n value: \"transit\",\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"source = ({ id: \"src\", lng: 2.375, lat: 48.844 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"OPTIONS = [\"radius\", \"coverage\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"COLOR_RANGE = [\n [26, 152, 80],\n [145, 207, 96],\n [217, 239, 139],\n [254, 224, 139],\n [252, 141, 89],\n [215, 48, 39]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"data = {\n // here we're deciding that we want transit coverage, 30 minutes (1800s), nodes (as we are aggregating with deckGL)\n const multigraphOptions = {\n edgeWeight: \"time\",\n travelType: travelMode,\n maxEdgeWeight: 1800,\n multigraph: {\n layer: { type: \"identity\" },\n domain: { type: \"node\" },\n serialization: { format: \"geojson\" },\n aggregation: { type: \"routing_union\" }\n }\n };\n\n // set the targomo client\n const client = tgmCoreClient(\"westcentraleurope\");\n const mg = await client.multigraph.fetch([source], multigraphOptions);\n\n return mg.data.features.map((f) => {\n return {\n lng: f.geometry.coordinates[0],\n lat: f.geometry.coordinates[1],\n w: f.properties.w\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"deckLayer = {\n if (map.getLayer(\"heatmap\")) {\n map.removeLayer(\"heatmap\");\n }\n const _deckLayer = new deck.MapboxLayer({\n id: \"heatmap\",\n type: deck.HexagonLayer,\n colorRange: COLOR_RANGE,\n data,\n getPosition: (d) => [Number(d.lng), Number(d.lat)],\n getColorWeight: (d) => d.w,\n colorAggregation: \"MEAN\",\n opacity: 0.3,\n radius: hexSize,\n coverage: hexPct\n });\n map.addLayer(_deckLayer, \"place_other\");\n return _deckLayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`

\n## General utilities used for the examples\n\nMost of what you'll find here is similar to how you'd do it outside of [observable](https://observablehq.com), but there are several differences... Refer to our [developer resources](https://targomo.com/developers/documentation/javascript/) for a more direct path!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.13.1\");\n const href = await require.resolve(\"mapbox-gl@1.13.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// deck = require.alias({\n// h3: {},\n// s2Geometry: {}\n// })(\"deck.gl@8.4.1/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"lib = require\n .alias({\n h3: {},\n S2: {}\n })(\"deck.gl@~8.7.11/dist.min.js\")\n .then(() => ({\n deck: window.deck,\n luma: window.luma\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"deck = lib.deck","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"luma = lib.luma","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n tgmCoreClient,\n maptilerKey,\n tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro,\n codeStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"