2f:[] 2d:{"title":"Deep Dive on Statistics APIs, Part 3","cells":[{"id":0,"value":"tgmMultiIntro(\"Deep Dive on Statistics APIs, Part 3\", [\n [\n \"Statistics Layers API\",\n \"https://www.targomo.com/developers/apis/statistics_layers/\"\n ],\n [\n \"Statistics Context API\",\n \"https://www.targomo.com/developers/apis/statistics_context/\"\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Analyzing\nNow that we have explored the structure of the statistics data, and put it on on a map, we can move the real meat of the Statistics APIs: _reachability-based analyses_.\nAnalytical statistics functions are collected in the [Statistics Context API](https://www.targomo.com/developers/apis/statistics_context/).","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"### Statistic Collection\nLet's review the ${meta.name} collection","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"meta = fetch(\n `https://api.targomo.com/statistics/collection/meta/79?key=${targomoKey()}`\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"statsRequestConfig = ({\n statisticIds: [statistic.statistic_id], // all the statistics we want to include in the results\n statisticCollectionId: 79,\n edgeWeight: \"time\",\n travelType: \"bike\",\n maxEdgeWeight: 900,\n sources: [s1, s2],\n serviceUrl: \"https://api.targomo.com/westcentraleurope\",\n serviceKey: targomoKey()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"## Drag markers to calculate statistics","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"viewof map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \"map\" object with the mapboxgl.Map constructor, referencing\n // the container div\n const mapRef = (container.value = new maplibre.Map({\n container,\n center: MapSources.getCenter(),\n zoom: 13,\n style: TgmClient().basemaps.getGLStyleURL(\"Light\"),\n attributionControl: false\n }))\n .addControl(new maplibre.NavigationControl())\n .addControl(\n new maplibre.AttributionControl({\n customAttribution:\n \"© Targomo\"\n })\n );\n\n await new Promise((resolve, reject) => {\n mapRef.on(\"load\", async () => {\n resolve();\n });\n });\n\n invalidation.then(() => mapRef.remove());\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"## Selected Statistic\nThe collection metadata contains all the available statistics for that collection.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof statistic = Inputs.select(Object.values(meta.stats), {\n label: \"Statistic\",\n format: (x) => x.names.en,\n value: Object.values(meta.stats).find((t) => t.name === \"Total Population\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"### Source Dependent vs. Source Independent\nWe can request \"chart-ready\" statistics as either \"source dependent\" or \"source independent\". This determines whether or not we are counting statistics which are reachable by all sources (independent) or if we are allocating the statistic only to the _closest_ source (dependent).","pinned":false,"hidden":false,"mode":"md"},{"id":995,"value":"md`\n**Total Reachable \"${statistic.names.en}\"**\n\n| | s1 | s2 | total |\n|---|---|---|---|\n|dependent|${sourceDependent.s1}|${sourceDependent.s2}|${totalDependent}|\n|independent|${sourceIndependent.s1}|${sourceIndependent.s2}|${totalIndependent}|\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"### Reachable \"${statistic.names.en}\" by distance","pinned":false,"hidden":false,"mode":"md"},{"id":1035,"value":"Swatches(\n d3.scaleOrdinal(\n [\"s1-dependent\", \"s1-independent\", \"s2-dependent\", \"s2-independent\"],\n [\n \"rgb(78, 121, 167)\",\n \"rgba(78, 121, 167, .6)\",\n \"rgb(242, 142, 44)\",\n \"rgba(242, 142, 44, .6)\"\n ]\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"Plot.plot({\n height: 300,\n x: { axis: null },\n y: { grid: true },\n color: { legend: true, fill: (d) => d.fill },\n marks: [\n Plot.barY(stats, {\n x: \"source\",\n y: \"value\",\n fill: (d) => d.fill,\n fx: \"seconds\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"dependent = fetch(\n `https://api.targomo.com/statistics/charts/dependent?apiKey=${targomoKey()}&serviceUrl=${\n statsRequestConfig.serviceUrl\n }`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(statsRequestConfig)\n }\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"independent = fetch(\n `https://api.targomo.com/statistics/charts/independent?apiKey=${targomoKey()}&serviceUrl=${\n statsRequestConfig.serviceUrl\n }`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(statsRequestConfig)\n }\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1062,"value":"### Getting to the point more quickly...\nThe `/charts/` endpoints are perfect for building detailed reports of reachability, but sometimes all we want/need is the overall stats","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"resourcesSpacer","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"makeMarker = (lngLatId, color) => {\n const { lng, lat, id } = lngLatId;\n const inp = Inputs.input({ x: lng, y: lat, id });\n const marker = new maplibre.Marker({\n draggable: true,\n color: color\n })\n .setLngLat([lng, lat])\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n const { lng, lat } = marker.getLngLat();\n inp.value = { x: lng, y: lat, id };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"stats = [\n ...Object.entries(independent.individualStatistics)\n .map(([source, stats]) =>\n Object.entries(stats.statistics[statistic.statistic_id]).map(\n ([seconds, value]) => ({\n source: source + \" independent\",\n seconds: +seconds,\n value,\n t: \"independent\",\n fill:\n source === \"s1\"\n ? \"rgba(78, 121, 167, .6)\"\n : \"rgba(242, 142, 44, .6)\"\n })\n )\n )\n .flat(),\n ...Object.entries(dependent.individualStatistics)\n .map(([source, stats]) =>\n Object.entries(stats.statistics[statistic.statistic_id]).map(\n ([seconds, value]) => ({\n source: source + \" dependent\",\n seconds: +seconds,\n value,\n t: \"dependent\",\n fill: source === \"s1\" ? \"rgb(78, 121, 167)\" : \"rgb(242, 142, 44)\"\n })\n )\n )\n .flat()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"totalDependent = Math.round(\n Object.values(dependent.statistics[statistic.statistic_id]).reduce(\n (acc, cur) => {\n return acc + cur;\n },\n 0\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"sourceDependent = ({\n s1: Math.round(\n Object.values(\n dependent.individualStatistics.s1.statistics[statistic.statistic_id]\n ).reduce((acc, cur) => {\n return acc + cur;\n }, 0)\n ),\n s2: Math.round(\n Object.values(\n dependent.individualStatistics.s2.statistics[statistic.statistic_id]\n ).reduce((acc, cur) => {\n return acc + cur;\n }, 0)\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"totalIndependent = Math.round(\n Object.values(independent.statistics[statistic.statistic_id]).reduce(\n (acc, cur) => {\n return acc + cur;\n },\n 0\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"sourceIndependent = ({\n s1: Math.round(\n Object.values(\n independent.individualStatistics.s1.statistics[statistic.statistic_id]\n ).reduce((acc, cur) => {\n return acc + cur;\n }, 0)\n ),\n s2: Math.round(\n Object.values(\n independent.individualStatistics.s2.statistics[statistic.statistic_id]\n ).reduce((acc, cur) => {\n return acc + cur;\n }, 0)\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"data = fetch(\"https://api.weather.gov/gridpoints/OKX/33,37/forecast\").then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1093,"value":"MapSources = new mapSources([\n { lng: 2.350838, lat: 48.861653, id: \"s1\" },\n { lng: 2.362131, lat: 48.858889, id: \"s2\" }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"class mapSources {\n sources = [];\n constructor(sources) {\n this.sources = sources;\n }\n getSource(id) {\n return this.sources.find((d) => d.id === id);\n }\n getCenter() {\n const lng =\n this.sources.reduce((acc, cur) => {\n acc += cur.lng;\n return acc;\n }, 0) / this.sources.length;\n const lat =\n this.sources.reduce((acc, cur) => {\n acc += cur.lat;\n return acc;\n }, 0) / this.sources.length;\n\n return { lng, lat };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"viewof s1 = {\n const lngLatId = MapSources.getSource(\"s1\");\n return makeMarker(lngLatId, \"rgb(78, 121, 167)\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"viewof s2 = {\n const lngLatId = MapSources.getSource(\"s2\");\n return makeMarker(lngLatId, \"rgb(242, 142, 44)\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {\n attribution,\n tgmCoreClient,\n codeStyle,\n tableStyle,\n datatable,\n tgmMultiIntro,\n targomoKey,\n resourcesSpacer\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"TgmClient = function () {\n return tgmCoreClient(\"westcentraleurope\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"function swatches(colors, labels) {\n return html`

${colors(labels.length).map(\n (c, i) => `

${labels && labels.length ? labels[i] : \"\"}

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"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":1031,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"tableStyle","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}