31:T180c,map = { const container = d3.select(DOM.element("div")); container.style("position", "relative"); const center = projection([0, 0]); const scale = projection.scale() * 2 * Math.PI; var correctTransform = (transform) => { return transform .scale(1 / scale) .translate(...projection([0, 0]).map((d) => -d)); }; var hasNeverBeenDrawn = true; // BACKGROUND MAP const svg = container .append("svg") .style("position", "absolute") .attr("viewBox", [0, 0, width, height]) .style("z-index", -10); const tile = d3 .tile() .size([width, height]) .tileSize(512) .clampX(false); const levels = svg .append("g") .attr("pointer-events", "none") .selectAll("g") .data(deltas) .join("g"); //GRAPH const contextBackground = DOM.context2d(width, height); d3.select(contextBackground.canvas) .attr("pointer-events", "none") .style("position", "absolute") .attr("viewBox", [0, 0, width, height]) .style("z-index", -1); const contextSelector = DOM.context2d(width, height), geoPath = d3.geoPath().context(contextSelector); d3.select(contextSelector.canvas) .style("position", "relative") .style("z-index", 10); // Bind the drag behavior for interaction. const line_scale = 0.25 / geo_diagonal; // d3.select(context.canvas).style('z-index', 2); container.node().appendChild(contextBackground.canvas); container.node().appendChild(contextSelector.canvas); function renderSelector(transform) { transform = correctTransform(transform || mutable cached_transform); var context = contextSelector; context.save(); context.clearRect(0, 0, width, height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); 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) { geoPath({ type: "LineString", coordinates: lines[e] }); } var zone_color = d3.color(color(0)); zone_color.opacity = 0.8; context.strokeStyle = zone_color; context.lineWidth = 0.5 * line_scale; context.stroke(); } context.strokeStyle = color(0); context.beginPath(); const strokePath = (path) => { for (let i = 0; i < path.length; i++) { var nA = path[i], nB = path[(i + 1) % path.length]; var index = nodes[nA].neighbors.indexOf(nB); if (index > -1) { geoPath({ type: "LineString", coordinates: lines[nodes[nA].edges[index]] }); } } }; if (show_path_proposal && zone.path.length > 0) strokePath(zone.path); if (show_path_join && zone.join_path.length > 0) strokePath(zone.join_path); 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(); } hasNeverBeenDrawn = false; context.restore(); } function render(transform, graph) { transform = correctTransform(transform || mutable cached_transform); var context = contextBackground; context.save(); context.clearRect(0, 0, width, height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); context.strokeStyle = background_color; context.lineWidth = 0.5 * line_scale; context.stroke(graph); context.restore(); } //ZOOM function zoomed(transform, graph) { levels.each(function (delta) { const tiles = tile.zoomDelta(delta)(transform); d3.select(this) .selectAll("image") .data(tiles, (d) => d) .join("image") .attr("xlink:href", (d) => url(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); }); // if ( // hasNeverBeenDrawn || // Object.entries(mutable cached_transform) // .sort() // .toString() !== Object.entries(transform).sort().toString() // ) // render(transform, graph); mutable cached_transform = transform; renderSelector(transform, graph); } const zoom = d3 .zoom() .scaleExtent([scale, scale << 4]) .extent([ [0, 0], [width, height] ]) .on("zoom.render", (event) => zoomed(event.transform, backgroundPath.simple) ) .on("end.render", (event) => zoomed(event.transform, backgroundPath)); d3.select(contextSelector.canvas).call( drag( mutable selectors, contextSelector.canvas, renderSelector, correctTransform ) ); d3.select(contextSelector.canvas) .call(zoom) .call( zoom.transform, d3.zoomIdentity.translate(...projection([0, 0])).scale(scale) ); return Object.assign(container.node(), { refresh: () => zoomed(mutable cached_transform, backgroundPath) }); }32:Ta01,md` J'ai fais ce petit outil à partir des données [OpenStreetMap](https://www.openstreetmap.fr/) et de la librairie [OSMNX](https://github.com/gboeing/osmnx). 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 temps de rendu). 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) ❤️ avec une mention spéciale à [Aurélien Tabard](https://www.tabard.fr/) qui a trouvé le nom de bulle 🔮. 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:T9eb,drag = (selectors, canvas, draw, correctTransform, end) => { // Choose the circle that is closest to the pointer for dragging. function dragsubject(event) { const transform = correctTransform(d3.zoomTransform(canvas)); // console.log(transform); 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 = 20 / 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); // console.log({ ax: ~~s.x, ay: ~~s.y, bx: ~~x, by: ~~y, d: ~~d, distance }); 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(event) { d3.select(this).raise().style("cursor", "grabbing"); } // When dragging, update the subject’s position. function dragged(event) { const transform = correctTransform(d3.zoomTransform(canvas)); const agent = event.subject.selector; agent.x = transform.invertX(event.x); agent.y = transform.invertY(event.y); const i = delaunay.find(agent.x, agent.y, agent.id); let needTreeUpdate = agent.id !== i; if (i) agent.id = i; mutable selectors = mutable selectors; if (needTreeUpdate) update_origins([agent.id]); draw(); } async function dragended(event) { d3.select(this).style("cursor", null); if (end) end(); const agent = 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 .call( d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) .on("mousemove", function (event) { const subject = dragsubject({ x: event.layerX, y: event.layerY }); d3.select(this).style("cursor", subject ? "grab" : null); }); }; }34: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; }35: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"); }36:Te46,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.reduce((result, value, index) => { if (value === origin) result.push(index); return result; }, []); } 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(); }37:[] 2f:{"title":"Bulle de confinement","cells":[{"id":1073,"value":"md`# Bulle de confinement `","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":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"},{"id":2050,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"html`

`","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":1312,"value":"viewof light = Object.defineProperty(\n html` Version légère (filtre les rues piétonnes)`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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":1593,"value":"md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1550,"value":"viewof city_name = select({\n description: \"Choisissez votre ville\",\n value:\n params.has(\"city\") && !mutable params_used ? params.get(\"city\") : \"Paris\",\n options: list_cities.sort().map((c) => {\n return { label: c, value: c.replace(\" \", \"_\") };\n })\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":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"},{"id":1568,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2024,"value":"viewof urlTiles = select({\n options: [\n { label: \"Standard\", value: \"a.tile.openstreetmap.org\" },\n {\n label: \"Light\",\n value: \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"\n }\n ],\n value: \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"md`## Background\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"backgroundPath = {\n // WARNING : THIS IS A GAME CHANGER : ALWAYS STORE PATH2D WHEN YOU HAVE A MASSIVE GRAPH BACKGROUND\n\n const path = 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\n const simple = new Path2D(\n \"M\" +\n lines\n .map((line) => {\n const l = line.map(([x, y]) => ({ x, y }));\n return simplify(l, 0.6, true).map(({ x, y }) => [x, y]);\n })\n .map((e) => {\n return e.map(([x, y]) => [x, y].join(\",\")).join(\"L\");\n })\n .join(\"M\")\n );\n\n return Object.assign(path, { simple });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1604,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1004,"value":"data = d3.json(src)","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":26,"value":"nodes = data.nodes","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"edges = data.edges","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":1678,"value":"bindZoneWithArea = {\n limit_area;\n update_origins(mutable origins);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"value":"md`## Address`","pinned":false,"hidden":false,"mode":"ojs"},{"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 map.refresh();\n return result;\n }\n }\n });\n } else yield undefined;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1620,"value":"md`## Geography`","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":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"},{"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"},{"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"},{"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":1612,"value":"md`## UX`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":24,"value":"mutable origins = {\n return mutable selectors.map(s => s.id);\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":56,"value":"height = Math.min(window.screen.availHeight, window.screen.height) * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"mutable cached_transform = {\n data;\n console.log(this);\n return d3.zoomIdentity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"params = new URL(location).searchParams","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"mutable params_used = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1964,"value":"md`## [Adaptive Concave Hull](https://observablehq.com/@mourner/adaptive-concave-hull)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1981,"value":"FlatQueue = require(\"flatqueue\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1972,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1992,"value":"concave_hull(pts)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2053,"value":"## Tiles","pinned":false,"hidden":false,"mode":"md"},{"id":2021,"value":"url = (x, y, z) => `https://${urlTiles}/${z}/${x}/${y}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"deltas = [-4, -1, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"md`## Graph`","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":650,"value":"max_beetween = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$36","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":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":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"},{"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":1617,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"import { observeWorker as worker } from \"@fil/worker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"import { slider, button,text, select, autoSelect, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"simplify = require(\"simplify-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"ngraph = require(\"ngraph.graph\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3@6\", \"d3-delaunay@^5.1\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"import {\n geocoding,\n reverse_geocoding,\n small_name\n} from \"@pierreleripoll/geocoding-nominatim\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"import { shareTweet } from \"@pierreleripoll/share-on-twitter-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"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":"$W37","stdlib":"1","titling":"auto"}