31:T599,md`## What _is_ the Multigraph API? The multigraph API is an innovative method for visualizing reachability. By calculating the _graph network travel times_ onto __*the nodes of the road network itself*__, we can assemble multiple visualization types from a single routing scenario. ### What makes it different from [isochrone polygons](https://observablehq.com/@targomo/deep-dive-on-isochrone-polygons)? - __Multigraph is more precise__ - A primary (and striking) difference is that isochrones are great for giving a visual indication of reachability areas, but they _aren't_ great at quantifying _precise reachability_. We're able to see that a location is _within 30 minutes by metro_, but is it _10 minutes_ away or _25 minutes_ away? - __Multigraph is more performant__ - With _many-source reachability_ scenarios, the resulting reachable area may be __*very large*__. If returning isochrone polygons, we have the computational overhead of polygon serialization, as well as the high number of raw vertices that are involved in a complex polygon. This means longer computation times, and longer data transit times, thus _slower results_. With multigraph, reachability scenarios involving _thousands of source locations_ are possible. - __Multigraph is more versatile__ - nodes, edges (streets), and multiple geometric aggregations are all available, facilitating the choice of the correct visualization for the specific context.`32:T4a0,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // set the targomo client const client = tgmCoreClient("westcentraleurope"); // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: { lat: sourcePoints.reduce((total, next) => total + next.lat, 0) / sourcePoints.length, lng: sourcePoints.reduce((total, next) => total + next.lng, 0) / sourcePoints.length }, zoom: 11.5, pitch: 30, style: client.basemaps.getGLStyleURL("Light"), // scrollZoom: false, attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); map.on("load", async () => { sourcePoints.forEach((sourcePoint) => { const marker = new mapboxgl.Marker(); marker.setLngLat(sourcePoint).addTo(map); }); container.value = map; container.dispatchEvent(new CustomEvent("input")); }); }33:T84c,/* curl https://api.observablehq.com/document/@targomo/hexagon-aggregation-multigraph-deckgl | \ jq '. | {slug,thumbnail,title,publish_time,update_time,owner: .owner | {name,login,avatar_url}}' */ extras = [ { slug: "hexagon-aggregation-multigraph-deckgl", thumbnail: "586ad728bbb1afc93d086621dba98ea44e46f5b47847a0bb6e4d45d33507df9e", title: "Hexagon Aggregation (Multigraph + DeckGL part 1)", publish_time: "2022-12-09T13:30:55.072Z", update_time: "2023-01-24T10:50:42.630Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "screen-grid-aggregation-multigraph-deckgl", thumbnail: "2bdfdc090c37960ca1b253e1c70c47688fdab853645e35a6017b48566ba739a5", title: "Screen Grid Aggregation (Multigraph + DeckGL part 2)", publish_time: "2022-12-09T13:32:43.988Z", update_time: "2023-01-24T10:51:27.199Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "h3-with-multigraph", thumbnail: "de82cb5d83aecff398c856320ab7401bec9716f2a99353a12b8b6d63e79e1df3", title: "H3 with Multigraph", update_time: "2023-07-20T07:03:56.336Z", likes: 1, owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "h3-regions-with-multigraph", thumbnail: "24e90c20a26cade36f70dedeeab1ccb01fb643df5317aa893572587f0f0f08ba", title: "H3 with Multigraph, part 2: regions", update_time: "2023-12-22T09:24:54.428Z", likes: 0, owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } } ]34:[{"id":"550718041272e5a96f28847f821c169e1d27965535a73726f511613edb8ba0ecc6f6d51a859875ca68948e72911b5665d70309f24db5da29bf5b7fbb388cce72","href":"https://static.observableusercontent.com/files/550718041272e5a96f28847f821c169e1d27965535a73726f511613edb8ba0ecc6f6d51a859875ca68948e72911b5665d70309f24db5da29bf5b7fbb388cce72","name":"mg-peninsula@1.png","type":"image/png","lastModified":1581341127798.03,"size":714848}] 2f:{"title":"Deep Dive on Multigraph","cells":[{"id":0,"value":"tgmIntro(\n \"Deep Dive on Multigraph\",\n \"Multigraph API\",\n \"https://www.targomo.com/developers/apis/multigraph/\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"image = FileAttachment(\"mg-peninsula@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"md`### Different visualization possibilities\nMultigraph routes to the actual nodes and edges of the road network, so reachability can be visualized as either the raw nodes/edges, or aggregated to hexagon or square \"tiles\".\n\n### Different intersection scenarios\nThe _spatial relationship_ between the source points and the reachable area can tell very different stories. \"Union\" symbolizes areas by the time to reach the closest source. \"Max\" symbolizes areas by the time to reach all sources. \"Average\" symbolizes area by the average time to reach all sources. \"Nearest\" symbolizes areas by the source to which they are closest.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"html`\n

${viewof travelMode}

${viewof edgeWeight}

${viewof intersectType}

${viewof vizType}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"tgmLoader(\n loaderBasic,\n 5,\n `${edgeWeight / 60} minutes ${travelMode} area in Portland, OR`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"divingDeeper(\n extras,\n \"Here are some more specific explorations into applications of the Multigraph API\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"multigraphOptions = {\n let config = {\n edgeWeight: \"time\",\n travelType: travelMode,\n maxEdgeWeight: edgeWeight,\n multigraph: {\n aggregation: {\n type: intersectType\n },\n serialization: {\n format: \"mvt\"\n }\n }\n };\n if (vizType === \"node\" || vizType === \"edge\") {\n config.multigraph.layer = {\n type: \"identity\"\n };\n config.multigraph.domain = {\n type: vizType\n };\n } else {\n config.multigraph.layer = {\n type: vizType\n };\n }\n\n return config;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"mgUrl = async function() {\n mutable loaderBasic = true;\n const url = await TgmClient().multigraph.getTiledMultigraphUrl(\n sourcePoints,\n multigraphOptions,\n \"mvt\"\n );\n mutable loaderBasic = false;\n return url;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"viewof updateSource = {\n if (!map.getSource('mg-tiles')) {\n map.addSource('mg-tiles', await getSource());\n map.addLayer(getLayer());\n } else {\n // Set the tile url to a cache-busting url (to circumvent browser caching behaviour):\n map.getSource('mg-tiles').tiles = (await getSource()).tiles;\n // Remove the tiles for a particular source\n map.style.sourceCaches['mg-tiles'].clearTiles();\n // Load the new tiles for the current viewport (map.transform -> viewport)\n map.style.sourceCaches['mg-tiles'].update(map.transform);\n // update the layer\n map.removeLayer('multigraph');\n map.addLayer(getLayer());\n // Force a repaint, so that the map will be repainted without you having to touch the map\n map.triggerRepaint();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"getSource = async function() {\n return {\n type: \"vector\",\n tiles: [await mgUrl()],\n minzoom: 6,\n maxzoom: 20\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"getLayer = function() {\n const painter =\n intersectType === 'nearest' ? paintColorsNearest : paintColors;\n const config = {\n id: 'multigraph',\n source: 'mg-tiles',\n 'source-layer': 'aggregation',\n layout: {}\n };\n if (vizType === 'node') {\n config.type = 'circle';\n config.paint = {\n 'circle-radius': 2,\n 'circle-color': painter\n };\n } else if (vizType === 'edge') {\n config.type = 'line';\n config.paint = {\n 'line-color': painter,\n 'line-width': 2.5,\n 'line-opacity': 0.8\n };\n config.layout = {\n 'line-cap': 'round',\n 'line-join': 'round'\n };\n } else {\n config.type = 'fill';\n config.paint = {\n // symbolize on a Green-Yellow-Red interpolated scale\n 'fill-opacity': 0.6,\n 'fill-outline-color': 'rgba(255,255,255,0.15)',\n 'fill-color': painter,\n 'fill-outline-color': 'rgba(0,0,0,0)'\n };\n }\n return config;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"paintColors = {\n const colors = [\n \"#006837\",\n \"#39B54A\",\n \"#8CC63F\",\n \"#F7931E\",\n \"#F15A24\",\n \"#C1272D\"\n ];\n let config = [\n \"interpolate-hcl\",\n [\"linear\"],\n [\"get\", \"w\"] // 'w' is the 'edgeWeight', which in this case is time\n ];\n return [\n ...config,\n ...colors.map((c, i) => [(i + 1) * (edgeWeight / 6), c]).flat()\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"paintColorsNearest = {\n const colors = ['#006837', '#F7931E', '#C1272D'];\n let config = [\n 'interpolate-hcl',\n ['linear'],\n ['get', 'w'] // 'w' is the 'edgeWeight', which in this case is time\n ];\n return [...config, ...colors.map((c, i) => [i, c]).flat()];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof vizType = Inputs.radio([\"node\", \"edge\", \"hexagon\", \"tile\"], {\n label: \"Visualization Type\",\n value: \"hexagon\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"viewof intersectType = Inputs.radio(\n new Map([\n [\"Union\", \"routing_union\"],\n [\"Max\", \"max\"],\n [\"Average\", \"mean\"],\n [\"Nearset\", \"nearest\"]\n ]),\n {\n label: \"Intersection Mode\",\n value: \"routing_union\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"viewof travelMode = Inputs.radio(\n new Map([\n [\"Walk\", \"walk\"],\n [\"Bike\", \"bike\"],\n [\"Car\", \"car\"],\n [\"Transit\", \"transit\"]\n ]),\n {\n label: \"Travel Mode\",\n value: \"bike\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"viewof edgeWeight = Inputs.radio(\n new Map([\n [\"15min\", \"900\"],\n [\"30min\", \"1800\"],\n [\"45min\", \"2700\"],\n [\"60min\", \"3600\"]\n ]),\n {\n label: \"Travel Time\",\n value: \"1800\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"resourcesSpacer","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.6.0\");\n const href = await require.resolve(\"mapbox-gl@1.6.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"import {slider} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"sourcePoints = {\n return [\n { id: 1, lat: 45.523099, lng: -122.681245 },\n { id: 2, lat: 45.519918, lng: -122.655948 },\n { id: 3, lat: 45.534952, lng: -122.657182 }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"md`Loader refs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"mutable loaderBasic = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"import {\n tgmCoreClient,\n tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro,\n resourcesSpacer,\n divingDeeper\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"TgmClient = function () {\n return tgmCoreClient(\"northamerica\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}