31:T4e3,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, pitch: view.pitch, style: view.basemap, attributionControl: true, minZoom: 10 })); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("mg_src", { type: "geojson", data: { type: "FeatureCollection", features: [] }, attribution: `© Targomo | ${meta.attribution}` }); mapRef.addLayer({ id: "mg_polygons", type: "fill-extrusion", source: "mg_src", layout: {}, paint: { "fill-extrusion-height": heightDef, "fill-extrusion-color": colorDef, "fill-extrusion-opacity": 0.6 } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }32:T633,mgConfig = ({ edgeWeight: "time", travelType: "walk", maxEdgeWeight: "1800", multiGraphReferencedStatisticIds: { wStats: statisticId }, multiGraphAggregationType: "none", multiGraphAggregationInputParameters: { wGrav: {}, wStats: {}, wStatsAgg: {} }, multiGraphPreAggregationPipeline: { wGrav: { type: "gravitation_huff", minSourcesCount: "1", maxResultValueRatio: 1, ignoreOutliers: true, gravitationExponent: "-2.5", probabilityDecay: 0.001, // as we move away from the source, we become less likely to visit aggregationInputParameters: sources.reduce((acc, cur) => { acc[cur.id] = { gravitationAttractionStrength: 1, gravitationPositiveInfluence: cur.positive }; return acc; }, {}) }, wStatsAgg: { type: "math", mathExpression: "{wGrav} * {wStats}", aggregationInputParameters: { wGrav: {}, wStats: {} } } }, multiGraphLayerGeometryDetailPerTile: "5", multiGraphLayerMinGeometryDetailLevel: "5", multiGraphLayerMaxGeometryDetailLevel: "25", multiGraphLayerType: "identity", multiGraphDomainType: "statistic_geometry", multiGraphDomainEdgeAggregationType: "max", multiGraphDomainStatisticGroupId: statisticGroup, multiGraphSerializationFormat: "geojson", multiGraphSerializationMaxGeometryCount: 100000, serviceKey: targomoKey(), serviceUrl: "https://api.targomo.com/westcentraleurope", multiGraphAggregationIgnoreOutliers: true, sources: sources.map(({ x, y, id }) => { return { x, y, id }; }) })33:[{"id":"c0ae7e15069d4b723c428faf20e6e0f7e83bf83f22e7b99a25e3f654859fbc4c0014636fdae8e587dacde2f398379400402a54dbab4cea24443d1378eaca1c7a","href":"https://static.observableusercontent.com/files/c0ae7e15069d4b723c428faf20e6e0f7e83bf83f22e7b99a25e3f654859fbc4c0014636fdae8e587dacde2f398379400402a54dbab4cea24443d1378eaca1c7a","name":"banner.png","type":"image/png","lastModified":1673360690359.495,"size":1242563},{"id":"34afec0dd7dd2ef4a23d261b8da1f28897243f8502e49e3344a73ed84fa01fdbc9c7118da75a5f93fcb71104619506a508c0f84ad07d4a718bcb6a5a01d3d609","href":"https://static.observableusercontent.com/files/34afec0dd7dd2ef4a23d261b8da1f28897243f8502e49e3344a73ed84fa01fdbc9c7118da75a5f93fcb71104619506a508c0f84ad07d4a718bcb6a5a01d3d609","name":"separate_stats.png","type":"image/png","lastModified":1673360690359.495,"size":504550},{"id":"569b392a60f528d918e3dea2c8d08c6ee48f13869ea497608d29f9af1d88010027f43eab3bc6ab1a321cc8a7f21517cbe0ba33539eb11c5ee42aedd5b7ff9929","href":"https://static.observableusercontent.com/files/569b392a60f528d918e3dea2c8d08c6ee48f13869ea497608d29f9af1d88010027f43eab3bc6ab1a321cc8a7f21517cbe0ba33539eb11c5ee42aedd5b7ff9929","name":"GravityConstraints.png","type":"image/png","lastModified":1673360690359.495,"size":586698}] 2f:{"title":"Statistics Gravitation Attractivity","cells":[{"id":896,"value":"# Statistics Gravitation Attractivity\nThe goal of gravitation models is to determine how much \"draw\" or \"attraction\" something exerts. In retail consumer analytics, gravity refers to the attractivity of a retail location towards potential customers. \n\nThe Huff model (or Huff's model), developed by [David B. Huff in 1963](https://www.jstor.org/stable/3144521), is a widely used tool for predicting the probability of a visitor to a site as a function of the distance of the site, its relative attractiveness (compared with other sites), and the relative attractiveness of alternatives.\n\nTargomo's Statistics Context API has some deep functionality, one of which is an implementation of our [multigraph](https://observablehq.com/@targomo/deep-dive-on-multigraph) API with statistics datasets as the aggregation geometries. This allows us to run complex aggregations - in this case the Huff model.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1371,"value":"## What are we looking at here?\n\nIn the example below, we are simulating two store networks: _**our network**:_ ${pinCopy(new maplibre.Marker({ color: \"#444\" })._element,16,4)}, and _**the competition**:_ ${pinCopy(new maplibre.Marker({ color: \"#aaa\" })._element,16,4)}. For simplicity's sake, we are assuming that all locations are equally attractive, aside from distance.\n\nThe color of the statistics cells represent how likely the inhabitants at that location are to visit a store in _**our network**_. Since the cells contain population data, we can therefore multiply the likelihood by the statistic value to get a _total potential visitor_ count.","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"instructions = md`_drag markers to try different scenarios, and see how competition proximity can affect potential visitors_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"totals = md`### ${totalStat} Probable network visitors from \"${chosenStat.description}\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"viewof chosenStat = Inputs.select(statsList, {\n label: \"Select statistic\",\n format: (d) => d.description,\n value: statsList.find((d) => d.statistic_id === 5)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"viewof scale = Inputs.select(\n [\"Reds\", \"Purples\", \"RdPu\", \"YlOrRd\", \"Warm\", \"RdYlGn\", \"RdYlBu\", \"Turbo\"],\n {\n label: \"Select scale\",\n value: d3[\"interpolate\" + \"YlOrRd\"],\n valueof: (d) => d3[\"interpolate\" + d]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"

\n### Resources and notebook code\n#### data wrangling","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"mgData = {\n return await fetch(\n `https://api.targomo.com/statistics/multigraph/monolith?key=${targomoKey()}&serviceUrl=${\"https://api.targomo.com/westcentraleurope\"}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(mgConfig)\n }\n ).then((response) => response.json());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"totalStat = Math.round(\n mgData.data.features.reduce((acc, cur) => acc + cur.properties.wStatsAgg, 0) *\n 100\n) / 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"statsList = meta.stats.filter(\n (d) => d.description.slice(0, 11) === \"Population:\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"meta = {\n return await fetch(\n `https://api.targomo.com/vector-statistics/statistics/meta/v1/${statisticGroup}?key=${targomoKey()}`\n ).then((response) => response.json());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"#### Sources","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"viewof s1 = makeMarker(\"s1\", 10.022621154785156, 53.571307377413326, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"viewof s2 = makeMarker(\"s2\", 10.007171630859377, 53.589244357588655, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"viewof s3 = makeMarker(\"s3\", 9.983482360839846, 53.55662600482464, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof c1 = makeMarker(\"c1\", 9.983482360839846, 53.571307377413326, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"viewof c2 = makeMarker(\"c2\", 10.015411376953127, 53.553158825965724, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"viewof c3 = makeMarker(\"c3\", 10.000305175781252, 53.58842920541724, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"sources = [s1, s2, s3, c1, c2, c3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"makeMarker = (id, x, y, positive) => {\n const lngLat = { lng: x, lat: y };\n const inp = Inputs.input({ x, y, id, positive });\n const marker = new maplibre.Marker({\n draggable: true,\n color: positive ? \"#444\" : \"#aaa\"\n })\n .setLngLat(lngLat)\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n const { lng, lat } = marker.getLngLat();\n inp.value = { x: lng, y: lat, id, positive };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"#### Styling","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"{\n map.getSource(\"mg_src\").setData(mgData.data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"{\n if (map) {\n const sPin = pinCopy(\n new maplibre.Marker({ color: \"#444\" })._element,\n 17,\n 3\n );\n const cPin = pinCopy(\n new maplibre.Marker({ color: \"#aaa\" })._element,\n 17,\n 3\n );\n const l = Plot.legend({\n color: {\n interpolate: (t) => scale(1 - t),\n domain: [1, 0]\n },\n width: 200,\n ticks: 2,\n label: `Probable visitor: ${\n chosenStat.name.length > 22\n ? chosenStat.name.slice(0, 20) + \"...\"\n : chosenStat.name\n }`\n });\n const ctrlDiv = document.querySelector(\".maplibregl-ctrl-top-left\");\n ctrlDiv.innerHTML = `\n

${sPin.outerHTML} In-network

${cPin.outerHTML} Competition

${l.outerHTML}

\n `;\n }\n return md`_set legend..._`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"heightDef = [\n \"interpolate\",\n [\"linear\"],\n [\"get\", \"wStats\"],\n ...meta.stats[0].breakpoints.kmeans.c7\n .map((b, i) => [b, heightFactor * i])\n .flat()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"colorDef = {\n let def = [\"interpolate\", [\"exponential\", 3], [\"get\", \"wGrav\"]];\n const len = 9;\n Array.from({ length: len }).forEach((d, i) => {\n const ratio = (i + 1) / len;\n def.push(ratio);\n def.push(scale(ratio));\n });\n return def;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"colorScale = (interpolator) => {\n return d3\n .scaleLinear()\n .domain([0, 0.01, 0.33, 0.66, 0.99])\n .range([0.1, 0.2, 0.5, 0.8, 0.9])\n .interpolate(\n (i, j) => (t) =>\n d3\n .color(interpolator(i + t * (j - i)))\n .copy({ opacity: i + t * (j - i) })\n .toString()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"pinCopy = (pin, height, translateY) => {\n const s = d3.select(svg`${pin.innerHTML}`);\n const [w, h] = [s.attr(\"width\"), s.attr(\"height\")].map((d) =>\n Number(d.replace(\"px\", \"\"))\n );\n\n let copy = s\n .attr(\"width\", height)\n .attr(\"height\", height)\n .style(\"display\", \"inline\");\n\n if (translateY) {\n copy = copy.style(\"transform\", `translateY(${translateY}px)`);\n }\n\n return copy.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"#### Static values","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"statisticId = chosenStat.statistic_id","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"statisticGroup = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"heightFactor = 75","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"view = ({\n name: \"Hamburg\",\n center: [53.563, 10.003611],\n zoom: 12.25,\n pitch: 45,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Light\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":4,"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":6,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}