30:T4b7,function splitLinesByProximity(features, options = {}) { const { tMin = 10, tMax = 1000 } = options; const hash = ([x, y]) => `${Math.round(x / tMin)},${Math.round(y / tMin)}`; const visited = new Set(); const newFeatures = []; let currentLine = []; let [pX, pY] = [Infinity, Infinity]; const processLine = (line) => { line.forEach(([x, y]) => { const hv = hash([x, y]); if (!visited.has(hv)) { visited.add(hv); if (Math.hypot(x - pX, y - pY) > tMax) { // We have the start of a new line if (currentLine.length > 1) { newFeatures.push([...currentLine]); } pX = Infinity; pY = Infinity; currentLine = []; } currentLine.push([x, y]); pX = x; pY = y; } }); }; features.forEach((feat) => { if (feat.geometry.type === "LineString") { processLine(feat.geometry.coordinates); } else if (feat.geometry.type === "MultiLineString") { feat.geometry.coordinates.forEach(processLine); } }); if (currentLine.length > 1) { newFeatures.push(currentLine); } return new GeoJSON().lines(newFeatures).featureCollection; }31:T4e2,inset = [ [330818, 519097], [331179, 520177], [331400, 520953], [331179, 522061], [330818, 523308], [331012, 524306], [331483, 524887], [332037, 525552], [332813, 526079], [334032, 526522], [335196, 527076], [336332, 527325], [337440, 527519], [338382, 527519], [339740, 526965], [340959, 526494], [342067, 525996], [343231, 525275], [343840, 524583], [344450, 523530], [344533, 522394], [344034, 521507], [343397, 520842], [342289, 520288], [341374, 519817], [340543, 519374], [339961, 518847], [339435, 518238], [339407, 517518], [339546, 516631], [339823, 515689], [340238, 514969], [340626, 514276], [340709, 513750], [340876, 513140], [340654, 512309], [340460, 511699], [340405, 510813], [340432, 509871], [340515, 509206], [340515, 508347], [340460, 507682], [340515, 506851], [340211, 505660], [339629, 505133], [338992, 504413], [338188, 504164], [337274, 504828], [336831, 505604], [336193, 506325], [335473, 506297], [334614, 506435], [333894, 507156], [333450, 508680], [333146, 509899], [332730, 511312], [332287, 512974], [331954, 514248], [331705, 515495], [331095, 516659], [330846, 517878], [330818, 519097] ]32:T48e,function featheredOpacity(x, y, vertices, tolerance) { const pointInPolygon = (x, y, vertices) => { let inside = false; for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) { const [xi, yi] = vertices[i]; const [xj, yj] = vertices[j]; if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) { inside = !inside; } } return inside; }; const distToEdge = (x, y, p1, p2) => { const [x1, y1] = p1; const [x2, y2] = p2; const [dx, dy] = [x2 - x1, y2 - y1]; const dSq = dx * dx + dy * dy; const t = Math.max(0, Math.min(1, ((x - x1) * dx + (y - y1) * dy) / dSq)); return Math.hypot(x - x1 - t * dx, y - y1 - t * dy); }; const signedDistance = () => { let minDist = Infinity; for (let i = 0; i < vertices.length - 1; i++) { const p1 = vertices[i]; const p2 = vertices[i + 1]; minDist = Math.min(minDist, distToEdge(x, y, p1, p2)); } return pointInPolygon(x, y, vertices) ? -minDist : minDist; }; return pointInPolygon(x, y, vertices) ? 1 : Math.max(0, Math.min(1, 1 - Math.abs(signedDistance()) / tolerance)); }33:T6ad,{ const w = 800; return Plot.plot({ projection: { type: "reflect-y", domain: bounds.feature }, width: 800, marks: [ Plot.raster(relief.values, { ...bounds, fill: d3.interpolate("#310", "#eee"), opacity: 0.1 }), Plot.raster(reliefInset.values, { ...bounds, fill: (d) => d.clr, fillOpacity: (d) => d.op * 0.6 }), Plot.geo(streams, { stroke: "steelblue", strokeWidth: (d) => 0.2 + Math.log(d.properties.shreve) / 4 }), Plot.geo(lakes, { fill: "rgb(205,228,246)", stroke: "steelblue", strokeWidth: 0.5 }), Plot.geo(lakes, { fill: "url(#lakeDepth)" }), annotations(w), Plot.dot(wainwrights, { x: "easting", y: "northing", symbol: "triangle", fill: "firebrick", stroke: "black", strokeWidth: 0.3, r: 4 }), Plot.geo(tracks, { stroke: "firebrick", strokeWidth: 2, strokeDasharray: [4, 4] }), Plot.text(wainwrights, { x: "easting", y: "northing", dy: 5, lineAnchor: "top", text: "name", lineWidth: 7, fontFamily: "BellTopoSans", fill: "black", stroke: "white", strokeOpacity: 0.4, fillOpacity: 1 }), Plot.text(["Wainwright Bagging\nBook One:\nThe Eastern Fells"], { x: bounds.x2, y: bounds.y1, dx: -10, dy: -20, textAnchor: "end", lineAnchor: "bottom", fontSize: 34, fontFamily: "Cinzel", lineWidth: 9 }), Plot.frame({ strokeWidth: 0.5 }) ] }); }34:[{"id":"89288c238a58fffb97c994a47851e66d2dd56a104c717bf90c35fa1b6e8cdb5bba92110d20f1b6c0d2afe547dbc98cbf20a54d45f7d48d1bd6382659ca715eeb","href":"https://static.observableusercontent.com/files/89288c238a58fffb97c994a47851e66d2dd56a104c717bf90c35fa1b6e8cdb5bba92110d20f1b6c0d2afe547dbc98cbf20a54d45f7d48d1bd6382659ca715eeb","name":"easternFells.csv","type":"text/csv","lastModified":1731618698521.472,"size":1807},{"id":"a9e8f439998ba11422fd61aa097912dd3747ffc830c8dd26a123563460b8352f042ab4a3891e8d35bad88b450b446f3692b25287cb14471766d552be32c546b9","href":"https://static.observableusercontent.com/files/a9e8f439998ba11422fd61aa097912dd3747ffc830c8dd26a123563460b8352f042ab4a3891e8d35bad88b450b446f3692b25287cb14471766d552be32c546b9","name":"easternPaths.json","type":"application/json","lastModified":1731651800273.424,"size":96716},{"id":"1e7555baf67a9b513e54bf4123012b64bfd825d42b37221d27c3b731c79bb9a7e54bd89d46ee744b1b652e63f54c1446e7697479dbbcb7bc8d481aea4fe6f9f2","href":"https://static.observableusercontent.com/files/1e7555baf67a9b513e54bf4123012b64bfd825d42b37221d27c3b731c79bb9a7e54bd89d46ee744b1b652e63f54c1446e7697479dbbcb7bc8d481aea4fe6f9f2","name":"easternRelief.png","type":"image/png","lastModified":1731653372179.516,"size":69820},{"id":"a3ffe8c78358d2d79128df03e196c774b780d77c8e235fbc4df0cf89a9bcc12511eaac296808c2c1f52eeed6117567abe56044bc6f2800798633a06764259987","href":"https://static.observableusercontent.com/files/a3ffe8c78358d2d79128df03e196c774b780d77c8e235fbc4df0cf89a9bcc12511eaac296808c2c1f52eeed6117567abe56044bc6f2800798633a06764259987","name":"BellTopoSans-Regular.otf","type":"font/otf","lastModified":1731681326817.048,"size":138968},{"id":"fba6c804f7be321892bf283293821a43e36e852850e54fb5127e06acfa3bb0c13d0c61b577c0d5e489671967685abacdf05a1e14b8b548a329b498b30277c2d7","href":"https://static.observableusercontent.com/files/fba6c804f7be321892bf283293821a43e36e852850e54fb5127e06acfa3bb0c13d0c61b577c0d5e489671967685abacdf05a1e14b8b548a329b498b30277c2d7","name":"BellTopoSans-Italic.otf","type":"font/otf","lastModified":1731681326912.03,"size":140152},{"id":"fe727eae2b0cd8ccfe8f1cc761f89266756f8495e1482960ffcb61265932429104db5951e48dbb75287965e182e5ed1ce307044a2a8e2db3d8535b7c0f08e2af","href":"https://static.observableusercontent.com/files/fe727eae2b0cd8ccfe8f1cc761f89266756f8495e1482960ffcb61265932429104db5951e48dbb75287965e182e5ed1ce307044a2a8e2db3d8535b7c0f08e2af","name":"BellTopoSans-Bold.otf","type":"font/otf","lastModified":1731681326934.124,"size":149480}] 2e:{"title":"30 Day Map Challenge: 15. Data: My Data","cells":[{"id":0,"value":"# 30 Day Map Challenge: 15. Data: My Data","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"For this challenge, I wanted to improve my topographic mapping skills with Observable Plot. This also happens to be the year I start [Wainwright bagging](https://services.thebmc.co.uk/how-to-walk-climb-wainwright-beginner-guide).\n\nI am attempting the 214 fells in 'book order', which meant my first 35 summits have all been from [Book One: The Eastern Fells](https://www.alfredwainwright.co.uk/the-eastern-fells). I am also attempting to do them without resorting to private (car) transport, which means I have plenty of walking to the base of each climb.\n\nSo my objective today was to map the GPS tracks of all my walks to the 35 summits of Book One with a suitably evocative terrain backdrop to show the routes.","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"## Data Preparation","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"I first defined the area covering the Eastern Fells with a `bounds` object:","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"bounds = {\n const [x1, y1] = [330025, 503225];\n const [x2, y2] = [347025, 528025];\n return {\n x1: x1,\n y1: y1,\n x2: x2,\n y2: y2,\n width: 340,\n height: 496,\n feature: new GeoJSON()\n .points([\n [x1, y1],\n [x2, y2]\n ])\n .boundingRect()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"Within that bounding region, all 35 Wainwright summits were specified:","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"wainwrights = d3.csv(\n await FileAttachment(\"easternFells.csv\").url(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"### GPS Routes\n\nGPS typically record many more points than are necessary for mapping purposes, so my first task was to convert them from GPX format to GeoJSON (see Appendix) and then merge and simplify them in [MapShaper](https://mapshaper.org):","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"gpxTracks = topojson.feature(\n await d3.json(await FileAttachment(\"easternPaths.json\").url()),\n \"eastern\"\n).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"However, because many of the tracks I took, involved treading the same path several times over the 9 months it took to walk all 35 summits, I needed to further simplify the tracks to remove overlapping lines. I did this by rounding point locations to a virtual grid and reassembling tracks from unique grid locations:","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"tracks = splitLinesByProximity(gpxTracks, { tMin: 50, tMax: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"Plot.plot({\n width: 320,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n marks: [Plot.geo(tracks), Plot.frame()]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"### Backdrop mapping\n\nI used the approach described in my [topographic mapping page](https://observablehq.com/@jwolondon/topographic-mapping) to assemble the water features, label placement and relief backdrop for the area:","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"lakes = d3\n .json(\"https://gicentre.github.io/data/lakeDistrict/centralLakes.json\")\n .then((d) => topojson.feature(d, \"lakes\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"streams = d3\n .json(\"https://gicentre.github.io/data/lakeDistrict/centralStreams.json\")\n .then((d) => topojson.feature(d, \"streams\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"mapLabels = ({\n lakes: [\n {\n name: \"Thirlmere\",\n path: [\n [330800, 517970],\n [330780, 517420],\n [330850, 516790],\n [331100, 516180],\n [331450, 515600]\n ]\n },\n {\n name: \"Ullswater\",\n path: [\n [339300, 518500],\n [340660, 519500],\n [341640, 519900],\n [342490, 520200]\n ]\n }\n ],\n\n places: [\n { name: \"AMBLESIDE\", x: 338200, y: 503600 },\n { name: \"GRASMERE\", x: 332600, y: 507300 },\n { name: \"THRELKELD\", x: 332000, y: 525500 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"relief = FileAttachment(\"easternRelief.png\")\n .image()\n .then((d) => TDMC.toBitmap(d))\n .then((d) => TDMC.gRaster(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"Given the area covering the fells is not quite rectangular, I thought I'd experiment with ways of emphasising the part of the rectangular mapping area with the Wainwright summits. I did this by digitising a bounding polygon:","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"Plot.plot({\n width: 320,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n marks: [\n Plot.geo(tracks),\n Plot.geo(new GeoJSON().polygon(inset).featureCollection, { fill: \"#dcc7\" }),\n Plot.frame()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"But rather than have abrupt edges, I 'feathered' the boundary by performing a fuzzy point-in-polygon test for every grid cell in the raster grid covering the region. This allowed a linear decrease in opacity away from the boundary which I could use to overlay a darker relief map. This gives a pleasing decay way from the central mapping area.","pinned":false,"hidden":false,"mode":"md"},{"id":640,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"reliefInset = {\n const poly = inset;\n const rcToxy = (row, col) => [col * 50 + bounds.x1, row * 50 + bounds.y1];\n\n const insetRaster = [];\n const clrInterp = d3.interpolate(\"#310\", \"#fefafa\");\n for (let i = 0; i < relief.values.length; i++) {\n const row = Math.floor(i / relief.nCols);\n const col = i % relief.nCols;\n\n insetRaster.push({\n clr: clrInterp(relief.values[i]),\n op: featheredOpacity(...rcToxy(row, col), poly, 4000)\n });\n }\n\n return {\n nRows: relief.nRows,\n nCols: relief.nCols,\n values: insetRaster\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"## The Final Map\n\nBringing all the elements together provided a suitable record of my first year of Wainwright bagging on foot.\n\nI was quite pleased with being able to do this with standard Plot functionality demonstrating it can be used for quite subtle and sophisticated effects.","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"{\n // Save GPS as geoJSON line\n const gpx = await extractTrack(gpxFile);\n return DOM.download(\n () => {\n return new Blob([JSON.stringify(gpx.geo)], {\n type: \"application/txt\"\n });\n },\n gpx.name + \".json\",\n \"Save as geoJSON\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"_For GPX to GeoJSON conversion:_","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"import { xmlToJSON } from \"@visnup/xml-to-json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { OSGB } from \"@jwolondon/projection\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"proj = new OSGB()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof gpxFile = Inputs.file({\n label: \"Load GPX file\",\n accept: \".gpx,.csv\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"function extractTrack(gpxFile) {\n return gpxFile.text().then((file) => {\n const name = xmlToJSON(file).gpx.trk.name.content;\n const coords = xmlToJSON(file).gpx.trk.trkseg.trkpt.map((d) =>\n proj.toOSGB([Number(d.lon), Number(d.lat)]).map(Math.round)\n );\n\n return {\n name: name,\n geo: new GeoJSON().line(\n // Remove consecitive coordinates that are identical (stationary GPS readings)\n coords.filter(\n (coord, i) =>\n i === 0 ||\n coord[0] !== coords[i - 1][0] ||\n coord[1] !== coords[i - 1][1]\n )\n ).featureCollection\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"_For curved text labels (lakes):_","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"import { curvedText } from \"@jwolondon/curved-text-mark\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"function annotations(w) {\n const dflt = {\n x: \"x\",\n y: \"y\",\n text: \"name\",\n textAnchor: \"middle\",\n lineAnchor: \"middle\",\n fontSize: w / 80,\n stroke: \"rgba(255,255,255,0.2)\"\n };\n return [\n ...mapLabels.lakes.map((d) =>\n curvedText(d.name, {\n path: d.path,\n fitToPath: true,\n fontFamily: \"BellTopoSansItalic\",\n fill: \"rgb(40,120,180)\",\n stroke: \"rgba(255,255,255,0.6)\",\n strokeWidth: 1,\n fontSize: w / 40\n })\n ),\n Plot.text(mapLabels.places, {\n ...dflt,\n fontFamily: \"BellTopoSansBold\",\n fontSize: w / 50,\n fill: \"rgba(0,0,0,0.4)\"\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"_For lake depth effect:_","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"function aggregateDefs(defs) {\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"function createVignette(id, options = {}) {\n const { dark = \"black\", light = \"white\", r = 100, strength = 0.1 } = options;\n return `\n \n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"_Custom fonts:_","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":545,"value":"belltoposansBold = FileAttachment(\"BellTopoSans-Bold.otf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"belltoposans = FileAttachment(\"BellTopoSans-Regular.otf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"belltoposansItalic = FileAttachment(\"BellTopoSans-Italic.otf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":199,"value":"aggregateDefs([\n createVignette(\"lakeDepth\", {\n r: 250,\n strength: 0.2,\n light: \"steelblue\",\n dark: \"white\"\n })\n])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}