2b:null 2c:["$","title",null,{"children":"Upstream & Downstream with Turf | Simon Barnfield | Observable"}] 31:T1064,viewof chart = { const svg = d3.create("svg") .attr("viewBox", [-5, -5, widthgeo+10, heightgeo+10]) .property("value", []); const upFlag = direction == 'Upstream' || direction == 'Both' ? true : false; const downFlag = direction == 'Downstream' || direction == 'Both' ? true : false; const g = svg.append("g"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden"); const zoom = d3.zoom() .scaleExtent([1, 6]) .translateExtent([[0, 0], [widthgeo, heightgeo]]) .extent([[0, 0], [widthgeo, heightgeo]]) .on("zoom", zoomed); const image = g.append("g") .attr("pointer-events", "none") .selectAll("image"); const tiles = tile(); image.data(tiles, d => d).join("image") .attr("xlink:href", d => url(...d)) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("opacity", 0.85) .attr("height", tiles.scale); g.append("path") .datum(river) .attr("class", "lowerpath") .attr("fill", "none") .attr("stroke", "teal") .attr("stroke-width", 2.4) .attr("stroke-opacity", 1) .attr("d", path); /*g.append("path") .datum(river) .attr("class", "upperpath") .attr("fill", "none") .attr("stroke", "#98CCD9") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1) .attr("d", path);*/ g.selectAll(".selectedpath") .data(river.features) .join("path") .attr("class", "selectedpath") .attr("fill", "none") .attr("stroke", d => upNodes[0].has(d.properties.node) == true && upFlag == true ? "#ff9f00" : downNodes[0].has(d.properties.node) == true & downFlag == true ? "#ff0000" : "#98CCD9") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1) .attr("d", path); if (upFlag == true) { for (const element of upNodes[1].entries()) { let stop = 0; if (element[0] == closestLine.node) { stop = closestLine.distanceFromStart; } else { stop = sectionMap.get(element[0]).length; } let start = stop - element[1]; let partPath = turf.lineSliceAlong(river.features[sectionMap.get(element[0]).index], start, stop, {units: 'miles'}); g.append("path") .datum(partPath) .attr("class", "partselectedpath") .attr("fill", "none") .attr("stroke", "#ff9f00") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1) .attr("d", path); } }; if (downFlag == true) { for (const element of downNodes[1].entries()) { let start = 0; if (element[0] == closestLine.node) { start = closestLine.distanceFromStart; } else { start = 0; } let stop = start + element[1]; let partPath = turf.lineSliceAlong(river.features[sectionMap.get(element[0]).index], start, stop, {units: 'miles'}); g.append("path") .datum(partPath) .attr("class", "partselectedpath") .attr("fill", "none") .attr("stroke", "#ff0000") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1) .attr("d", path); } }; svg.on("click", function(event){ let value = []; let xy = d3.pointer(event,g.node()); let coords = projection.invert([xy[0],xy[1]]); //let coords = projection.invert([e.offsetX, e.offsetY]); value = [coords[0],coords[1]]; //value = xy; svg.property("value", value).dispatch("input"); }); svg.call(zoom); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.selectAll(".lowerpath") .attr("stroke-width", 2.4/Math.sqrt(transform.k)); g.selectAll(".upperpath") .attr("stroke-width", 1.5/Math.sqrt(transform.k)); g.selectAll(".selectedpath") .attr("stroke-width", 1.5/Math.sqrt(transform.k)); g.selectAll(".partselectedpath") .attr("stroke-width", 1.5/Math.sqrt(transform.k)); } return svg.node(); }32:T6ad,upNodes = { let distanceTravelled = 0; let startingDistance = closestLine.distanceFromStart; let startingNode = closestLine.node; let nodeEndDistance = 0; let nodeLength = 0; const sectionsTravelled = new Map(); const sectionsPartTravelled = new Map(); sectionsTravelled.set(startingNode,0); //add nearest node for (const element of sectionsTravelled.entries()) { nodeLength = sectionMap.get(element[0]).length; //length of current node if (element[0] == startingNode) { nodeEndDistance = startingDistance; if (distance <= nodeEndDistance) { distanceTravelled = distance; } else { distanceTravelled = nodeEndDistance; } } else { nodeEndDistance = element[1] + nodeLength; if (distance <= nodeEndDistance) { distanceTravelled = distance - element[1]; } else { distanceTravelled = nodeEndDistance - element[1]; } } if (distance <= nodeEndDistance) { //sectionsTravelled.set(element[0],distanceTravelled); sectionsTravelled.delete(element[0]); sectionsPartTravelled.set(element[0],distanceTravelled); } else if (distance > nodeEndDistance) { if (element[0] == startingNode) { sectionsTravelled.delete(element[0]); sectionsPartTravelled.set(element[0],distanceTravelled); } else { sectionsTravelled.set(element[0],distanceTravelled); } if (upMap.has(element[0])) { for (const x of upMap.get(element[0]).entries()) { //add adjacent sections sectionsTravelled.set(x[0],nodeEndDistance); } } } } return [sectionsTravelled,sectionsPartTravelled]; }33:T6c0,downNodes = { let distanceTravelled = 0; let startingDistance = closestLine.distanceFromStart; let startingNode = closestLine.node; let nodeEndDistance = 0; let nodeLength = 0; const sectionsTravelled = new Map(); const sectionsPartTravelled = new Map(); sectionsTravelled.set(startingNode,0); //add nearest node for (const element of sectionsTravelled.entries()) { nodeLength = sectionMap.get(element[0]).length; //length of current node if (element[0] == startingNode) { nodeEndDistance = nodeLength - startingDistance; if (distance <= nodeEndDistance) { distanceTravelled = distance; } else { distanceTravelled = nodeEndDistance; } } else { nodeEndDistance = element[1] + nodeLength; if (distance <= nodeEndDistance) { distanceTravelled = distance - element[1]; } else { distanceTravelled = nodeEndDistance - element[1]; } } if (distance <= nodeEndDistance) { //sectionsTravelled.set(element[0],distanceTravelled); sectionsTravelled.delete(element[0]); sectionsPartTravelled.set(element[0],distanceTravelled); } else if (distance > nodeEndDistance) { if (element[0] == startingNode) { sectionsTravelled.delete(element[0]); sectionsPartTravelled.set(element[0],distanceTravelled); } else { sectionsTravelled.set(element[0],distanceTravelled); } if (downMap.has(element[0])) { for (const x of downMap.get(element[0]).entries()) { //add adjacent sections sectionsTravelled.set(x[0],nodeEndDistance); } } } } return [sectionsTravelled,sectionsPartTravelled]; }34:[{"id":"b62c2908dc92425e5ed9556277cd3db0f38d7f8dda4c4e1e381d79db238d07ff853a0b914795d2496702f43e8fd9b4968e4d7b43d2c028b6d82d0f80778a81aa","href":"https://static.observableusercontent.com/files/b62c2908dc92425e5ed9556277cd3db0f38d7f8dda4c4e1e381d79db238d07ff853a0b914795d2496702f43e8fd9b4968e4d7b43d2c028b6d82d0f80778a81aa","name":"coquet-down.csv","type":"text/csv","lastModified":1663328929062.997,"size":5168},{"id":"29aa7cf24fd08f7c29de2e863aa16c359fd68317fbb6be94db17efbea5db6cbc60d32d5f467e8caa03dcf7f68a48353acced35fc37869431861258836ee17728","href":"https://static.observableusercontent.com/files/29aa7cf24fd08f7c29de2e863aa16c359fd68317fbb6be94db17efbea5db6cbc60d32d5f467e8caa03dcf7f68a48353acced35fc37869431861258836ee17728","name":"coquet@1.json","type":"application/json","lastModified":1658320452473.995,"size":197051},{"id":"bd0c4bad580d8817baa23489fc865ab2483f30defb8e9898e28feb11b4ea7da5bf67a7a9f62e8cd2449560f33d5098562fd3f0ca4affa888cf2ad33caced071b","href":"https://static.observableusercontent.com/files/bd0c4bad580d8817baa23489fc865ab2483f30defb8e9898e28feb11b4ea7da5bf67a7a9f62e8cd2449560f33d5098562fd3f0ca4affa888cf2ad33caced071b","name":"coquet-up.csv","type":"text/csv","lastModified":1658321569592.664,"size":4290}] 2f:{"id":"952a1d83ce1b761f","slug":"upstream-downstream-with-turf","title":"Upstream & Downstream with Turf","thumbnail":"7b0e4d9d86369d69a2e4009c8293d931e6ea72b4be8e7262fa0743b732a41218","access_level":"public","create_time":"$D2022-07-14T09:36:04.187Z","update_time":"$D2022-11-30T09:58:38.477Z","view_time":null,"first_public_time":"$D2022-09-18T19:11:20.738Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"c017f5cda98e7944","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":"starter_2024"},"version":595,"publish_version":595,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1916020b4abef15","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":null}],"members":[{"type":"individual","id":"e1916020b4abef15","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Upstream & Downstream with Turf","cells":[{"id":0,"value":"# Upstream & Downstream with Turf","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":591,"value":"This notebook allows you to visualise upstream and downstream distances on the River Coquet (Northumbria, UK). Turf.js is used in conjunction with a graph model to calculate actual traversed river distances.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":509,"value":"viewof direction = Inputs.radio([\"Upstream\", \"Downstream\", \"Both\"], {label: \"Direction\", value: \"Both\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof distance = Inputs.range([0.1, 60], {value: 5, step: 0.1, label: \"Distance (miles)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":382,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"## Attribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":576,"value":"Contains OS data © Crown copyright and database right 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":578,"value":"© Mapbox © OpenStreetMap Improve this map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":580,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":226,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"sections = river.features.map(item => turf.length(item, {units: 'miles'}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"closestLine = {\n let minDistance = closestOnLine[0][1].dist;\n let lineIndex = 0;\n let index = 0;\n let distanceFromStart = 0;\n let node = '';\n for (let i = 1; i < closestOnLine.length; ++i) {\n if (closestOnLine[i][1].dist < minDistance) {\n minDistance = closestOnLine[i][1].dist;\n lineIndex = closestOnLine[i][1].index;\n index = i;\n node = closestOnLine[i][0];\n distanceFromStart = closestOnLine[i][1].location;\n }\n }\n return {node, index, minDistance, lineIndex, distanceFromStart};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"closestOnLine = river.features.map(item => [item.properties.node, turf.nearestPointOnLine(item, pt, {units: 'miles'}).properties])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"pt = turf.point([-1.9100239901856841, 55.30780911683412]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"river = FileAttachment(\"coquet@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"sectionMap = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"turf.lineSliceAlong(river.features[sectionMap.get(69324).index], 0, 0.3, {units: 'miles'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"{\n for (let i = 0; i < river.features.length; ++i) {\n sectionMap.set(river.features[i].properties.node, { index: i, length: turf.length(river.features[i], {units: 'miles'}) })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"upMap = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"{\n for (let i = 0; i < up.length; ++i) {\n upMap.set(up[i].node, new Set(up[i].adjacent.substr(1,up[i].adjacent.length-2).split(',').map(Number)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"downMap = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"{\n for (let i = 0; i < down.length; ++i) {\n downMap.set(down[i].node, new Set(down[i].adjacent.substr(1,down[i].adjacent.length-2).split(',').map(Number)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"up = FileAttachment(\"coquet-up.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"down = FileAttachment(\"coquet-down.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"heightgeo = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"widthgeo = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"projection = d3.geoMercator()\n .reflectY(false)\n .fitSize([widthgeo,heightgeo], river)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"tile = d3.tile()\n .size([widthgeo, heightgeo])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n .tileSize(256)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=pk.eyJ1Ijoic2ltb25iYXJuZmllbGQiLCJhIjoiY2tiMHB5ZTY3MGFpaTJ5bWVzb3h4dDJwaCJ9.4ZJ8DggsecJ1w4s8nury8Q`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"