31:T5d2,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: city.center[0], lng: city.center[1] }, zoom: city.zoom, pitch: city.pitch, style: tgmCoreClient("westcentraleurope").basemaps.getGLStyleURL(mode.name), attributionControl: true })); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("h3_src", { type: "geojson", data: geoParquet, attribution: "© Targomo" }); mapRef.addLayer({ id: "h3_polygons", type: "fill-extrusion", source: "h3_src", layout: {}, filter: [">", ["get", "0_00"], 0], paint: { "fill-extrusion-height": buildHeightDef("0_00"), "fill-extrusion-color": buildColorDef("0_00", mode.interpolator), "fill-extrusion-opacity": 0.6, "fill-extrusion-height-transition": { duration: framerate }, "fill-extrusion-color-transition": { duration: framerate } } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }32:Tb70,function Scrubber( values, { format = (value) => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {} ) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (timer !== null) clearTimeout(timer), (timer = null); if (interval !== null) clearInterval(interval), (interval = null); } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (interval !== null) clearInterval(interval), (interval = null); timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = (event) => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.update = (value) => { form.value = value; form.o.value = format(form.value, value, values); form.i.value = values.indexOf(value); form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }33:[{"id":"5b101c360fb494ded3a5855af2eeb6d4edbc8da1a82cfd724320e6eea5b29d4d811adae88b75418957efbf6fda50689c10fef6f38ea8459cc7d532c434cc2d9d","href":"https://static.observableusercontent.com/files/5b101c360fb494ded3a5855af2eeb6d4edbc8da1a82cfd724320e6eea5b29d4d811adae88b75418957efbf6fda50689c10fef6f38ea8459cc7d532c434cc2d9d","name":"london_res10.parq","type":"application/octet-stream","lastModified":1666019839452.175,"size":1954704},{"id":"74472a7aa58f84779616aba129d311fa3406ac4f223f2ceb41d120ad329c11b837306553977731e266d6f45882651067caa345240b8909dfeffc803e323addfe","href":"https://static.observableusercontent.com/files/74472a7aa58f84779616aba129d311fa3406ac4f223f2ceb41d120ad329c11b837306553977731e266d6f45882651067caa345240b8909dfeffc803e323addfe","name":"london_res9.parquet","type":"application/octet-stream","lastModified":1666165625826.493,"size":849356},{"id":"5b101c360fb494ded3a5855af2eeb6d4edbc8da1a82cfd724320e6eea5b29d4d811adae88b75418957efbf6fda50689c10fef6f38ea8459cc7d532c434cc2d9d","href":"https://static.observableusercontent.com/files/5b101c360fb494ded3a5855af2eeb6d4edbc8da1a82cfd724320e6eea5b29d4d811adae88b75418957efbf6fda50689c10fef6f38ea8459cc7d532c434cc2d9d","name":"london_res10.parquet","type":"application/octet-stream","lastModified":1666165625843.346,"size":1954704}] 2f:{"title":"Staypoint Data Exploration","cells":[{"id":0,"value":"# Staypoint Data Exploration\nAt [Targomo](https://www.targomo.com/), we deal with location data.\n\nOne of the best sources of insight is population movement data. We take this mobility data and isolate \"staypoints\", which are locations where the user stayed for a given period of time. \n\nWe want to be able to ascertain where people are at a given time-of-day/day-of-week, so we can determine potential visitors within a walkshed. e.g. _\"how many people are within a 15-minute walk of your restaurant(s) on weekdays at noon?\"_ You can read a bit more about our data processing [here](https://targomo.medium.com/how-we-learned-to-love-dask-and-achieved-a-40x-speedup-aa14e72d99c0).\n\n## Where are people in London?\nWe create staypoint data for many markets - here we are aggregating our staypoint data to h3 hexagons for London, and we can see where people are during the course of the day, for each day of the week. \n\nFor example, notice how fewer people are out Thursday evening as compared to Friday evening.","pinned":false,"hidden":false,"mode":"md"},{"id":640,"value":"html`

${viewof thursday18h} vs ${viewof friday18h}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"Or notice how few folks are out Monday 6am as compared to Monday 10am when they are at work. ","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"html`

${viewof monday6h} vs ${viewof monday10h}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof frame = Scrubber(\n Array.from({ length: 7 }, (d, di) =>\n Array.from({ length: 24 }, (h, hi) => di + \"_\" + (hi < 10 ? \"0\" + hi : hi))\n ).flat(),\n {\n // loop: false,\n autoplay: false,\n delay: framerate,\n format: (d) => {\n const [day, hour] = d.split(\"_\");\n return `${parseDay(+day)}, ${+hour}h`;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof framerate = Inputs.select([50, 100, 150, 200, 250, 300], {\n label: \"Select framerate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof mode = Inputs.select(\n [\n { name: \"Light\", interpolator: d3.interpolateReds },\n { name: \"Dark\", interpolator: d3.interpolateViridis }\n ],\n { label: \"Select mode\", format: (d) => d.name }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"

\n### map styling","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"{\n map.setFilter(\"h3_polygons\", [\">\", [\"get\", frame], 0]);\n map.setPaintProperty(\n \"h3_polygons\",\n \"fill-extrusion-color\",\n buildColorDef(frame, mode.interpolator)\n );\n map.setPaintProperty(\n \"h3_polygons\",\n \"fill-extrusion-height\",\n buildHeightDef(frame)\n );\n return md`_change color and height based on frame..._`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"{\n if (map) {\n const [_d, _h] = frame.split(\"_\");\n const ctrlDiv = document.querySelector(\".maplibregl-ctrl-bottom-left\");\n ctrlDiv.innerHTML = `

${city.name}, ${parseDay(\n +_d\n )}, ${+_h}h

`;\n }\n return md`_set frame details block..._`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"function buildColorDef(dayhour, interpolator) {\n const scale = scaleCluster()\n .domain(breaks)\n .range(Array.from({ length: 9 }).map((d, i) => interpolator(i / (9 - 1))));\n\n const matchExpression = [\"interpolate\", [\"linear\"], [\"get\", dayhour]];\n // Calculate color values for each country based on 'hdi' value\n for (const b of breaks) {\n const color = scale(b);\n matchExpression.push(b, color);\n }\n\n return matchExpression;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"function buildHeightDef(dayhour) {\n const scale = scaleCluster()\n .domain(breaks)\n .range(Array.from({ length: 9 }).map((d, i) => 4000 * (i / (9 - 1))));\n\n const matchExpression = [\"interpolate\", [\"linear\"], [\"get\", dayhour]];\n // Calculate color values for each country based on 'hdi' value\n for (const b of breaks) {\n const height = scale(b);\n matchExpression.push(b, height);\n }\n\n return matchExpression;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"### data building","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"geoParquet = {\n return {\n type: \"FeatureCollection\",\n features: dt.array(\"h3_ind\").map((h) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [h3.h3ToGeoBoundary(h, true)]\n },\n properties: dt\n .params({ h: h })\n .filter((d) => d.h3_ind === h)\n .object()\n };\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"london = FileAttachment(\"london_res9.parquet\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"dt = getDataTable(london)","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"breaks = {\n const fullValues = Array.from({ length: 7 })\n .map((d, di) =>\n Array.from({ length: 24 })\n .map((h, hi) => dt.array(`${di}_${hi < 10 ? \"0\" + hi : hi}`))\n .flat()\n )\n .flat();\n const sample = ss.sample(fullValues, 200000);\n const breaks = ss.ckmeans(sample, 9).map((d) => ss.max(d));\n breaks[breaks.length - 1] = ss.max(fullValues);\n return breaks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"### settings and functions","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"city = ({\n name: \"London\",\n center: [51.482, -0.0812],\n zoom: 11.1,\n pitch: 45\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"function parseDay(day) {\n switch (day) {\n case 0:\n return \"Monday\";\n case 1:\n return \"Tuesday\";\n case 2:\n return \"Wednesday\";\n case 3:\n return \"Thursday\";\n case 4:\n return \"Friday\";\n case 5:\n return \"Saturday\";\n case 6:\n return \"Sunday\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"async function getDataTable(file) {\n await init();\n const arrayBuffer = await file.arrayBuffer();\n const arr = new Uint8Array(arrayBuffer);\n const arrowIPC = readParquet(arr);\n const dt = aq.fromArrow(arrowIPC);\n return dt;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"readParquet = parquetWasm.readParquet","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"init = parquetWasm.default","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"### imports","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"parquetWasm = import(\"https://cdn.jsdelivr.net/npm/parquet-wasm@0.1.1/web.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {\n tgmCoreClient,\n tgmNotice,\n targomoKey,\n tgmIntro,\n codeStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"import { Scrubber as Scroober } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"h3 = require(\"h3-js@3.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"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":90,"value":"ss = require(\"simple-statistics\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"scaleCluster = require(\"d3-scale-cluster\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"### buttons and actions","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"viewof friday18h = Inputs.button(\"Friday, 18h\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"viewof thursday18h = Inputs.button(\"Thursday, 18h\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof monday6h = Inputs.button(\"Monday, 6h\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"viewof monday10h = Inputs.button(\"Monday, 10h\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"{\n if (monday6h > 0) viewof frame.update(\"0_06\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"{\n if (monday10h > 0) viewof frame.update(\"0_10\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"{\n if (thursday18h > 0) viewof frame.update(\"3_18\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"{\n if (friday18h > 0) viewof frame.update(\"4_18\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"### styles","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}