2e:null 2f:["$","title",null,{"children":"Bulle de (dé)confinement - 10 km | fbahoken | Observable"}] 34:T10a1,graph_canvas = { const context = DOM.context2d(width, height), path = d3.geoPath().context(context); // Bind the drag behavior for interaction. address; const line_scale = 0.25 / geo_diagonal; d3.select(context.canvas).call( drag(mutable selectors, context.canvas, render) ); var zoom_behavior = d3.zoom(); d3.select(context.canvas).call( zoom_behavior.scaleExtent([0.8, 20]).on("zoom", () => { if ( mutable cached_transform.k !== d3.event.transform.k || mutable cached_transform.x !== d3.event.transform.x || mutable cached_transform.y !== d3.event.transform.y ) mutable background = renderBackground( d3.event.transform, mutable background ); 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.drawImage(mutable background.canvas, 0, 0); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); // const background_color = d3.color("#ccc"); // background_color.opacity = 0.7; // context.strokeStyle = background_color; // context.lineWidth = 0.5 * line_scale; // context.stroke(backgroundPath); context.setLineDash([3, 3]); var text_limit_area = limit_area < 1000 ? `${limit_area} m` : `${Math.round(limit_area / 100) / 10} km`; context.font = `${Math.round(6 * line_scale)}px sans-serif`; context.textAlign = "center"; context.textBaseline = "bottom"; for (var s of mutable selectors) { context.beginPath(); var [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 * line_scale; context.fillText(text_limit_area, x, y - radius); context.stroke(); } context.setLineDash([]); var zone = mutable zone; if (show_zone_streets) { context.beginPath(); for (var e of zone.edges) { path({ type: "LineString", coordinates: lines[e] }); } var zone_color = d3.color(color(0)); zone_color.opacity = 0.5; context.strokeStyle = zone_color; context.lineWidth = 0.5 * line_scale; 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++) { var nA = zone.path[i], nB = zone.path[(i + 1) % zone.path.length]; var index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { path({ type: "LineString", coordinates: lines[nodes[nA].edges[index]] }); } } context.lineWidth = 1 * line_scale; 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++) { var nA = zone.join_path[i], nB = zone.join_path[(i + 1) % zone.join_path.length]; var index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { path({ type: "LineString", coordinates: lines[nodes[nA].edges[index]] }); } } context.lineWidth = 1 * line_scale; context.stroke(); } context.lineWidth = (3 * line_scale) / transform.k; for (var s of mutable selectors) { context.beginPath(); var [x, y, k, radius] = [ s.x, s.y, transform.k * line_scale, 10 * line_scale ]; context.moveTo(x + radius / k, y); context.arc(x, y, radius / k, 0, 2 * Math.PI); context.fillStyle = color(0); context.strokeStyle = "white"; context.stroke(); context.fill(); } context.restore(); return context.canvas; } yield render(); }35:T8ac,md` **Description** Cette application propose de calculer une **bulle de (dé)confinement** permettant une promenade jusqu'à **10 km** pour une sélection de villes - plus précisément de communes - françaises. Deux formulations de la distance sont proposées : - la _**métrique euclidienne**_ ou distance à vol d'oiseau pour une bulle définie par le rayon (x en km) d'un cercle centré sur l'adresse d'origine ; - une _**métrique réseau**_, la [distance de Manhattan - algo de Dijkstra](https://fr.wikipedia.org/wiki/Distance_de_Manhattan) pour une bulle englobant un ensemble de routes dont le parcours permet de réaliser une promenade à pieds de x km mesurés sur le réseau routier (piéton ou non). L'application propose également _un parcours_ (Distance de dijkstra) formé d'un ensemble de rues qui autorise une promenade sans passer deux fois au même endroit, pour les deux métriques : _ à vol d'oiseau, le parcours suit le chemin de x km le plus proche d'une ligne droite reliant l'origine au point le plus éloigné situé sur le périmètre du cercle définissant la bulle de (dé)confinement ; _ selon une distance de marche, le parcours est formé de l'ensemble des tronçons permettant de parcourir les x km, d'ou la forme en "diamant" de la bulle de (dé)confinemen. **Crédits :** Cette application a été développée par [Pierre Ripoll](https://observablehq.com/@pierreleripoll/). La supervision des prototypes a été réalisée par [Romain Vuillemot](http://romain.vuillemot.net/). **Données :** [OpenStreetMap](https://www.openstreetmap.fr/). Librairie [OSMNX](https://github.com/gboeing/osmnx). **Références :** -- Visualisation du graphe [@fil : manhattan-voronoi-osmnx](https://observablehq.com/@fil/manhattan-voronoi-osmnx) -- Calcul des chemins [@fil : dijkstra](https://observablehq.com/@fil/dijkstra) & librairie [ngraph](https://github.com/anvaka/ngraph.path) -- Drag & zoom [@severo : drag-zoom-canvas ](https://observablehq.com/@severo/drag-zoom-canvas) ** Voir aussi (pour Lyon)**: [(Petite version) ](https://observablehq.com/@pierreleripoll/small-lyon-voronoi) [(Grande version)](https://observablehq.com/@pierreleripoll/lyon-voronoi).`36:T981,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. 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([agent.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([agent.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"); }); }; }37:T4d6,{ params; if (!mutable params_used) { // if (params.has('x') && params.has('y') && params.has('k')) { // let x = parseFloat(params.get('x')), // y = parseFloat(params.get('y')), // k = parseFloat(params.get('k')); // mutable cached_transform = d3.zoomIdentity.translate(x, y).scale(k); // mutable background = renderBackground(mutable cached_transform); // } if (params.has('limit_area')) { let range = parseInt(params.get('limit_area')); viewof limit_area.value = range; } if (params.has('origin')) { let i = parseInt(params.get('origin')); mutable selectors = [{ id: i, x: pts[i][0], y: pts[i][1] }]; mutable origins = [i]; update_origins([i]); mutable reverse_address = get_reverse_address(nodes[i]); } else if (params.has('lat') && params.has('lon')) { let lat = parseFloat(params.get('lat')), lon = parseFloat(params.get('lon')); let i = delaunay.find(...projection([lat, lon])); mutable selectors = [{ id: i, x: pts[i][0], y: pts[i][1] }]; mutable origins = [i]; update_origins([i]); mutable reverse_address = get_reverse_address(nodes[i]); } } mutable params_used = true; }38:T645,function concave_hull(pts) { console.time("Concave hull"); const delaunay = d3.Delaunay.from(pts, d => d[0], d => d[1]); const { triangles, halfedges } = delaunay; const circumcircles = get_circumcircles(pts, delaunay); const queue = new FlatQueue(); const onEdge = new Uint8Array(halfedges.length); const visited = new Uint8Array(pts.length); function addToQueue(i) { onEdge[i] = 1; visited[triangles[i]] = 1; const p0 = pts[triangles[i]]; const p1 = pts[triangles[i % 3 === 2 ? i - 2 : i + 1]]; const r = circumcircles.r[i]; const x = circumcircles.x[i]; const y = circumcircles.y[i]; const [x0, y0] = p0; const [x1, y1] = p1; const area = (y - y0) * (x1 - x) - (x - x0) * (y1 - y); const cx = (x0 + x1) / 2; const cy = (y0 + y1) / 2; const d = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2)); // if the center of a circumcircle on the edge lies outside the advancing polygon, // or inside but less than 0.2 circumradiuses away from the edge, queue it for collapsing if (area >= 0 || d / r < 0.2) queue.push(i, -r); } for (let i = 0; i < halfedges.length; i++) { if (halfedges[i] === -1) addToQueue(i); // start with convex hull edges } while (true) { const i = queue.pop(); if (i === undefined) break; const i1 = halfedges[i % 3 === 2 ? i - 2 : i + 1]; const i2 = halfedges[i % 3 === 0 ? i + 2 : i - 1]; if (!visited[triangles[i1]] && i1 !== -1) { addToQueue(i1); addToQueue(i2); onEdge[i] = 0; } } return onEdge; console.timeEnd("Concave hull"); }39:Te10,function update_origins(ids) { // console.profile("Update origins"); // console.time("Update origins"); // const t1 = performance.now(); 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") { var xOrigin = pts[origin][0], yOrigin = pts[origin][1]; zone_nodes = pts .map((p, i) => i) .filter(i => { let pt = pts[i]; return Math.hypot(pt[0] - xOrigin, pt[1] - yOrigin) < 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]]; var outNeighbor = false; for (let j = 0; j < na.neighbors.length; j++) { if (zone_nodes.includes(na.neighbors[j])) zone_edges.push(na.edges[j]); else outNeighbor = true; } if (outNeighbor) leaves.push(zone_nodes[i]); } zone_edges = [...new Set(zone_edges)]; zone_edges.sort(); var path = []; var path_edges = []; var join_path = []; // console.log(performance.now() - t1); if (show_path_proposal) { 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 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(function filterPathLength(p) { return 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(nodes[nA].edges[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[nodes[nA].edges[index]].length * 2; path_edges.push(nodes[nA].edges[index]); } } } } mutable origins = ids; mutable zone = { path_length: length, path_edges, join_path, edges: zone_edges, nodes: zone_nodes, leaves: leaves, path: path, id: ids[0] }; // console.timeEnd("Update origins"); // console.profileEnd(); }3a:[] 32:{"id":"5ee3f0ad6b4d14f7","slug":"bulle-de-de-confinement-10-km","title":"Bulle de (dé)confinement - 10 km","thumbnail":"dfe56778ec8d8b8771ba40a01bc0d77b9534bd3ceb0974d65ced0bb8fd1839bf","access_level":"public","create_time":"$D2021-03-30T19:39:31.450Z","update_time":"$D2021-04-09T07:57:14.134Z","view_time":null,"first_public_time":"$D2021-07-05T13:30:23.967Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"624739046d7bea68","login":"fbahoken","name":"fbahoken","avatar_url":"https://avatars-next.observableusercontent.com/d8c8532f3e3dccb38d3253f7918c438b1ef9476b5f483276569f2013cac46f62","tier":"starter_2024"},"version":2085,"publish_version":2085,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe9aa4e301462174","login":"fbahoken","name":"fbahoken","avatar_url":"https://avatars-next.observableusercontent.com/d8c8532f3e3dccb38d3253f7918c438b1ef9476b5f483276569f2013cac46f62","tier":null}],"members":[{"type":"individual","id":"fe9aa4e301462174","login":"fbahoken","name":"fbahoken","avatar_url":"https://avatars-next.observableusercontent.com/d8c8532f3e3dccb38d3253f7918c438b1ef9476b5f483276569f2013cac46f62","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bulle de (dé)confinement - 10 km","cells":[{"id":1073,"value":"md`# Bulle de (dé)confinement - 10 km`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"md`\nAdaptation de la [Bulle de confinement - 1 km](https://observablehq.com/@pierreleripoll/bulle-de-confinement) de et par Pierre Ripoll.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`\nLe 3e confinement amorcé le **31 mars** place la limite pour sortir se promener et/ou faire du sport - seul.e ou avec ses enfants - à **10 km**. Pour l'adresse renseignée ci-dessous, ${\n show_path_proposal\n ? `le parcours total proposé est de **${\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":1063,"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":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"html`

`","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":1312,"value":"viewof light = Object.defineProperty(\n html` Version légère (filtrer les rues piétonnes)`,\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":1650,"value":"md`Partagez votre résultat avec le lien suivant : [${linked_url}](${linked_url})\n\nou bien partagez le directement sur Twitter :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"{\n await visibility();\n let emojis = [\"✌️\", \"🤟\", \"🤘\", \"👌\"];\n let emoji = emojis[Math.round(Math.random() * emojis.length)];\n return shareTweet(linked_url, {\n buttonText: `Partagez !`,\n text: `Voici ma bulle de confinement à ${city_name} ${emoji} `,\n hashtags: \"dataviz,COVID19\",\n via: \"pierreripoll\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"$35","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":1593,"value":"md`## Inputs`","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: 10000,\n step: 1,\n value:\n params.has('limit_area') && !mutable params_used\n ? parseInt(params.get('limit_area'))\n : 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":1550,"value":"viewof city_name = select({\n description: \"Choisissez votre ville\",\n value:\n params.has(\"city\") && !mutable params_used\n ? params.get('city')\n : 'Toulouse',\n options: list_cities.sort().map(c => {\n return { label: c, value: c.replace(' ', '_') };\n })\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":1536,"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":1568,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"md`## Background\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1237,"value":"mutable background = {\n return renderBackground(mutable cached_transform, null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2003,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1902,"value":"backgroundPath = {\n // WARNING : THIS IS A GAME CHANGER : ALWAYS STORE PATH2D WHEN YOU HAVE A MASSIVE GRAPH BACKGROUND\n return new Path2D(\n \"M\" +\n edges\n .map(e => {\n return e.coordinates\n .map(d => projection([d[0], d[1]]).join(\",\"))\n .join(\"L\");\n })\n .join(\"M\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"background_color = {\n var background_color = d3.color(\"#ccc\");\n background_color.opacity = 0.7;\n return background_color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"function renderBackground(transform, ctx) {\n // console.log(\"Render background\");\n if (!ctx) {\n var canvas = DOM.canvas(width, height);\n ctx = canvas.getContext('2d');\n }\n\n var line_scale = 0.25 / geo_diagonal;\n\n ctx.save();\n ctx.clearRect(0, 0, width, height);\n ctx.translate(transform.x, transform.y);\n\n ctx.scale(transform.k, transform.k);\n\n ctx.strokeStyle = background_color;\n ctx.lineWidth = 0.5 * line_scale;\n ctx.stroke(backgroundPath);\n ctx.restore();\n\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"src = `https://raw.githubusercontent.com/pierreleripoll/graph_cities/master/${city_name.replace(\n ' ',\n '_'\n)}${light ? '_drive' : '_walk'}.json`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"list_cities = d3\n .json(\n \"https://raw.githubusercontent.com/pierreleripoll/graph_cities/master/cities.json\"\n )\n .catch(err => {\n console.log(err);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"data = d3.json(src)","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":26,"value":"nodes = data.nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"edges = data.edges","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":1678,"value":"bindZoneWithArea = {\n limit_area;\n update_origins(mutable origins);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"md`## Address`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"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":1059,"value":"mutable reverse_address = {\n if (!params.get('lat') && !params.get('lon')) {\n return get_reverse_address(nodes[mutable origins[0]]);\n } else return undefined;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"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":1620,"value":"md`## Geography`","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":1057,"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":1320,"value":"geo_centroid = d3.geoCentroid({\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":1342,"value":"geo_diagonal = Math.hypot(\n geo_bounds[0][0] - geo_bounds[1][0],\n geo_bounds[0][1] - geo_bounds[1][1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"md`## UX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mutable selectors = {\n let i = delaunay.find(...projection(geo_centroid));\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":50,"value":"$36","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":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":44,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"mutable cached_transform = {\n data;\n console.log(this);\n return d3.zoomIdentity;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"params = new URL(location).searchParams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"mutable params_used = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"linked_url = {\n let x = Math.round(cached_transform.x),\n y = Math.round(cached_transform.y),\n k = cached_transform.k.toPrecision(3);\n\n let [lat, long] = [\n nodes[origins[0]].x.toPrecision(5),\n nodes[origins[0]].y.toPrecision(5)\n ];\n return `${\n document.baseURI.split('?')[0]\n }?city=${city_name}&lat=${lat}&lon=${long}&limit_area=${limit_area}`;\n // return `${\n // document.baseURI.split('?')[0]\n // }?city=${city_name}&lat=${lat}&lon=${long}&x=${x}&y=${y}&k=${k}&limit_area=${limit_area}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1964,"value":"md`## [Adaptive Concave Hull](https://observablehq.com/@mourner/adaptive-concave-hull)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"FlatQueue = require(\"flatqueue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1975,"value":"function get_circumcircles(pts, delaunay) {\n const n = delaunay.halfedges.length;\n const x = new Float64Array(n);\n const y = new Float64Array(n);\n const r = new Float64Array(n);\n\n for (let i = 0; i < n; i++) {\n const [ax, ay] = pts[delaunay.triangles[i - (i % 3) + 0]];\n const [bx, by] = pts[delaunay.triangles[i - (i % 3) + 1]];\n const [cx, cy] = pts[delaunay.triangles[i - (i % 3) + 2]];\n\n const dx = bx - ax;\n const dy = by - ay;\n const ex = cx - ax;\n const ey = cy - ay;\n\n const bl = dx * dx + dy * dy;\n const cl = ex * ex + ey * ey;\n const d = 0.5 / (dx * ey - dy * ex);\n\n const x2 = (ey * bl - dy * cl) * d;\n const y2 = (dx * cl - ex * bl) * d;\n\n x[i] = ax + x2;\n y[i] = ay + y2;\n r[i] = Math.sqrt(x2 * x2 + y2 * y2);\n }\n\n return { x, y, r };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1972,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"concave_hull(pts)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"md`## Graph`","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":650,"value":"max_beetween = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$39","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":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":929,"value":"createPathFinder = (zone_nodes, zone_edges) => {\n let graph = ngraph();\n for (let i = 0; i < zone_nodes.length; i++) {\n graph.addNode(zone_nodes[i], {\n x: pts[zone_nodes[i]][0],\n y: pts[zone_nodes[i]][1]\n });\n }\n\n for (let i = 0; i < zone_edges.length; i++) {\n let e = edges[zone_edges[i]];\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":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":1617,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import { slider, button,text, select, autoSelect, radio } from \"@jashkenas/inputs\"","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":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":1053,"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":1763,"value":"import { shareTweet } from \"@pierreleripoll/share-on-twitter-button\"","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":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"