31:Tfa7,{ const context = DOM.context2d(width, height), path = d3.geoPath().context(context); // Bind the drag behavior for interaction. 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(); } var length = 0; 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]] }); length += edges[nodes[nA].edges[index]].length; } } context.lineWidth = 1.2; 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]] }); length += edges[nodes[nA].edges[index]].length * 2; } } context.lineWidth = 1.2; context.stroke(); } mutable zone.path_length = length; 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(); }32:T908,md` J'ai fais ce petit outil à partir des [données de Lyon](https://data.grandlyon.com/jeux-de-donnees/chaussees-trottoirs-metropole-lyon/donnees). 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. 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. 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). `33:T9fa,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 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 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); 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); } } mutable origins = ids; mutable zone = { join_path, problems, edges: zone_edges, nodes: zone_nodes, leaves: leaves, path: path, id: ids[0] }; }34:T960,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 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(); } 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(); } 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"); }); }; }35:[{"id":"1dd9d61949ab0fbda7ef711f94f8edcb63f7279cb7bee53f454826c118079f797e9c069693510ba850896709933c689ae246dced55f476e0afd033ac69d9498e","href":"https://static.observableusercontent.com/files/1dd9d61949ab0fbda7ef711f94f8edcb63f7279cb7bee53f454826c118079f797e9c069693510ba850896709933c689ae246dced55f476e0afd033ac69d9498e","name":"nodes_center_lyon.json","type":"application/json","lastModified":1585300010393.665,"size":336505},{"id":"761e56c5666b5d1d01bd0342c158bbd46de3c872065f26ec3fab37e22d7478ad79be45fdbd63c89b0ddc6935df7b3163357db32db421f73325743de092ca39b0","href":"https://static.observableusercontent.com/files/761e56c5666b5d1d01bd0342c158bbd46de3c872065f26ec3fab37e22d7478ad79be45fdbd63c89b0ddc6935df7b3163357db32db421f73325743de092ca39b0","name":"paths_center_lyon.json","type":"application/json","lastModified":1585300010393.665,"size":1904337}] 2f:{"title":"Bulle de confinement : Lyon","cells":[{"id":0,"value":"md`# Bulle de confinement : Lyon\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":321,"value":"viewof reset_limit_area = button(\"Essayez la distance réglementaire\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":855,"value":"md` Voir le même résultat pour [Paris](https://observablehq.com/@pierreleripoll/bulle-de-confinement-paris).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":22,"value":"mutable selectors = {\n return [{ id: 2046, x: pts[2046][0], y: pts[2046][1] }];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"mutable origins = {\n return mutable selectors.map(s => s.id);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"nodes = FileAttachment(\"nodes_center_lyon.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"edges = FileAttachment(\"paths_center_lyon.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"graph = createGraph(edges)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"pts = nodes.map(d => projection([d.x, d.y]))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":44,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":650,"value":"max_beetween = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":250,"value":"bindZonesWithArea = {\n limit_area;\n update_origins(mutable origins);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":50,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"delaunay = d3.Delaunay.from(pts, d => d[0], d => d[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"mutable cached_transform = d3.zoomIdentity","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3@5\", \"d3-delaunay@^5.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"height = Math.min(window.screen.availHeight, window.screen.height) * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"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"},{"id":371,"value":"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"},{"id":58,"value":"import { slider, button, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":860,"value":"ngraph = require(\"ngraph.graph\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"npath = require('ngraph.path@1.3.1/dist/ngraph.path.js')","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W35","stdlib":"1","titling":"auto"}