29:null 2a:["$","title",null,{"children":"Bulle de confinement : Paris | Pierre Ripoll | Observable"}] 2f:T10c4,{ const context = DOM.context2d(width, height), path = d3.geoPath().context(context); // Bind the drag behavior for interaction. address; d3.select(context.canvas).call( drag(mutable selectors, context.canvas, render) ); var zoom_behavior = d3.zoom(); d3.select(context.canvas).call( zoom_behavior.scaleExtent([1, 20]).on("zoom", () => { mutable cached_transform = d3.event.transform; return render(d3.event.transform); }) ); d3.select(context.canvas).call( zoom_behavior.transform, mutable cached_transform ); function render(transform = mutable cached_transform) { context.save(); context.clearRect(0, 0, width, height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); context.beginPath(); for (let k = 0; k < lines.length; k++) { path({ type: "LineString", coordinates: lines[k] }); } const city_color = d3.color("#ccc"); city_color.opacity = 0.7; context.strokeStyle = city_color; context.lineWidth = 0.5; context.stroke(); var colorIndex = 0; context.setLineDash([3, 3]); const text_limit_area = limit_area < 1000 ? `${limit_area} m` : `${Math.round(limit_area / 100) / 10} km`; context.font = "6px sans-serif"; context.textAlign = "center"; context.textBaseline = "bottom"; for (const s of mutable selectors) { context.beginPath(); const [x, y, radius] = [s.x, s.y, pixel_area_radius]; context.moveTo(x + radius, y); context.arc(x, y, radius, 0, 2 * Math.PI); context.strokeStyle = color(0); context.fillStyle = color(0); context.lineWidth = 0.5; context.fillText(text_limit_area, x, y - radius); context.stroke(); } context.setLineDash([]); const zone = mutable zone; if (show_zone_streets) { context.beginPath(); for (const e of zone.edges) { path({ type: "LineString", coordinates: lines[e] }); } const zone_color = d3.color(color(0)); zone_color.opacity = 0.5; context.strokeStyle = zone_color; context.lineWidth = 0.5; context.stroke(); } if (show_path_proposal && zone.path.length > 0) { context.strokeStyle = color(0); context.beginPath(); for (let i = 0; i < zone.path.length; i++) { const nA = zone.path[i], nB = zone.path[(i + 1) % zone.path.length]; const index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { path({ type: "LineString", coordinates: lines[nodes[nA].edges[index]] }); } } context.lineWidth = 1; context.stroke(); } if (show_path_join && zone.join_path.length > 0) { context.strokeStyle = color(0); context.beginPath(); for (let i = 0; i < zone.join_path.length; i++) { const nA = zone.join_path[i], nB = zone.join_path[(i + 1) % zone.join_path.length]; const index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { path({ type: "LineString", coordinates: lines[nodes[nA].edges[index]] }); } } context.lineWidth = 1; context.stroke(); } if (show_arbres) { context.lineWidth = 1 / transform.k; context.beginPath(); for (const a of zone.arbres) { const [x, y, k, radius] = [a[0], a[1], transform.k, 3]; context.moveTo(x + radius / Math.sqrt(k), y); context.arc(x, y, radius / Math.sqrt(k), 0, 2 * Math.PI); } context.fillStyle = d3.color("#2ca02c"); context.strokeStyle = "white"; context.fill(); context.stroke(); } colorIndex = 0; context.lineWidth = 3 / transform.k; for (const s of mutable selectors) { context.beginPath(); const [x, y, k, radius] = [s.x, s.y, transform.k, 10]; context.moveTo(x + radius / k, y); context.arc(x, y, radius / k, 0, 2 * Math.PI); context.fillStyle = color(colorIndex++); context.strokeStyle = "white"; context.fill(); context.stroke(); } context.restore(); return context.canvas; } yield render(); }30:Ta4b,md` J'ai fais ce petit outil à partir des [données de Paris](https://opendata.paris.fr/explore/dataset/troncon_voie/information/). Vous pouvez voir votre "bulle" de confinement en surbrillance bleu ainsi qu'une proposition de parcours en gras qui vous permettra d'explorer au maximum votre quartier en toute légalité 😉 Concernant le flou de la méthode pour mesurer cette bulle - 1 km à vol d'oiseau ? ou bien 1 km en marchant depuis chez soi ? - vous pouvez tester vous même la différence en sélectionnant la règle à utiliser en dessous du plan ! Vous pouvez également dézoomer et zoomer la carte mais aussi déplacer le centre de la zone ainsi que changer la distance maximale de votre bulle de confinement ! A noter : la bulle de confinement ressemble plutôt à un diamant si on utilise la règle de la distance de marche. C'est dû au fait que le coût du chemin est calculé avec la longueur réelle de la rue, application pratique de la [distance de Manhattan](https://fr.wikipedia.org/wiki/Distance_de_Manhattan) ! Pour générer mon parcours je trouve toutes les feuilles de mon abre de chemins - c.a.d grossièrement les points les plus loins du centre de ma zone - puis je calcule les chemins pour relier ce feuilles deux à deux. Enfin je supprime les chemins qui me font passer deux fois au même endroit (on est pas des animaux !). J'utilise le travail de [Philippe Rivière](https://observablehq.com/@fil/manhattan-voronoi-osmnx) pour visualiser le graph mais aussi son [algorithme](https://observablehq.com/@fil/dijkstra) qui permet de calculer des chemins (il est aussi à l'origine de l'utilisation de Path2D pour dessiner le fond du graph ce qui réduit fortement le calcul !). J'ai aussi reçu de l'aide de [Sylvain Lesage](https://observablehq.com/@severo/drag-zoom-canvas) pour le drag and zoom et évidemment de [Romain Vuillemot](http://romain.vuillemot.net/) qui m'a orienté pendant ce prototypage. Je fais appel à l'API d'OpenStreetMap : [Nominatim](https://nominatim.org/release-docs/latest/api/Overview/) (et on les remercie pour leur documentation et leur accès gratuit !) pour gérer la recherche d'adresse. Enfin pour connecter les feuilles de mon arbre j'utilise la librairie [ngraph](https://github.com/anvaka/ngraph.path) qui est très très rapide ⚡ ! Merci également à toute l'équipe [SICAL](https://liris.cnrs.fr/sical) ❤️ Vous pouvez aussi aller voir le travail qui a inspiré ce prototype [là (petite version)](https://observablehq.com/@pierreleripoll/small-lyon-voronoi) et [là (grande version)](https://observablehq.com/@pierreleripoll/lyon-voronoi). `31:Td89,update_origins = ids => { var zone_nodes = []; const origin = ids[0]; if (range_type === "manhattan") { var short_tree = shortest_tree({ graph, origins: ids, cutoff: limit_area }).next().value; //add all nodes in zone zone_nodes = short_tree.origin .map((v, i) => (v === origin ? i : -1)) .filter(v => v > -1); } else if (range_type === "crowflight") { zone_nodes = pts .map((p, i) => i) .filter(i => { let pt = pts[i]; let o = pts[origin]; return Math.hypot(pt[0] - o[0], pt[1] - o[1]) < pixel_area_radius; }); } var length = 0; var leaves = []; var zone_edges = []; // const zone_edges = Array.from({ length: ids.length }, () => []); for (let i = 0; i < zone_nodes.length; i++) { const na = nodes[zone_nodes[i]]; for (let j = 0; j < na.neighbors.length; j++) if (zone_nodes.includes(na.neighbors[j])) zone_edges.push(na.edges[j]); const outNeighbor = na.neighbors.findIndex(n => !zone_nodes.includes(n)); if (outNeighbor > -1) leaves.push(zone_nodes[i]); } zone_edges = [...new Set(zone_edges)]; zone_edges.sort(); const shape_graph = createGraph(zone_edges.map(e => edges[e])); const pathFinder = createPathFinder(zone_nodes, zone_edges); if (range_type === "crowflight") { let tree = shortest_tree({ graph: shape_graph, origins: [origin] }).next().value; leaves = leaves.filter(l => tree.origin[l] !== -1); } const c = pts[origin]; leaves.sort((a, b) => angle(c, pts[b]) - angle(c, pts[a])); var path = []; var path_edges = []; var join_path = []; var problems = []; if (show_path_proposal) { var paths = []; for (let i = 0; i < leaves.length; i++) { var [A, B] = [leaves[i], leaves[(i + 1) % leaves.length]]; let Apath = pathFinder.find(A, B).map(n => n.id); if (Apath[0] === B) Apath = Apath.reverse(); paths.push(Apath); } paths = paths.filter(p => p.length > 0); path = paths.reduce((acc, val) => acc.concat(val), []); path = shape_corrector(path, max_beetween); for (let i = 0; i < path.length; i++) { const nA = path[i], nB = path[(i + 1) % path.length]; const index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { path_edges.push(index); } } for (const eIndex of path_edges) length += edges[eIndex].length; if (show_path_join) { const distances = path.map(l => Math.hypot(pts[l][0] - pts[origin][0], pts[l][1] - pts[origin][1]) ); const startLeaf = path[distances.indexOf(Math.min(...distances))]; join_path = pathFinder.find(startLeaf, origin).map(n => n.id); for (let i = 0; i < join_path.length; i++) { const nA = join_path[i], nB = join_path[(i + 1) % join_path.length]; const index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { length += edges[index].length * 2; path_edges.push(index); } } } } var zone_arbres = show_arbres ? arbres.filter(a => { let o = pts[origin]; return Math.hypot(a[0] - o[0], a[1] - o[1]) < pixel_area_radius; }) : []; mutable origins = ids; mutable zone = { arbres: zone_arbres, path_length: length, path_edges, join_path, problems, edges: zone_edges, nodes: zone_nodes, leaves: leaves, path: path, id: ids[0] }; }32:T9b3,drag = (selectors, canvas, draw, end) => { // Choose the circle that is closest to the pointer for dragging. function dragsubject(event) { const transform = d3.zoomTransform(canvas); let subject = null; if (!event) event = d3.event; // Distance is expressed in unzoomed coordinates, ie. keeps proportion with circles radius // at any zoom level. let distance = 60 / transform.k; const x = transform.invertX(event.x); const y = transform.invertY(event.y); for (const s of mutable selectors) { let d = Math.hypot(x - s.x, y - s.y); if (d < distance) { distance = d; subject = s; } } return subject ? { selector: subject, x: transform.applyX(subject.x), y: transform.applyY(subject.y) } : null; } // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { d3.select(this).style("cursor", "grabbing"); } // When dragging, update the subject’s position. async function dragged() { const transform = d3.zoomTransform(canvas); const agent = d3.event.subject.selector; agent.x = transform.invertX(d3.event.x); agent.y = transform.invertY(d3.event.y); const i = delaunay.find(agent.x, agent.y, agent.id); let needTreeUpdate = agent.id === i ? false : true; if (i) agent.id = i; mutable selectors = mutable selectors; if (needTreeUpdate) update_origins(mutable selectors.map(s => s.id)); draw(); } async function dragended() { d3.select(this).style("cursor", "grab"); if (end) end(); const agent = d3.event.subject.selector; const i = delaunay.find(agent.x, agent.y, agent.id); if (i) { agent.x = pts[i][0]; agent.y = pts[i][1]; agent.id = i; } mutable selectors = mutable selectors; update_origins(mutable selectors.map(s => s.id)); draw(); mutable reverse_address = get_reverse_address(nodes[agent.id]); } return function(sel) { sel .style("cursor", "pointer") .call( d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) .on("mousemove", async function() { const m = d3.mouse(this), subject = await dragsubject({ x: m[0], y: m[1] }); d3.select(this).style("cursor", subject ? "grab" : "pointer"); }); }; }33:[{"id":"2416acb3a113042e7754f9e8e5dec09d598bc01dabb5c80d07d0d8f5525822dfeaefcc99e5a4885d7e8e0d398449f6c6dfcf853d1919fcbc64340b3352aa2420","href":"https://static.observableusercontent.com/files/2416acb3a113042e7754f9e8e5dec09d598bc01dabb5c80d07d0d8f5525822dfeaefcc99e5a4885d7e8e0d398449f6c6dfcf853d1919fcbc64340b3352aa2420","name":"nodes_paris.json","type":"application/json","lastModified":1585307993089.47,"size":1009478},{"id":"e76f2400b25925d2d902c988b27160a201b329aba2afda836d9ce3ce69c52987e4b5f8fab9f5530a1fab1186c8021e7c3fc892f8d1e0cb698c3681be0135492b","href":"https://static.observableusercontent.com/files/e76f2400b25925d2d902c988b27160a201b329aba2afda836d9ce3ce69c52987e4b5f8fab9f5530a1fab1186c8021e7c3fc892f8d1e0cb698c3681be0135492b","name":"paths_paris.json","type":"application/json","lastModified":1585308008349.67,"size":4770798},{"id":"f15856ff0f0ec3d2222df427f2cc57a07a234c378ba0cf86af1a8a38dd76671a88fe5185453113eb1f25d4b5e231f502e3a9663c97f7a1aff0d4b4e52e3b3d1a","href":"https://static.observableusercontent.com/files/f15856ff0f0ec3d2222df427f2cc57a07a234c378ba0cf86af1a8a38dd76671a88fe5185453113eb1f25d4b5e231f502e3a9663c97f7a1aff0d4b4e52e3b3d1a","name":"nodes_arbres.json","type":"application/json","lastModified":1585308788615.696,"size":5777}] 2d:{"id":"630131d73c7a38a4","slug":"bulle-de-confinement-paris","title":"Bulle de confinement : Paris","thumbnail":"eb10e14ac8ae79f3d594433cb5014e9fddeaaa83e7602456c910c8b3efcf0f10","access_level":"public","create_time":"$D2020-03-27T11:09:37.566Z","update_time":"$D2020-04-09T07:56:04.173Z","view_time":null,"first_public_time":"$D2020-03-27T11:23:52.968Z","has_unpublished_edits":null,"fork":{"id":"7d510cf6576e04c5","slug":"bulle-de-confinement-lyon","title":"Bulle de confinement : Lyon","owner":{"id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll"}},"stars":57,"starred":false,"owner":{"type":"team","id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":"starter_2024"},"version":1253,"publish_version":1253,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null}],"members":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"8af5239d55556f52","slug":"bulle-de-confinement","title":"Bulle de confinement","owner":{"id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll"}},"type":"notebook","body":{"title":"Bulle de confinement : Paris","cells":[{"id":0,"value":"md`# Bulle de confinement : Paris\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`\nDepuis le [23 mars](https://twitter.com/gouvernementFR/status/1242407238419001346) la limite pour sortir se promener avec ses enfants ou faire du sport est de 1 km, voilà ce que ça représente ! ${\n show_path_proposal\n ? `Le parcours proposé fait **${\n zone.path_length < 1000\n ? `${Math.round(zone.path_length)} m`\n : `${Math.round(zone.path_length / 100) / 10} km`\n }**.`\n : \"\"\n} \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"md`Une nouvelle version de l'outil est [disponible ici](https://observablehq.com/@pierreleripoll/bulle-de-confinement) avec une centaine de villes françaises à découvrir !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"md`Votre position est actuellement ** ${\n reverse_address !== undefined && reverse_address.address !== undefined\n ? small_name(reverse_address.address)\n : \"introuvable\"\n} **.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"viewof address_input = text({\n placeholder: \"Votre adresse\",\n description: \"Essayez de trouver votre position automatiquement !\",\n submit: \"Recherche\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof limit_area = (reset_limit_area,\nslider({\n min: 1,\n max: 2500,\n step: 1,\n value: 1000,\n format: v => `${v} m`,\n title: \"Distance maximale\"\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"viewof reset_limit_area = button(\"Essayez la distance réglementaire\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"viewof range_type = {\n const range_type = radio({\n title: \"Quelle règle utiliser ?\",\n options: [\n { label: \"Vol d'oiseau\", value: \"crowflight\" },\n { label: \"Distance de marche\", value: \"manhattan\" }\n ],\n value: \"manhattan\"\n });\n range_type.style.marginTop = \"8px\";\n return range_type;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof show_zone_streets = Object.defineProperty(\n html` Colorier les rues autorisées`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viewof show_path_proposal = Object.defineProperty(\n html` Afficher la proposition de parcours`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"viewof show_path_join = Object.defineProperty(\n html` Afficher le chemin pour rejoindre le parcours`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md` \\n\\nEt puisque mon père les adore, vous pouvez afficher les [arbres remarquables](https://opendata.paris.fr/explore/dataset/arbresremarquablesparis) en vert 🌳`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"viewof show_arbres = Object.defineProperty(\n html` Afficher les abres remarquables`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md` Voir le même résultat pour [Lyon](https://observablehq.com/@pierreleripoll/bulle-de-confinement-lyon).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`---\n_Project developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Pierre Ripoll with tools from Philippe Rivière and Sylvain Lesage._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"mutable zone = {\n let id = mutable origins[0];\n let paths = [];\n let leaves = [];\n let edges = [];\n let nodes = [];\n let problems = [];\n let path_length = 0;\n return { id, problems, leaves, paths, edges, nodes, path_length };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"address = {\n if (address_input.length > 0) {\n yield geocoding(address_input, geo_bounds).then(res => {\n let result = res[0];\n // console.log(result);\n if (result !== undefined && result.lat && result.lon) {\n let [x, y] = projection([\n parseFloat(result.lon),\n parseFloat(result.lat)\n ]);\n if (x > 0 && x < width && y > 0 && y < height) {\n let i = delaunay.find(x, y);\n mutable selectors = [{ id: i, x, y }];\n update_origins(mutable selectors.map(s => s.id));\n mutable reverse_address = get_reverse_address(nodes[i]);\n return result;\n }\n }\n });\n } else yield undefined;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"mutable reverse_address = get_reverse_address(nodes[mutable origins[0]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"async function get_reverse_address(s) {\n let [lon, lat] = [s.x, s.y];\n return reverse_geocoding(lon, lat).then(res => {\n if (viewof address_input.value.length > 0) {\n viewof address_input.value = \"\";\n viewof address_input.dispatchEvent(new CustomEvent(\"input\"));\n }\n return res;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mutable selectors = {\n var i = 8839;\n return [{ id: i, x: pts[i][0], y: pts[i][1] }];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"mutable origins = {\n return mutable selectors.map(s => s.id);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"nodes = FileAttachment(\"nodes_paris.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"arbres = {\n let json = await FileAttachment(\"nodes_arbres.json\").json();\n return json.map(a => projection([a[1], a[0]]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"edges = FileAttachment(\"paths_paris.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function createGraph(edges) {\n const graph = { sources: [], targets: [], costs: [] };\n edges.forEach(({ u, v, length },i) => {\n const cost = length;\n\n graph.sources.push(u);\n graph.targets.push(v);\n graph.costs.push(cost);\n\n graph.sources.push(v);\n graph.targets.push(u);\n graph.costs.push(cost);\n });\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"graph = createGraph(edges)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"pts = nodes.map(d => projection([d.x, d.y]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"lines = edges.map(e => {\n return e.coordinates.map(d => projection([d[0], d[1]]));\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"projection = d3.geoMercator().fitExtent([[10, 10], [width - 10, height - 10]], {\n type: \"MultiPoint\",\n coordinates: nodes.map(d => [d.x, d.y])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"geo_bounds = d3.geoBounds({\n type: \"MultiPoint\",\n coordinates: nodes.map(d => [d.x, d.y])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"bindEdgesWithNodes = {\n nodes.forEach(n => ((n.edges = []), (n.neighbors = [])));\n edges.forEach(({ u, v }, i) => {\n nodes[u].edges.push(i);\n nodes[u].neighbors.push(v);\n nodes[v].edges.push(i);\n nodes[v].neighbors.push(u);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"max_beetween = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"shape_corrector = (path, maxBetween) => {\n var filtered = path.slice();\n var changed = true;\n\n while (changed) {\n changed = false;\n\n for (let i = 0; i < filtered.length; i++) {\n var nextOccu = filtered.indexOf(filtered[i], i + 1);\n\n //handle circular problem\n if (nextOccu === -1)\n if (filtered.indexOf(filtered[i]) !== i)\n nextOccu = filtered.indexOf(filtered[i]);\n\n const inBeetween =\n nextOccu > i ? nextOccu - i : filtered.length - i + nextOccu;\n // console.log(nextOccu, inBeetween);\n\n if (nextOccu !== -1 && inBeetween < maxBetween) {\n changed = true;\n filtered =\n nextOccu > i\n ? filtered.slice(0, i).concat(filtered.slice(nextOccu))\n : filtered.slice(nextOccu, i);\n break;\n }\n }\n }\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"bindZonesWithArea = {\n limit_area;\n update_origins(mutable origins);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"angle = (center, pt) => {\n return Math.atan2(pt[0] - center[0], pt[1] - center[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"delaunay = d3.Delaunay.from(pts, d => d[0], d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"mutable cached_transform = d3.zoomIdentity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"d3 = require(\"d3@5\", \"d3-delaunay@^5.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"height = Math.min(window.screen.availHeight, window.screen.height) * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"createPathFinder = (zone_nodes, zone_edges) => {\n let graph = ngraph();\n zone_nodes.forEach(n => {\n graph.addNode(n, { x: pts[n][0], y: pts[n][1] });\n });\n zone_edges.forEach(index => {\n let e = edges[index];\n graph.addLink(e.u, e.v, { length: e.length });\n });\n\n return npath.aGreedy(graph, {\n distance(a, b, link) {\n return link.data.length;\n },\n heuristic(a, b) {\n return Math.hypot(a.data.x - b.data.x, a.data.y - b.data.y);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"mutable pixel_area_radius = {\n const xPt = projection([\n nodes[0].x,\n nodes[0].y + limit_area / (1000 * 111.11)\n ]);\n // console.log(nodes[0], xPt);\n return Math.hypot(xPt[0] - pts[0][0], xPt[1] - pts[0][1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import { slider, text, button, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"short_path = (graph, i, j) => {\n const tree = shortest_tree({\n graph: graph,\n origins: [i, j],\n cutoff: limit_area\n }).next().value;\n\n return shortest_path(graph, tree, i, j);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"ngraph = require(\"ngraph.graph\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"import {\n geocoding,\n reverse_geocoding,\n small_name\n} from \"@pierreleripoll/geocoding-nominatim\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"npath = require('ngraph.path@1.3.1/dist/ngraph.path.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {\n shortest_tree,\n shortest_junctions,\n shortest_paths,\n shortest_path\n} from \"@fil/dijkstra\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"