31:Tb61,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: { lat: view.center[0], lng: view.center[1] }, zoom: view.zoom, minZoom: 8, maxZoom: 16, pitch: view.pitch, style: roadsOnlyStyle("#000", "#1f1f1f"), attributionControl: false })); await new Promise((resolve, reject) => { mapRef.on("load", async () => { // traffic lines mapRef.addSource("lines", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "lines", type: "line", source: "lines", layout: {}, paint: { "line-color": "#666" } }); // buffer-traffic intersect mapRef.addSource("intersection", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "intersection", type: "line", source: "intersection", layout: {}, paint: { "line-color": getColorStyle(), "line-width": 2 // "line-opacity": 0.5 } }); // marker buffer mapRef.addSource("buffer", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "buffer", type: "line", source: "buffer", layout: {}, paint: { "line-color": "#666", "line-width": 2 // "line-opacity": 0.5 } }); // tile bboxes mapRef.addSource("bbox", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "bbox", type: "line", source: "bbox", layout: {}, paint: { "line-color": "#ccc", "line-dasharray": [3, 3] } }); resolve(); }); }); // Change the cursor to a pointer when the mouse is over the poi layer mapRef.on("mouseenter", "intersection", () => { mapRef.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. mapRef.on("mouseleave", "intersection", () => { mapRef.getCanvas().style.cursor = ""; }); mapRef.on("click", "intersection", (e) => { const description = `${ Math.round(e.features[0].properties.value * 10) / 10 } ${units}`; new maplibre.Popup().setLngLat(e.lngLat).setHTML(description).addTo(mapRef); }); invalidation.then(() => mapRef.remove()); yield container; }32:[] 2f:{"title":"Traffic Data Details","cells":[{"id":0,"value":"# Traffic Data Details\nWe previously explored a [high-level](https://observablehq.com/@targomo/traffic-data) look at our traffic data. So we _have_ the data, but what can we learn from it?\n\nOne approach is to get the maximum vehicle count within various distances from a location, and use that to quantify traffic volume with an emphasis on _proximity_. High volumes _closer_ to the location are more significant than those which are further away. Below, you can see how different buffer radii and locations can result in different vehicle count max and average. Highways and highway access ramps are excluded in this analysis, as motorists on highways are not likely to be customers of nearby stores - they are passing through quickly.\n\nIn production, we also consider different road types and compound values to come up with significant measurements which can be used to train our network optimization models, but for simplicity's sake, we can explore some basic values.","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"viewof bufferLength = Inputs.radio([250, 500, 750, 1000], {\n label: \"Buffer Length (m)\",\n value: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"html`

drag the marker to explore a new area, and ${viewof recenter} to zoom to the tile boundaries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"## ${statsMeta.description}\n### _${units} in buffer - Max : ${maxValue}, Average: ${meanValue}_","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"### ${units.slice(0,1).toUpperCase()}${units.slice(1,-1)} counts by length of road in meters (${statsMeta.name})","pinned":false,"hidden":false,"mode":"md"},{"id":649,"value":"trafficPlot = Plot.plot({\n height: 300,\n marginLeft: 50,\n y: {\n grid: true,\n label: \"meters of road\"\n },\n x: {\n label: units\n },\n marks: [\n Plot.rectY(\n values,\n Plot.binX(\n {\n y: \"count\",\n interval: 10000\n },\n {\n fill: (d) => getColor(Math.ceil(d / 10000) * 10000)\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"maxValue = Math.round(d3.max(values))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"meanValue = Math.round(d3.mean(values))","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"values = intersection.features\n .map((d) =>\n Array.from({ length: Math.ceil(d.properties.length) }).map(\n (dd) => d.properties.value\n )\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"breaks = getBreaks(maxVal, classBreaks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"getBreaks = (max, classes) => {\n return Array.from({ length: classes }).map((d, i) => [\n (i + 1) * (max / classes),\n getColor((i + 1) * (max / classes))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"getColorStyle = () => {\n return {\n property: \"value\",\n stops: breaks\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"getColor = (v) => {\n const valueRatio = Math.min(1, v / maxVal);\n return d3.interpolateSpectral(1 - valueRatio);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"bbox = turf.bbox(buffer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"tiles = getBboxTiles(bbox, zoom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"buffer = turf.featureCollection([\n turf.buffer(turf.point([mapMarker.lng, mapMarker.lat]), bufferLength, {\n units: \"meters\",\n steps: 12\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"tileBoxes = turf.featureCollection(\n tiles.map(([z, x, y]) => turf.bboxPolygon(TileXYToBoundingBox(x, y, z, 256)))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"tiledLines = await Promise.all(\n tiles.map((tile) => {\n const [z, x, y] = tile;\n const geojson = fetch(\n `https://api.targomo.com/edge-statistics/6/1/${z}/${x}/${y}.geojson?key=${targomoKey()}&travelType=car&direction=sum&ignoreRoadClass=11&ignoreRoadClass=12`\n ).then((response) => response.json());\n return geojson;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"combinedLines = tiledLines.reduce((acc, cur) => {\n acc.features = [...acc.features, ...cur.features];\n return acc;\n}, turf.featureCollection([]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"intersection = {\n const writer = new jsts.io.GeoJSONWriter();\n const polyJsts = geojsonReader.read(buffer.features[0].geometry);\n const outLines = [];\n combinedLines.features.forEach((line) => {\n const lineJsts = geojsonReader.read(line);\n if (polyJsts.intersects(lineJsts.geometry)) {\n const intersection = writer.write(\n polyJsts.intersection(lineJsts.geometry)\n );\n line.properties = {\n length: turf.length(intersection, { units: \"meters\" }),\n value: line.properties[\"1\"] ? line.properties[\"1\"] : null\n };\n if (line.properties.value) {\n outLines.push({\n type: \"Feature\",\n properties: line.properties,\n geometry: intersection\n });\n }\n }\n });\n return turf.featureCollection(outLines);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"units = \"vehicles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"{\n recenter;\n const [minX, minY, maxX, maxY] = turf.bbox(buffer);\n if (minX !== undefined && minY !== undefined && maxX !== undefined && maxY) {\n map.fitBounds(\n [\n { lng: minX, lat: minY },\n { lng: maxX, lat: maxY }\n ],\n { padding: 50 }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof mapMarker = {\n const inp = Inputs.input({ lat: view.center[0], lng: view.center[1] });\n const marker = new maplibre.Marker({\n color: \"#666\",\n draggable: true\n })\n .setLngLat({ lat: view.center[0], lng: view.center[1] })\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = marker.getLngLat();\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"function getBboxTiles(bbox, zoom) {\n const [minX, minY, maxX, maxY] = bbox;\n const [minZileZ, minTileX, minTileY] = getZXYTile({\n lat: minY,\n lng: minX,\n zoom\n });\n const [maxTileZ, maxTileX, maxTileY] = getZXYTile({\n lat: maxY,\n lng: maxX,\n zoom\n });\n\n const xRange = tileRange([minTileX, maxTileX]);\n const yRange = tileRange([minTileY, maxTileY]);\n\n const matrix = xRange\n .map((x) => {\n return yRange.map((y) => {\n return [x, y];\n });\n })\n .flat()\n .map((d) => [zoom, ...d]);\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"function tileRange(range) {\n const start = Math.min.apply(null, range.sort());\n const end = Math.max.apply(null, range.sort());\n return Array.from({ length: end - start + 1 }).map((_, idx) => start + idx);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"zoom = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"classBreaks = 10 // how many breaks for the color scale","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"statsMeta = {\n const collectionStats = (\n await fetch(\n `https://api.targomo.com/edge-statistics/${groupId}/description?key=${targomoKey()}`\n ).then((response) => response.json())\n ).statistics;\n const values = Object.values(collectionStats);\n return values\n .filter((d) => d.id === statsId)\n .map((d) => ({\n id: d.id,\n name: d.name,\n description: d.description,\n max: d3.max(d.equalIntervalValueBreaks.sum)\n }))[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"maxVal = 80000 // Math.round(statsMeta.max / 100000) * 100000 // where to set the \"high\" bin and color","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"{\n map.getSource(\"buffer\").setData(buffer);\n map.getSource(\"bbox\").setData(tileBoxes);\n map.getSource(\"lines\").setData(combinedLines);\n map.getSource(\"intersection\").setData(intersection);\n return md`_set map layer source data_`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"{\n if (map) {\n const l = Plot.legend({\n color: {\n interpolate: (t) => d3.interpolateSpectral(1 - t),\n domain: [0, maxVal]\n },\n style: {\n backgroundColor: \"#333333\",\n color: \"#ffffff\"\n },\n width: 400,\n ticks: 10,\n label: statsMeta.name\n });\n const ctrlDiv = document.querySelector(\".maplibregl-ctrl-bottom-left\");\n ctrlDiv.innerHTML = `

${l.outerHTML}

`;\n }\n return md`_set legend..._`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"### imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import {\n tgmCoreClient,\n tgmNotice,\n targomoKey,\n tgmIntro,\n codeStyle,\n roadsOnlyStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import { TileXYToBoundingBox } from \"@abenrob/azure-tile-math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"import { getZXYTile } from \"@abenrob/osm-tile-math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"jsts = require(\"jsts@2.7.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"geojsonReader = new jsts.io.GeoJSONReader()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"### settings and functions","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"view = ({\n name: \"Berlin\",\n center: [52.523296, 13.415299],\n zoom: 13,\n pitch: 0,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Dark\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"statsId = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"groupId = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"// https://www.w3.org/TR/AERT/#color-contrast\nfunction textColor(bg) {\n const { r, g, b } = d3.color(bg);\n const brightness = Math.round(\n (parseInt(r) * 299 + parseInt(g) * 587 + parseInt(b) * 114) / 1000\n );\n return brightness > 125 ? \"black\" : \"white\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"### styles","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"blankStyle = {\n return {\n version: 8,\n name: \"Blank\",\n center: [0, 0],\n zoom: 0,\n sources: {},\n layers: [\n {\n id: \"background\",\n type: \"background\",\n paint: { \"background-color\": \"black\" }\n }\n ],\n id: \"blank\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":589,"value":"viewof recenter = Inputs.button(\"re-center\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}