2c:T564,graphic = { let svg = d3.create("svg") .attr("viewBox", [-padding, -padding, width+padding, height+padding]); //draw manhattan outline svg.append("g") .selectAll(".mn") .data(manhattan_geom.features) .join("path") .attr("class", "mn") .attr("stroke", "#263238") .attr("stroke-width", ".65px") .attr("fill", "none") .attr("d", d3.geoPath(projection)); //draw streets svg.append("g") .selectAll(".edge") .data(edges) .join("path") .attr("class", "edge") .attr("stroke", "#bdbdbd") .attr("stroke-width", ".5px") .attr("d", d3.geoPath(projection)); // draw origin point svg.append("g") .selectAll(".origin") .data(origin) .join("path") .attr("class", "origin") .attr("fill", "red") .attr("d", d3.geoPath(projection).pointRadius(3)); //draw random walk svg.append("g") .selectAll(".walk") .data(randomWalk) .join("path") .attr("class", "walk") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "1px") .attr("d", d3.geoPath(projection)); if (d3.selectAll(".walk").size() > 0 && animate === "Yes"){ let lineLength = d3.selectAll(".walk")._groups[0][0].getTotalLength() svg.selectAll(".walk").attr("stroke-dasharray", `${t/frames * lineLength},${lineLength}`) } return svg.node() }2d:T56a,function generateRandomWalk(originPoint) { const currentStart = originPoint[0]; let currentNode = currentStart; let coords = [currentNode.geometry.coordinates]; let distTravelled = 0; // build fast node lookup (same as avoiding walk) const nodeIndex = new Map( nodes.map(d => [d.properties.osmid, d]) ); while (distTravelled < targetDist_ft) { const possibleEdges = []; for (const edge of edges) { const { u, v } = edge.properties; if ( u === currentNode.properties.osmid || v === currentNode.properties.osmid ) { possibleEdges.push(edge); } } // dead end (rare, but possible) if (possibleEdges.length === 0) { return [coords, distTravelled]; } const currentEdge = possibleEdges[Math.floor(lcg() * possibleEdges.length)]; distTravelled += currentEdge.properties.length_ft; const nextNodeId = currentEdge.properties.u === currentNode.properties.osmid ? currentEdge.properties.v : currentEdge.properties.u; const nextNode = nodeIndex.get(nextNodeId); if (!nextNode) break; currentNode = nextNode; coords.push([ currentNode.geometry.coordinates[0], currentNode.geometry.coordinates[1] ]); } return [coords, distTravelled]; }2e:T608,function generateAvoidingRandomWalk(originPoint) { const currentStart = originPoint[0]; let currentNode = currentStart; let coords = [currentNode.geometry.coordinates]; let distTravelled = 0; const visitedEdges = new Set(); const visitedNodes = new Set([currentNode.properties.osmid]); // build fast node lookup const nodeIndex = new Map( nodes.map(d => [d.properties.osmid, d]) ); while (distTravelled < targetDist_ft) { const possibleEdges = []; for (const edge of edges) { const { u, v } = edge.properties; if ( !visitedEdges.has(edge) && ( (u === currentNode.properties.osmid && !visitedNodes.has(v)) || (v === currentNode.properties.osmid && !visitedNodes.has(u)) ) ) { possibleEdges.push(edge); } } if (possibleEdges.length === 0) { return [coords, distTravelled]; // dead end } const currentEdge = possibleEdges[Math.floor(lcg() * possibleEdges.length)]; visitedEdges.add(currentEdge); distTravelled += currentEdge.properties.length_ft; const nextNodeId = currentEdge.properties.u === currentNode.properties.osmid ? currentEdge.properties.v : currentEdge.properties.u; const nextNode = nodeIndex.get(nextNodeId); if (!nextNode) break; currentNode = nextNode; visitedNodes.add(nextNodeId); coords.push([ nextNode.geometry.coordinates[0], nextNode.geometry.coordinates[1] ]); } return [coords, distTravelled]; }2f:[{"id":"67c5a6cbb0e5386673bbde99afc105474a49bd51cc62e9aad799ab9c0164bae49ddd83a6d9bb70f49478a753ff11e661db3902f59e4e56ce7a88b9133a482715","href":"https://static.observableusercontent.com/files/67c5a6cbb0e5386673bbde99afc105474a49bd51cc62e9aad799ab9c0164bae49ddd83a6d9bb70f49478a753ff11e661db3902f59e4e56ce7a88b9133a482715","name":"MN_edge_list.json","type":"application/json","lastModified":1767397159750,"size":2957857},{"id":"5bd803c9584bffb743b51bac8d6e27a6113cc2f94da48b82f83a152282a1ba6f60b0b1332799b6ed1a903aa75cf201f2e45a98a7210c3440d012715fd74f3f86","href":"https://static.observableusercontent.com/files/5bd803c9584bffb743b51bac8d6e27a6113cc2f94da48b82f83a152282a1ba6f60b0b1332799b6ed1a903aa75cf201f2e45a98a7210c3440d012715fd74f3f86","name":"MN_node_list.json","type":"application/json","lastModified":1767397162639,"size":396225},{"id":"beb0b53afd52f5bfee00704c5b19b5417f80d3b29ff37e8dd824ba09c606364f165a8eaa28bb5045aa0044b1f9b7ccc0e2a837f194b2b189fce112af82fa04e6","href":"https://static.observableusercontent.com/files/beb0b53afd52f5bfee00704c5b19b5417f80d3b29ff37e8dd824ba09c606364f165a8eaa28bb5045aa0044b1f9b7ccc0e2a837f194b2b189fce112af82fa04e6","name":"NYC_2020_NTA.geojson","type":"application/geo+json","lastModified":1738812939084,"size":4625123}] 2a:{"title":"Random Walk Along a Street Grid (deterministic performance test)","cells":[{"id":0,"value":"# Random Walk Along a Street Grid (deterministic performance test)","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"_Toph forking from [Matt’s original](https://new.observablehq.com/@mpkhinda/random-walk-nyc) for performance testing. Removed Math.random, always starting at same point and then using d3.randomLcg, repeating every 10 seconds. See [thread](https://talk.observablehq.com/t/animation-frame-rate-change/10720)._\n\n---\n\nA visualization of a random walk along the Manhattan street network for ${miles} miles. Loosely adapted from [this notebook](https://observablehq.com/@fil/manhattan-voronoi-osmnx) by Fil (Philip Rivière). Network edges and nodes come from Geoff Boeing’s [OSMnx](https://github.com/gboeing/osmnx).\n\n_Note: self-avoiding walks ensure the path doesn't double back on itself, but often get trapped and end before the max distance. Self-intersecting walks always run close to the max distance but often appear shorter because they overlap._","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"viewof miles = Inputs.range([0, 10], {step: 1, label: html`Maximum Miles`})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof avoid = Inputs.radio([\"Yes\", \"No\"], {value: \"Yes\", label: html`Self-Avoiding`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof animate = Inputs.radio([\"Yes\", \"No\"], {value: \"Yes\", label: html`Animate`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"regenerate = {\n while (true) {\n yield true;\n const now = Date.now();\n const msUntilNext = 10000 - (now % 10000);\n await new Promise(resolve => setTimeout(resolve, msUntilNext));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"

Miles travelled: ${milesTravelled.toFixed(2)}

","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"#### key variables","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"height = width * 0.3;","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"// generates random origin\norigin = {\n regenerate\n let o = nodes[0];\n return [o];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"targetDist_ft = 5280*miles;","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"frames = 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"t = {\n regenerate;\n for (let i=0; i d.properties.boroname === \"Manhattan\")\n .map(d => {\n if (d.geometry.type !== \"MultiPolygon\") return d;\n const min_m2 = 200_000;\n const r2 = 6371008.8 ** 2; // used to convert steradians (d3.geoArea default) to sq meters using earth radius\n const kept = d.geometry.coordinates.filter(rings =>\n d.properties.nta2020 === \"MN0191\" // filtering gov island and piers\n ? rings[0].some(p => p[1] > 40.702)\n : Math.abs(d3.geoArea({type: \"Polygon\", coordinates: rings})) * r2 > min_m2\n );\n return {...d, geometry: {type: \"MultiPolygon\", coordinates: kept}};\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"nodes = {\n const rows = await FileAttachment(\"MN_node_list.json\").json();\n const edgeList = await FileAttachment(\"MN_edge_list.json\").json();\n\n const connected = new Set();\n for (const e of edgeList) {\n const len = +e.length;\n if (!Number.isFinite(len) || len < minEdgeLength) continue;\n connected.add(e.u);\n connected.add(e.v);\n }\n\n const mn = turf.combine(manhattan_geom).features[0];\n\n return rows\n .filter(d => connected.has(d.osmid))\n .map(d => ({\n type: \"Feature\",\n properties: d,\n geometry: { type: \"Point\", coordinates: [+d.x, +d.y] }\n }))\n .filter(d => turf.booleanPointInPolygon(d, mn));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"nodeIndex = new Map(\n nodes.map(d => [d.properties.osmid, d.geometry.coordinates])\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"edges = {\n const rows = await FileAttachment(\"MN_edge_list.json\").json();\n\n return rows.map(d => {\n const u = nodeIndex.get(d.u);\n const v = nodeIndex.get(d.v);\n\n if (!u || !v) {\n return null;\n }\n\n // coerce once, explicitly\n const length_m = +d.length;\n if (!Number.isFinite(length_m)) {\n return null;\n }\n \n // filter out very short edges that are likely misc data artifacts\n if (length_m < minEdgeLength) return null;\n\n return {\n type: \"Feature\",\n properties: {\n u: d.u,\n v: d.v,\n visited: 0,\n length_m: length_m,\n length_ft: +(length_m * 3.280839895).toFixed(3),\n name: d.name,\n type: d.highway\n },\n geometry: {\n type: \"LineString\",\n coordinates: [ u, v ]\n }\n };\n }).filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"randomWalk = {\n regenerate;\n edges.forEach(d => d.properties.visited = 0);\n const [coords, distTravelled] = selectWalk(origin);\n return [{\n type: \"Feature\",\n properties: {\n dist_ft: distTravelled\n },\n geometry: {\n type: \"LineString\",\n coordinates: coords\n }\n }];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"### Sources: ","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"Boeing, Geoff, 2017, \"36-NY-counties-street_networks-node_edge_lists.zip\", U.S. Street Network Shapefiles, Node/Edge Lists, and GraphML Files, https://doi.org/10.7910/DVN/CUWWYJ/MAJIGC, Harvard Dataverse, V2","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}