30:T5b8,function sample(points, options = {}) { const { interval = 100, windowSize = 5 } = options; // Compute cumulative distances along the path const ds = points.reduce((acc, [x1, y1], i) => { if (i === 0) { acc.push(0); } else { const [x0, y0] = points[i - 1]; acc.push(acc.at(-1) + Math.hypot(x1 - x0, y1 - y0)); } return acc; }, []); const totalLength = ds.at(-1); // Generate sample distances at fixed interval const numSamples = Math.ceil(totalLength / interval); const sampleDistances = Array.from({ length: numSamples + 1 }, (_, i) => Math.min(i * interval, totalLength) ); // Interpolate points at the sample distances let i = 0; const pts = sampleDistances.map((t) => { while (i < ds.length - 1 && ds[i + 1] < t) { i++; } const ratio = (t - ds[i]) / (ds[i + 1] - ds[i]); const [x0, y0] = points[i]; const [x1, y1] = points[i + 1]; return [x0 + ratio * (x1 - x0), y0 + ratio * (y1 - y0)]; }); // Apply moving average to smooth the sampled points const halfWindow = Math.floor(windowSize / 2); return pts.map((_, i, arr) => { const windowPoints = arr.slice( Math.max(0, i - halfWindow), Math.min(arr.length, i + halfWindow + 1) ); const count = windowPoints.length; const [sumX, sumY] = windowPoints.reduce( ([accX, accY], [x, y]) => [accX + x, accY + y], [0, 0] ); return [sumX / count, sumY / count]; }); }31:T6b8,function calcPerpVectors(pts, options = {}) { const { windowSize = 3, k = 500 } = options; const pVectors = []; const numPoints = pts.length; const refDirection = [-1, 0]; for (let i = 0; i < numPoints; i++) { const start = Math.max(0, i - Math.floor(windowSize / 2)); const end = Math.min(numPoints - 1, i + Math.floor(windowSize / 2)); const windowPoints = pts.slice(start, end + 1); const mean = windowPoints.reduce( (acc, [x, y]) => { acc.x += x; acc.y += y; return acc; }, { x: 0, y: 0 } ); mean.x /= windowPoints.length; mean.y /= windowPoints.length; // Calculate covariance matrix components let [covXX, covXY, covYY] = [0, 0, 0]; for (const [x, y] of windowPoints) { const [dx, dy] = [x - mean.x, y - mean.y]; covXX += dx * dx; covXY += dx * dy; covYY += dy * dy; } // Normalize covariance covXX /= windowPoints.length; covXY /= windowPoints.length; covYY /= windowPoints.length; // Calculate the angle of the heading and perpendicular components const theta = 0.5 * Math.atan2(2 * covXY, covXX - covYY); let perpX = -Math.sin(theta); let perpY = Math.cos(theta); // Ensure consistent orientation const dotProduct = perpX * refDirection[0] + perpY * refDirection[1]; if (dotProduct < 0) { // Flip the perpendicular vector perpX = -perpX; perpY = -perpY; } // Calculate endpoints of the perpendicular vector const x0 = pts[i][0]; const y0 = pts[i][1]; pVectors.push({ x1: x0 + k * perpX, y1: y0 + k * perpY, x2: x0 - k * perpX, y2: y0 - k * perpY }); } return pVectors; }32:Teb4,{ const annotate = (annotations, left = true) => Plot.text( annotations.map((d) => ({ txt: d[0], y: d[1] })), { x: left ? 0 : demTransect[0].length, y: "y", text: "txt", textAnchor: left ? "end" : "start", dx: left ? -10 : 20, fontFamily: left ? "BellTopoSansBold" : "Caveat", fontSize: left ? 18 : 14, fillOpacity: left ? 0.5 : 1, lineWidth: 16, lineAnchor: "middle" } ); return Plot.plot({ style: "background:rgb(253,249,245)", width: 640, height: 1400, insetLeft: 200, insetRight: 200, insetTop: 50, insetBottom: 50, color: { interpolate: sequence(terrainClrs) }, x: { axis: null }, y: { axis: null }, marks: [ Plot.raster(demTransect.flat(), { width: demTransect[0].length, height: demTransect.length, opacity: 0.4 }), Plot.raster(reliefTransect.flat(), { width: reliefTransect[0].length, height: reliefTransect.length, fill: d3.interpolate("#000", "#fee"), mixBlendMode: "multiply", opacity: 0.8 }), Plot.ruleX([demTransect[0].length / 2], { stroke: "firebrick", strokeWidth: 3, opacity: 0.8, strokeDasharray: [6, 9] }), annotate([ ["AMBLESIDE", 4], ["Grasmere", 70], ["Easedale", 110], ["Greenup Edge", 140], ["Borrowdale", 200], ["Derwent Water", 260], ["KESWICK", 328] ]), annotate( [ ["An 5:30am start as this is going to be a long day", 4], [ "An easy stroll along familiar paths at the foot of Scandale and overlooking Rydal", 20 ], [ "Following the old Coffin Route used by residents of Rydal who buried their dead in Grasmere parish", 40 ], [ "Arrived in Grasmere before the shops opened, so will have to make do with provisions I am carrying. Looks like it's going to be a hot day", 65 ], [ "Walk proper starts here as I leave Grasmere and ascend Easdale. The lower part is easy walking but gets steeper in Upper Easedale. Getting through my water quite quickly", 90 ], [ "Views improving as I get higher. First glimpse of the Scafell range to the west", 115 ], [ "Easy to get lost up here as I traverse the boggy ground of Greenup Edge", 130 ], ["First views of Borrowdale!", 140], ["Tricky descent to Stonethwaite in hot sun", 150], ["Very hot and thirsty. No water left!", 160], [ "Managed to find small farm shop. Cake and drink and a much needed rest", 180 ], [ "Walking much flatter now I am in Borrowdale proper, but legs complaining", 200 ], [ "Woodland walking provides much needed shelter from sun. Borrowdale is beautiful.", 220 ], [ "Now onto the banks of Derwent Water. Keswick as just 10km away at the other end", 240 ], [ "Legs ache, but thankfully walking is easy on good paths with stunning views of the lake", 280 ], [ "Just passed a Alpaca walking park at Lingholm. They really are comedy animals", 300 ], ["Quick stop at Cafe for drink and urgent rest for tired legs", 315], ["Made it! And in time for the last bus home", 325] ], false ) ] }); }33:[{"id":"fed7c4281f01b05a38f85433661ff88d008485e871189fe69b096032091dd0e8c3323c1e2064652b6f2336b06620e01896cc9efa6fcbd95f049d315ec2f3dee5","href":"https://static.observableusercontent.com/files/fed7c4281f01b05a38f85433661ff88d008485e871189fe69b096032091dd0e8c3323c1e2064652b6f2336b06620e01896cc9efa6fcbd95f049d315ec2f3dee5","name":"borrowdale.json","type":"application/json","lastModified":1730790521104.354,"size":6916},{"id":"aa7a56a4cd0ce93d445b45d5258393c8aa40d0b557fc3350a31196cd9b9c603bd2b9264e9d9bb48e0af2f5bf2a8f0d8b46042eca4c90285e4ce056ab8a449862","href":"https://static.observableusercontent.com/files/aa7a56a4cd0ce93d445b45d5258393c8aa40d0b557fc3350a31196cd9b9c603bd2b9264e9d9bb48e0af2f5bf2a8f0d8b46042eca4c90285e4ce056ab8a449862","name":"borrowdaleRelief.png","type":"image/png","lastModified":1730797771294.216,"size":117797},{"id":"f9b1e436535734bfc8c1bbe74cd2a1325a543b54506046588c14e4175a4b234440b1a5d17bef09f00bbbd17f96306fd3886cce32ef9f91bbebfa1b1cb0e029cb","href":"https://static.observableusercontent.com/files/f9b1e436535734bfc8c1bbe74cd2a1325a543b54506046588c14e4175a4b234440b1a5d17bef09f00bbbd17f96306fd3886cce32ef9f91bbebfa1b1cb0e029cb","name":"borrowdaleDem.asc","type":"application/pgp-signature","lastModified":1730797882657.611,"size":1319772},{"id":"09c783273dd01fa26ff0ed485527bce2abc3f16b3e65422f2fcf3bbfa04606ee97a575930ace23dbe3a541ff321401c219f27b2f3cb91e63a38a9ba2f85a25bb","href":"https://static.observableusercontent.com/files/09c783273dd01fa26ff0ed485527bce2abc3f16b3e65422f2fcf3bbfa04606ee97a575930ace23dbe3a541ff321401c219f27b2f3cb91e63a38a9ba2f85a25bb","name":"itineraryMapLondonNaples.jpg","type":"image/jpeg","lastModified":1730824262055.017,"size":672164},{"id":"fe727eae2b0cd8ccfe8f1cc761f89266756f8495e1482960ffcb61265932429104db5951e48dbb75287965e182e5ed1ce307044a2a8e2db3d8535b7c0f08e2af","href":"https://static.observableusercontent.com/files/fe727eae2b0cd8ccfe8f1cc761f89266756f8495e1482960ffcb61265932429104db5951e48dbb75287965e182e5ed1ce307044a2a8e2db3d8535b7c0f08e2af","name":"BellTopoSans-Bold.otf","type":"font/otf","lastModified":1730831301634.669,"size":149480}] 2e:{"title":"30 Day Map Challenge: 5. A Journey","cells":[{"id":0,"value":"# 30 Day Map Challenge: 5. A Journey","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"For this challenge I was thinking about what map characteristics help to emphasise 'journey'. I was reminded of some of the medieval 'itinerary maps' used to guide pilgrims along their route. They were often very linear, being read in vertical strips, such as this one from Mathew Paris between London and Naples:","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"FileAttachment(\"itineraryMapLondonNaples.jpg\").image({ width: 640 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"_Source: [British Library](https://blogs.bl.uk/digitisedmanuscripts/2020/07/the-maps-of-matthew-paris.html)_","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"One of the longer journeys I've made on foot recently was a 40km walk from Ambleside to Keswick in the English Lake District. As I recorded the GPS track of my walk on my phone, I thought I'd attempt to show the journey in map form, experimenting with the idea of a linear itinerary map.","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"## Data Sources and Processing","pinned":false,"hidden":false,"mode":"md"},{"id":467,"value":"Starting with a GPX file of my route, I converted it into JSON format, simplified it a little in [mapShaper](https://mapshaper.org), saved it as the topoJSON file `borrowdale.json` (attached to this document) and [projected it to an OSGB coordinate system](https://observablehq.com/@jwolondon/projection):","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"track = FileAttachment(\"borrowdale.json\")\n .json()\n .then((data) => TDMC.geoToOSGB(topojson.feature(data, \"track\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"Plot.plot({\n width: 320,\n height: 490,\n inset: 16,\n projection: { type: \"reflect-y\", domain: track },\n marks: [\n Plot.frame({ fill: \"rgba(244,224,205,0.5)\" }),\n Plot.geo(track, {\n stroke: \"firebrick\",\n strokeWidth: 3,\n opacity: 0.8,\n strokeDasharray: [6, 9]\n }),\n Plot.text([\"Ambleside\"], { x: 335500, y: 504000, fontSize: 16 }),\n Plot.text([\"Keswick\"], { x: 328000, y: 523000, fontSize: 16 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"The walk had an early start in Ambleside (5:30am) heading northwest over the pass at the head of Easedale and northward into Borrowdale before ending in Keswick.","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"For some background mapping I used some of these [topographic mapping techniques](https://observablehq.com/@jwolondon/topographic-mapping) to give an impression of the mountain terrain. To do this I selected the subset of the [Ordnance Survey Terrain 50 DEM](https://osdatahub.os.uk/downloads/open/Terrain50) covering the region (`borrowdaleDEM.asc`) and generated a matching shaded relief raster with [Eduard](https://eduard.earth) (`borrowdaleRelief.png`). These were both converted into Plot-compatible raster datasets (`dem` and `relief` respectively) along with a boundary object identifying their spatial extent:","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"dem = TDMC.loadGrid(await FileAttachment(\"borrowdaleDem.asc\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"relief = FileAttachment(\"borrowdaleRelief.png\")\n .image()\n .then((d) => TDMC.toBitmap(d))\n .then((d) => ({\n values: TDMC.gRaster(d).values,\n nRows: dem.nRows,\n nCols: dem.nCols,\n llCorner: dem.llCorner,\n cellSize: dem.cellSize\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"bounds = TDMC.boundsFromGrid(dem)","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"This allowed me to show the route as a conventional overlay on the topographic backdrop:","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"Plot.plot({\n width: 640,\n height: 755,\n\n projection: { type: \"reflect-y\", domain: bounds.feature },\n color: { interpolate: sequence(terrainClrs) },\n marks: [\n Plot.raster(dem.values, {\n ...bounds,\n opacity: 0.3\n }),\n Plot.raster(relief.values, {\n ...bounds,\n fill: d3.interpolate(\"#000\", \"#fee\"),\n mixBlendMode: \"multiply\",\n opacity: 0.8\n }),\n Plot.geo(track, {\n stroke: \"firebrick\",\n strokeWidth: 3,\n opacity: 0.8,\n strokeDasharray: [6, 9]\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"But my goal here was to 'straighten out' the route and show only the terrain to its left and right. One approach to doing this is to calculate the vectors perpendicular to the route, extending some fixed distance on either side. To ensure a smooth set of vectors, we can sample at regular distances and take the direction based on some rolling average heading:","pinned":false,"hidden":false,"mode":"md"},{"id":561,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"This gives us transects crossing the main (red) path:","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"{\n const trackCoords = sample([...track.features[0].geometry.coordinates], {\n interval: 500,\n windowSize: 2\n });\n const vectors = calcPerpVectors(trackCoords, { windowSize: 10, k: 2000 });\n\n return Plot.plot({\n width: 640,\n height: 755,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n color: { interpolate: sequence(terrainClrs) },\n marks: [\n Plot.raster(dem.values, {\n ...bounds,\n opacity: 0.4\n }),\n Plot.raster(relief.values, {\n ...bounds,\n fill: d3.interpolate(\"#000\", \"#fee\"),\n mixBlendMode: \"multiply\",\n opacity: 0.8\n }),\n Plot.arrow(vectors, {\n x1: \"x1\",\n y1: \"y1\",\n x2: \"x2\",\n y2: \"y2\",\n strokeWidth: 2,\n headLength: 0\n }),\n Plot.geo(track, {\n stroke: \"firebrick\",\n strokeWidth: 4,\n opacity: 0.8,\n strokeDasharray: [6, 9]\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"Using these vector transects we can sample from the rasters forming backdrop map, generating a new raster comprising a row for each transect. Because each transact is a fixed length and at a regular interval, this generates new long-thin rasters centred on the original GPS path.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"function sampleRasterAlongVectors(raster, vectors, options = {}) {\n const { numSamples = 100, transpose = false } = options;\n const transects = [];\n const cellSize = raster.cellSize;\n const [llX, llY] = [raster.llCorner[0], raster.llCorner[1]];\n const [nCols, nRows] = [raster.nCols, raster.nRows];\n\n for (const vector of vectors) {\n const { x1, y1, x2, y2 } = vector;\n const samples = [];\n for (let i = 0; i <= numSamples; i++) {\n const t = i / numSamples;\n const [x, y] = [x1 + t * (x2 - x1), y1 + t * (y2 - y1)];\n const col = Math.floor((x - llX) / cellSize);\n const row = Math.floor((y - llY) / cellSize);\n\n if (col >= 0 && col < nCols && row >= 0 && row < nRows) {\n samples.push(raster.values[row * nCols + col]);\n } else {\n samples.push(null);\n }\n }\n transects.push(samples);\n }\n return transpose ? transposeArray(transects) : transects;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"trackCoords = sample([...track.features[0].geometry.coordinates], {\n interval: 100,\n windowSize: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"vectors = calcPerpVectors(trackCoords, { windowSize: 50, k: 2000 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"demTransect = sampleRasterAlongVectors(dem, vectors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"reliefTransect = sampleRasterAlongVectors(relief, vectors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"## The Journey Map\n\nHaving generated the new 'itinerary' rasters, we can display the vertical map adding annotations along the length of the route, in this case reflecting my recollection of the journey. Because I made the journey from SE to NW, the annotations are designed to be read from bottom up.","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"_For interpolated colours:_","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"function sequence(clrs, interp = d3.interpolateRgb) {\n const interps = [];\n for (let i = 0; i < clrs.length - 1; i++) {\n interps.push(interp(clrs[i], clrs[i + 1]));\n }\n return (t) => {\n if (t < 0) {\n return \"blue\";\n }\n const scaledT = d3.scaleLinear().range([0, clrs.length - 1])(t);\n const intT = Math.min(clrs.length - 2, Math.floor(scaledT));\n return interps[intT](scaledT - intT);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"terrainClrs = [\n \"rgb(141,166,141)\",\n \"rgb(172,194,155)\",\n \"rgb(221,219,167)\",\n \"rgb(254,235,181)\",\n \"rgb(248,212,153)\",\n \"rgb(241,170,109)\",\n \"rgb(227,112,72)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"_Should we need to create a left-to-right journey map:_","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"function transposeArray(array) {\n return array[0].map((_, colIndex) => array.map((row) => row[colIndex]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"_For custom fonts:_","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":737,"value":"