31:T424,{ // if the layer is already present, remove it and its source if (map.getLayer(`statistics`)) { map.removeLayer(`statistics`); map.removeSource(`statistics`); } map.addLayer( { id: `statistics`, type: "fill", source: { type: "vector", tiles: [ `https://api.targomo.com/statistics/collections/tiles/79/{z}/{x}/{y}.mvt?columns=${ statistic.statistic_id }&apiKey=${targomoKey()}&serviceUrl=https://api.targomo.com/westcentraleurope` ] }, "source-layer": "statistics", // the layer name is always "statistics" for tiled MVTs layout: {}, paint: { "fill-opacity": 0.55, "fill-color": "rgba(255,255,255,0)", // we'll be updating on zoom, so can set to transparent to begin "fill-outline-color": "rgba(255,255,255,0)" } }, "place_other" ); // set a new trigger value so layer can be updated with breakpoints mutable styletrigger = new Date(); return md`_update tile mvt url if statistic is changed_`; }32:[] 2f:{"title":"Deep Dive on Statistics APIs, Part 2","cells":[{"id":0,"value":"tgmMultiIntro(\"Deep Dive on Statistics APIs, Part 2\", [\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":"## Visualizing\nNow that we have explored the structure of the statistics data, we can move on to putting it on a map. Targomo's statistics data can be used as reference layers or as reachability-based analyses; when not analyzing the statistics, we are in the realm of the [Statistics Layers API](https://www.targomo.com/developers/apis/statistics_layers/). This API works best with mapping libraries which support vector tiles, as the data are best retrieved as MVT format, but other libraries can be used as well.","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":689,"value":"### Tile URL\nStatistics Layers are available as tiled `MVT` or `GeoJSON`.\nIndividual statistics can be returned with the geometries but setting `columns=0,1,2` as a query param. Multiple columns can be returned, but this increases the size of the retuned tile, so for this demo, we'll update the url with a single column for the selected statistic.\n#### Tile URL\n`https://api.targomo.com/statistics/collections/tiles/79/{z}/{x}/{y}.mvt?columns=${statistic.statistic_id}&apiKey=__targomo_key_here__&serviceUrl=https://api.targomo.com/westcentraleurope`","pinned":false,"hidden":false,"mode":"md"},{"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[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"statistic","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"{\n return md`\n## Breakpoints\nto facilitate map display, breakpoints have been pre-calculated for each statistic, at each zoom level (group). The available breakpoints are:\n${colors_methods.map((m) => `- ${m}\\n`)}\neach method has 3 classses available (c5, c7, c9), with 4, 6, and 8 members each, respectfully. This is so a legend can add on the 5th/7th/9th entry as the max val for that stat, if desired.\n\n_**Note on quantiles:** quantile groups are determined by breaking the data into equal-sized groups. With some data distributions, the full class count can not be determined, so we are including **only** the returned classes from the quantile grouping._\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof color_dist = Inputs.select(colors_methods, {\n label: \"Breakpoints\",\n value: \"kmeans\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"datatable(\n statistic.breakpoints.map((d) => {\n return {\n min_zoom: d.min_zoom,\n breakpoints: d[color_dist].c7.join(\", \")\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"#### Interpolate color definition from breakpoints","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"Inputs.bind(\n Inputs.select(colors_scales, {\n label: \"Color Scheme\",\n format: (x) => x.name\n }),\n viewof color_scale\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"colorDef = {\n const breakpoints = statistic.breakpoints\n .sort((a, b) => b.min_zoom - a.min_zoom)\n .find((d) => zoom > d.min_zoom)[color_dist].c7;\n\n return [\n \"interpolate\",\n [\"linear\"],\n [\"get\", `${statistic.statistic_id}`],\n ...breakpoints\n .map((b, i) => {\n return [b, color_scale.scale(breakpoints.length)[i]];\n })\n .flat()\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"## Descriptive stats for selected statistic","pinned":false,"hidden":false,"mode":"md"},{"id":779,"value":"datatable(statistic.descriptive_stats.sort((a, b) => b.min_zoom - a.min_zoom))","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"Inputs.bind(\n 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 }),\n viewof statistic\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof color_scale = Inputs.select(colors_scales, {\n label: \"Color Scheme\",\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"Inputs.bind(\n Inputs.select(colors_methods, {\n label: \"Breakpoints (7-class)\",\n value: \"kmeans\"\n }),\n viewof color_dist\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"swatches(\n color_scale.scale,\n statistic.breakpoints\n .sort((a, b) => b.min_zoom - a.min_zoom)\n .find((d) => zoom > d.min_zoom)\n [color_dist].c7.map((c) => Math.trunc(c * 1000) / 1000)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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: [2.337618, 48.861012],\n zoom: 12,\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":601,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"{\n styletrigger;\n\n if (map.getLayer(`statistics`)) {\n map.setPaintProperty(\"statistics\", \"fill-color\", colorDef);\n }\n return md`_update breakpoints based on zoom and selected statistic_`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"colors_scales = [\n {\n name: \"YlOrRd\",\n scale: (l) => {\n return d3.schemeYlOrRd[l];\n }\n },\n {\n name: \"YlGnBu\",\n scale: (l) => {\n return d3.schemeYlGnBu[l];\n }\n },\n {\n name: \"RdPu\",\n scale: (l) => {\n return d3.schemeRdPu[l];\n }\n },\n {\n name: \"Viridis\",\n scale: (l) => {\n return Array.from({ length: l }).map((u, i) => {\n return d3.interpolateViridis((i + 1) / l);\n });\n }\n },\n {\n name: \"Plasma\",\n scale: (l) => {\n return Array.from({ length: l }).map((u, i) => {\n return d3.interpolatePlasma((i + 1) / l);\n });\n }\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"colors_methods = [\"equal_interval\", \"kmeans\", \"quantile\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"mutable zoom = 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"mutable styletrigger = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"resourcesSpacer","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":14,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"tableStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"{\n map.on(\"zoom\", () => {\n mutable zoom = map.getZoom();\n });\n return md`_set zoom so that layer modifying cells can react_`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}