31:Tb79,{ 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) ); d3.select(context.canvas).call( d3 .zoom() .scaleExtent([1, 20]) .on("zoom", () => render(d3.event.transform)) ); function render(transform = d3.zoomTransform(context.canvas)) { 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(); const mutableTree = mutable tree; 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) { context.strokeStyle = color(0); context.beginPath(); for (const p of zone.paths) { if (p.path.length > 0) { context.moveTo(...pts[p.path[0]]); for (const pt of p.path) context.lineTo(...pts[pt]); } } context.lineWidth = 1.2; 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(); }32:T772,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; }); } const zone_edges = []; // const zone_edges = Array.from({ length: ids.length }, () => []); for (let i = 0; i < zone_nodes.length - 1; i++) { const na = nodes[zone_nodes[i]]; for (let j = i; j < zone_nodes.length; j++) { let neighborIndex = na.neighbors.indexOf(zone_nodes[j]); if (neighborIndex > -1) zone_edges.push(na.edges[neighborIndex]); } } zone_edges.sort(); var paths = []; if (range_type === "manhattan") { const shape_graph = createGraph(zone_edges.map(e => edges[e])); const c = pts[origin]; var leaves = short_tree.front; leaves.sort((a, b) => angle(c, pts[b]) - angle(c, pts[a])); for (let i = 0; i < leaves.length; i++) { const [A, B] = [leaves[i], leaves[(i + 1) % leaves.length]]; const tree = shortest_tree({ graph: shape_graph, origins: [A, B, origin], cutoff: limit_area }).next().value; paths.push(shortest_path(shape_graph, tree, A, B)); } paths = paths.filter(p => p.path.length > 0); } // console.log(performance.now() - time1); // console.log(zone_edges); mutable tree = short_tree; mutable origins = ids; mutable zone = { edges: zone_edges, nodes: zone_nodes, leaves: leaves, paths: paths, id: ids[0] }; }33:T951,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 = 6; 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"); }); }; }34:[{"id":"1dd9d61949ab0fbda7ef711f94f8edcb63f7279cb7bee53f454826c118079f797e9c069693510ba850896709933c689ae246dced55f476e0afd033ac69d9498e","href":"https://static.observableusercontent.com/files/1dd9d61949ab0fbda7ef711f94f8edcb63f7279cb7bee53f454826c118079f797e9c069693510ba850896709933c689ae246dced55f476e0afd033ac69d9498e","name":"nodes_center_lyon.json","type":"application/json","lastModified":1585239321546.349,"size":336505},{"id":"761e56c5666b5d1d01bd0342c158bbd46de3c872065f26ec3fab37e22d7478ad79be45fdbd63c89b0ddc6935df7b3163357db32db421f73325743de092ca39b0","href":"https://static.observableusercontent.com/files/761e56c5666b5d1d01bd0342c158bbd46de3c872065f26ec3fab37e22d7478ad79be45fdbd63c89b0ddc6935df7b3163357db32db421f73325743de092ca39b0","name":"paths_center_lyon.json","type":"application/json","lastModified":1585239321546.349,"size":1904337}] 2f:{"title":"Planificateur de parcours jogging pour Lyon","cells":[{"id":0,"value":"md`# Planificateur de parcours jogging pour Lyon\nJ'utilise le travail de [Fil](https://observablehq.com/@fil/manhattan-voronoi-osmnx) pour visualiser la zone autorisée pour faire son sport quotidien ! Données issues de [data.grandlyon.com](https://data.grandlyon.com/jeux-de-donnees/chaussees-trottoirs-metropole-lyon/donnees).\\n\\n\n\nVous pouvez dézoomer et zoomer (d3.zoom) mais aussi déplacer le centre de la zone ainsi que changer la distance maximale (la distance autorisée actuellement est de 1km). \n\nVous 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).\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: 3000,\n step: 1,\n value: 1000,\n format: v => `${v} m`,\n title: \"Distance maximale\",\n description: \"En mètres, actuellement en France : 1000m\"\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":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":478,"value":"viewof show_zone_streets = Object.defineProperty(\n html` Afficher 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":108,"value":"mutable zone = {\n let id = mutable origins[0];\n let paths = [];\n let leaves = [];\n let edges = [];\n let nodes = [];\n return { id, leaves, paths, edges, nodes };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"mutable selectors = {\n const index = (Math.random() * pts.length) | 0;\n return [{ id: index, x: pts[index][0], y: pts[index][1] }];\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":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":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":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":36,"value":"mutable tree = shortest_tree({\n graph,\n origins: mutable origins,\n cutoff: limit_area\n}).next().value","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":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":48,"value":"$32","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":"$33","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":54,"value":"d3 = require(\"d3@5\", \"d3-delaunay@^5.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"height = width * 0.7","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":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":"$W34","stdlib":"1","titling":"auto"}