31:T512,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: {}, filter: ["<=", "reachability", 1200], paint: { "fill-extrusion-height": heightDef, "fill-extrusion-color": colorDef, "fill-extrusion-opacity": 0.65 } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }32:T40e,gravClasses = Object.entries( mgData.data.features .filter((d) => d.properties.reachability <= 1200) .map((d) => { const wGrav = d.properties.wGrav; let grvClass; if (wGrav < 0.01) { grvClass = "FULL TWO"; } else if (wGrav >= 0.01 && wGrav < 0.33) { grvClass = "LEANING TWO"; } else if (wGrav >= 0.33 && wGrav < 0.66) { grvClass = "BATTLEGROUND"; } else if (wGrav >= 0.66 && wGrav < 0.99) { grvClass = "LEANING ONE"; } else { grvClass = "FULL ONE"; } return { ...d.properties, ...{ grvClass } }; }) .reduce((acc, cur) => { acc[cur.grvClass] = acc[cur.grvClass] ? acc[cur.grvClass] + cur.statistics : cur.statistics; return acc; }, {}) ).map(([key, val]) => ({ class: key, globalClass: key.split(" ").length === 1 ? "BATTLE" : key.split(" ")[1], statistics: val, color: d3 .color(colorScale(scale)(classes[key.split(" ").join("_")])) .copy({ opacity: 0.65 }) .formatRgb() }))33:T981,mgConfig = ({ multiGraphAggregationType: "none", multiGraphSerializationFormat: "geojson", multiGraphSerializationMaxGeometryCount: 100000, multiGraphAggregationInputParameters: { reachability: {}, statistics: {}, wGrav: {} }, multiGraphAggregationIgnoreOutliers: true, // multiGraphAggregationMinSourcesCount: 2, multiGraphDomainType: "statistic_geometry", edgeWeight: "time", travelType: "walk", maxEdgeWeight: 1200, maxWalkingTimeFromSource: -1, time: null, frame: null, multiGraphLayerType: "identity", multiGraphDomainStatisticGroupId: `${statisticGroup}`, multiGraphLayerUnboundedStatistics: true, multiGraphReferencedStatisticIds: { statistics: chosenStat.statistic_id }, multiGraphPreAggregationPipeline: { // calculate the reachabilty (travel time) for the graph nodes/edges reachability: { type: "routing_union", minSourcesCount: 1, // minSourcesRatio: 1, maxResultValueRatio: 1, ignoreOutliers: true, // input parameters are the configs for the sources which are considered in the pipeline aggregationInputParameters: (() => { const obj = {}; obj[location1.id] = {}; obj[location2.id] = {}; return obj; })() }, // calculate the gravitation attraction for the graph nodes/edges wGrav: { type: "gravitation_huff", minSourcesCount: 1, maxResultValueRatio: 1, // minSourcesRatio: 1, ignoreOutliers: true, gravitationExponent: -2.4, // probabilityDecay: 0.005, // input parameters are the configs for the sources which are considered in the pipeline // for gravitation, we can set the sttraction strength as well as the influence polarity aggregationInputParameters: (() => { const obj = {}; obj[location1.id] = { gravitationAttractionStrength: 1, // location 1 has a positive polarity - we are considering it "in-network" gravitationPositiveInfluence: true }; obj[location2.id] = { gravitationAttractionStrength: 1, // location 1 has a negative polarity - we are considering it "out-of-network" or "competition" gravitationPositiveInfluence: false }; return obj; })() } }, sources: [location1, location2], serviceKey: targomoKey(), serviceUrl: "https://api.targomo.com/westcentraleurope" })34:[{"id":"569b392a60f528d918e3dea2c8d08c6ee48f13869ea497608d29f9af1d88010027f43eab3bc6ab1a321cc8a7f21517cbe0ba33539eb11c5ee42aedd5b7ff9929","href":"https://static.observableusercontent.com/files/569b392a60f528d918e3dea2c8d08c6ee48f13869ea497608d29f9af1d88010027f43eab3bc6ab1a321cc8a7f21517cbe0ba33539eb11c5ee42aedd5b7ff9929","name":"GravityConstraints.png","type":"image/png","lastModified":1672924923813.093,"size":586698},{"id":"34afec0dd7dd2ef4a23d261b8da1f28897243f8502e49e3344a73ed84fa01fdbc9c7118da75a5f93fcb71104619506a508c0f84ad07d4a718bcb6a5a01d3d609","href":"https://static.observableusercontent.com/files/34afec0dd7dd2ef4a23d261b8da1f28897243f8502e49e3344a73ed84fa01fdbc9c7118da75a5f93fcb71104619506a508c0f84ad07d4a718bcb6a5a01d3d609","name":"separate_stats.png","type":"image/png","lastModified":1673282162947.286,"size":504550},{"id":"c0ae7e15069d4b723c428faf20e6e0f7e83bf83f22e7b99a25e3f654859fbc4c0014636fdae8e587dacde2f398379400402a54dbab4cea24443d1378eaca1c7a","href":"https://static.observableusercontent.com/files/c0ae7e15069d4b723c428faf20e6e0f7e83bf83f22e7b99a25e3f654859fbc4c0014636fdae8e587dacde2f398379400402a54dbab4cea24443d1378eaca1c7a","name":"banner.png","type":"image/png","lastModified":1673292553190.355,"size":1242563}] 2f:{"title":"Gravitation Color Scheme Playground","cells":[{"id":896,"value":"# Gravitation Color Scheme Playground\nThe scenario might not be the best way to analyze gravity, but we can visualize different color schemes for readability.","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"_drag markers to try different scenarios_","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"Plot.plot({\n x: {\n padding: 0.1,\n align: 0.5,\n type: \"band\",\n domain: Object.keys(classes).map((d) => d.split(\"_\").join(\" \")),\n label: null\n },\n y: {\n grid: true,\n label: chosenStat.description\n },\n width: width,\n height: 200,\n marginLeft: 50,\n marks: [\n Plot.barY(gravClasses, {\n x: \"class\",\n y: \"statistics\",\n fill: \"color\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"viewof scale = Inputs.select(\n [\n \"RdYlBu\",\n \"Turbo\",\n \"Plasma\",\n \"Viridis\",\n \"Inferno\",\n \"Rainbow\",\n \"Cividis\",\n \"Spectral\"\n ],\n {\n label: \"Select scale\",\n valueof: (d) => d3[\"interpolate\" + d]\n }\n)","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":714,"value":"

\n### Resources and notebook code\n#### data wrangling","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"globalClasses = Object.entries(\n gravClasses.reduce((acc, cur) => {\n acc[cur.globalClass] = acc[cur.globalClass]\n ? acc[cur.globalClass] + cur.statistics\n : cur.statistics;\n return acc;\n }, {})\n)\n .map((d) => ({\n class: d[0],\n statistic: d[1],\n color: colorScale(scale)(d[0] === \"ONE\" ? 0 : d[0] === \"TWO\" ? 1 : 0.33)\n }))\n .sort((a, b) => b.statistic - a.statistic)","pinned":false,"hidden":false,"mode":"ojs"},{"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":337,"value":"{\n map.getSource(\"mg_src\").setData(mgData.data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof location1 = {\n const lngLat = { lng: 9.993534, lat: 53.578313 };\n const inp = Inputs.input({ x: lngLat.lng, y: lngLat.lat, id: \"l1\" });\n const marker = new maplibre.Marker({\n draggable: true,\n color: colorScale(scale)(0)\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: \"l1\" };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof location2 = {\n const lngLat = { lng: 10.013918, lat: 53.575697 };\n const inp = Inputs.input({ x: lngLat.lng, y: lngLat.lat, id: \"l2\" });\n const marker = new maplibre.Marker({\n draggable: true,\n color: colorScale(scale)(1)\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: \"l2\" };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"statsList = meta.stats.filter((d) => d.type === \"ABSOLUTE\")","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":729,"value":"#### styling","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"heightDef = [\n \"interpolate\",\n [\"linear\"],\n [\"get\", \"statistics\"],\n ...meta.stats[0].breakpoints.kmeans.c7\n .map((b, i) => [b, heightFactor * i])\n .flat()\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((i, j) => (t) => interpolator(i + t * (j - i)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"colorDef = [\n \"step\",\n [\"get\", \"wGrav\"],\n colorScale(scale)(classes.FULL_TWO),\n classes.LEANING_ONE,\n colorScale(scale)(classes.LEANING_TWO),\n classes.BATTLEGROUND,\n colorScale(scale)(classes.BATTLEGROUND),\n classes.LEANING_TWO,\n colorScale(scale)(classes.LEANING_ONE),\n classes.FULL_TWO,\n colorScale(scale)(classes.FULL_ONE)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"#### static values","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"classes = ({\n FULL_ONE: 0,\n LEANING_ONE: 0.01,\n BATTLEGROUND: 0.33,\n LEANING_TWO: 0.66,\n FULL_TWO: 0.99\n})","pinned":false,"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.575, 10.003611],\n zoom: 13.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":"$W34","stdlib":"1","titling":"auto"}