31:T44f,overview = { const base = cleanedGraph; // stravaActivitesGeoJSON; const options = {}; const width = 954; const projection = d3.geoIdentity().reflectY(true).fitWidth(width, base); const path = d3.geoPath(projection); const height = Math.ceil(path.bounds(base)[1][1]); return htl.html`

${md`The https://wandrer.earth/ service is great for getting me to run&bike new roads, but the service is limited to tracking progress against administrative boundaries (the globe, countries, counties, and cities). Thus, this notebook. We'll use OpenStreetMap for a basemap and Strava to track activities.`}

Current Progress (pulsing = already covered)

`; }32:T4bd,tagAffinity = { if (!runAssociation) return html`check the box above`; const labelGap = 100; // top-40 most-used const domain = d3 .groupSort( useTagValues ? tagAndValues : tagUse, (g) => g.length, (d) => d.key ) .filter((e, i, arr) => arr.length - i < tagLimit && !skipTags.includes(e)); return Plot.plot({ marginLeft: labelGap, marginBottom: labelGap, width, color: { scheme: "plasma", legend: true }, x: { domain, tickRotate: 45, margin: 10, labelAnchor: "left", reverse: true }, y: { domain, labelAnchor: "top", margin: 100, grid: true // reverse: true }, marks: [ Plot.cell( tagAssociations, Plot.group( { fill: (g) => d3.sum(g) / 2, // tagAssociations() double-counts title: (g) => `${g[0].tag1} / ${g[0].tag2}\ncount: ${g.length}`, opacity: ([{ tag1, tag2 }]) => domain.indexOf(tag2) >= domain.indexOf(tag1) }, { x: "tag1", y: "tag2", fill: "count", inset: 0 } ) ) ] }); }33:T6d5,// Remove "dangling ends" // - uses getCrossings() to group geometry into a map of points: Map< latlng: FeatureID[] > // - then loops over all the features in the map to: // * trim any "excess" points beyond the outermost connections // * removes any features which are only connected at one end // - recursively run this ^ to iteratively remove singly-connected features function* trimDangles(geojson, limit = -1, prev) { // exit early if we reach the limit or the last cycle was useless if (limit === 0 || prev?.features.length === geojson.features.length) { yield geojson; return geojson; } // the actual yield (first result is the original geometry, and future recursive iterations) yield geojson; // get crossing points const crossingPts = getCrossings(geojson); // delegate yields based on trimmed geometry yield* trimDangles( { ...geojson, features: structuredClone(geojson.features).reduce( (allFeatures, feature) => { const { geometry: { coordinates } } = feature; // bitmask to mark points which are at intersections const bitMap = coordinates.map((c) => crossingPts.includes(c.toString()) ); // skip features which only have one connection if (bitMap.filter((d) => d).length > 1) { allFeatures.push(feature); allFeatures.at(-1).geometry.coordinates = allFeatures .at(-1) .geometry.coordinates.slice( bitMap.indexOf(true), bitMap.lastIndexOf(true) + 1 ); } return allFeatures; }, [] ) }, limit > 0 ? limit - 1 : limit, geojson ); }34:T51f,// Given an iterable sequence of geojson graphs (an array or other iterable, sync or async) // will yield (it's a generator) a sequence of maps for display async function* mapFrom(GeoJSONIterable, opts) { const options = Object.assign( { delay: 300, // configurable animation delay bbox: null // pass geojson for a fixed frame }, opts ); if (options.log !== null) console.log(options.log, GeoJSONIterable); let width, projection, path, height, graph; // what i'm trying to do here is handle geojson as both: // - a static array of data // - as well as a generator for await (graph of GeoJSONIterable) { if (!options.bbox) options.bbox = graph; // ... width = 954; projection = d3.geoIdentity().reflectY(true).fitWidth(width, options.bbox); path = d3.geoPath(projection); height = Math.ceil(path.bounds(options.bbox)[1][1]); yield Promises.delay( options.delay, htl.html`` ); } // from "@mbostock/geojson-viewer" return htl.html` `; }35:[{"id":"bef054fce32e6a0daa84021f406b3129e0d29bbadd6c18ff9ac84e09ddf25ded5ffe67dafbd20cd10ebe063779dbe7941b2e2bc38b2168186d20c6660b216da0","href":"https://static.observableusercontent.com/files/bef054fce32e6a0daa84021f406b3129e0d29bbadd6c18ff9ac84e09ddf25ded5ffe67dafbd20cd10ebe063779dbe7941b2e2bc38b2168186d20c6660b216da0","name":"fells-full.geojson","type":"application/geo+json","lastModified":1654629350434.479,"size":12876106},{"id":"cf62b7ccf340bb6811335cd96a32fb032d4915118d0cb36ce8cc318012b06fe23fb5072da8f46939bbcfbd07002e90f54f82d6a13e49a878a45fafbf34d5d665","href":"https://static.observableusercontent.com/files/cf62b7ccf340bb6811335cd96a32fb032d4915118d0cb36ce8cc318012b06fe23fb5072da8f46939bbcfbd07002e90f54f82d6a13e49a878a45fafbf34d5d665","name":"fells-full-2023-05-23.osm.geojson","type":"application/geo+json","lastModified":1684783386492.162,"size":10355111},{"id":"5763b4195d8b5a1b3d28c1f8d3834dac723123a8a458984f62efa10ce032eb001eb6e11391d510304949f5658202889c5c029377de7e30546fc92b9d4ef05240","href":"https://static.observableusercontent.com/files/5763b4195d8b5a1b3d28c1f8d3834dac723123a8a458984f62efa10ce032eb001eb6e11391d510304949f5658202889c5c029377de7e30546fc92b9d4ef05240","name":"cache.json","type":"application/json","lastModified":1703958595643.718,"size":1634345}] 2f:{"title":"Middlesex Fells Completionist","cells":[{"id":0,"value":"# Middlesex Fells Completionist","pinned":false,"hidden":false,"mode":"md"},{"id":3195,"value":"htl.html` (optional - required to update the map with your activites)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3173,"value":"> Middlesex Fells State Park is home to \"over 100 miles of mixed-use trails\" but just how much of that have I walked? And how do i track my progress to that goal?","pinned":false,"hidden":false,"mode":"md"},{"id":2594,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2931,"value":"toc({ headers: \"h2,h3,h4,h5,h6\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"callout(\n md`Buttons like this: ${htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2064,"value":"// 2. notebook reads auth on 2nd load, and the user authorizes API queries:","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2079,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"mutable auth = ({\n token: null,\n refresh: null,\n tokenType: null,\n expires: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"/**\n * Get OAuth credentials\n * @return {Promise}\n */\ngetOAuth = () =>\n params.has(\"code\")\n ? fetch(\"https://www.strava.com/oauth/token\", {\n method: \"POST\",\n body: `client_id=${\n params.get(\"STRAVA_CLIENT_ID\") || 33192\n }&client_secret=${\n params.get(\"STRAVA_CLIENT_SECRET\") ||\n \"01b4246c3b54b59ec2d4a2ae6d1bc60db9e9d5e2\"\n }&code=${params.get(\"code\")}&grant_type=authorization_code`,\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n }\n })\n .then((res) => res.json())\n .then((data) => {\n console.log(\"updated token\", data);\n // Store token data\n mutable auth = {\n token: data.access_token,\n refresh: data.refresh_token,\n tokenType: data.token_type,\n expires: data.expires_at\n };\n })\n .catch((err) => {\n console.log(\"something went wrong\", err);\n })\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"enableApiCalls = async () => {\n console.log(\"enableApiCalls\");\n if (!auth.expires || auth.expires - new Date().getTime() < 1) {\n console.log(\"new OAuth\");\n getOAuth();\n return;\n } else {\n console.log(\"from auth cache\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"headers = ({ Authorization: `${auth.tokenType} ${auth.token}` })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"getJson = async (url) => {\n if (auth.token) {\n const res = await fetch(url, { headers });\n const data = await res.json();\n\n mutable cache[url] = data;\n }\n\n if (cache[url]) return cache[url];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"activities = Promise.all([\n getJson(\n `https://www.strava.com/api/v3/athlete/activities?page=1&per_page=200`\n ),\n getJson(\n `https://www.strava.com/api/v3/athlete/activities?page=2&per_page=200`\n ),\n getJson(\n `https://www.strava.com/api/v3/athlete/activities?page=3&per_page=200`\n ),\n getJson(\n `https://www.strava.com/api/v3/athlete/activities?page=4&per_page=200`\n )\n]).then((requestData) => requestData.flat())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"### Ignore unrelated activities","pinned":false,"hidden":false,"mode":"md"},{"id":2232,"value":"callout(\n md`**todo** we're only interested in activities which took place within the OSM map area `,\n \"error\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2247,"value":"Strava doesn't provide a bounding box for each activity, so we'll need to convert the summary map line to geojson first","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"polyline = require('https://unpkg.com/@mapbox/polyline@1.1.1/src/polyline.js').catch(\n e => window.polyline\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"stravaActivitesGeoJSON = ({\n type: \"FeatureCollection\",\n features: activities.reduce(\n (all, { name, id, map: { summary_polyline } }, i) => {\n if (summary_polyline && ![7104861883, 7261558334].includes(id))\n all.push({\n type: \"Feature\",\n id: id.toString(),\n name,\n geometry: polyline.toGeoJSON(summary_polyline)\n });\n return all;\n },\n []\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"### Map activities","pinned":false,"hidden":false,"mode":"md"},{"id":2164,"value":"once we have the activities, we can convert the polylines to geojson with @mapbox/polyline","pinned":false,"hidden":false,"mode":"md"},{"id":2272,"value":"{\n const base = cleanedGraph;\n // stravaActivitesGeoJSON;\n const options = {};\n\n const width = 954;\n const projection = d3.geoIdentity().reflectY(true).fitWidth(width, base);\n const path = d3.geoPath(projection);\n const height = Math.ceil(path.bounds(base)[1][1]);\n\n return htl.html`\n

activities log\n \n

\n\n

combined\n \n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2378,"value":"viewof overlayStroke = Inputs.range([0, 10], {\n label: \"Overlay Stroke\",\n step: 0.5,\n value: 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2372,"value":"viewof highlightOrHide = Inputs.toggle({ label: \"Highlight\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3182,"value":"### Compute Overlap & Progress","pinned":false,"hidden":false,"mode":"md"},{"id":3190,"value":"we'll use the turfjs library to use some geospatial utilities","pinned":false,"hidden":false,"mode":"md"},{"id":3184,"value":"stravaActivitesGeoJSON","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":3153,"value":"first, a cache so that the end user doesn't have to run the notebook steps at all","pinned":false,"hidden":false,"mode":"md"},{"id":2288,"value":"mutable cache = FileAttachment(\"cache.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1906,"value":"Performance enhancements for displaying static maps.","pinned":false,"hidden":false,"mode":"md"},{"id":3155,"value":"// getMap() clones the HTML of a generated map and inserts it where called.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1799,"value":"getMap = (mapFragment) => {\n if (!mapFragment) return;\n const map = mapFragment.cloneNode(true);\n const d = document.createElement(\"div\");\n d.style.display = \"contents\";\n d.appendChild(map);\n\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1801,"value":"rawMapFragment = step1\n ? htl.html.fragment`${(await mapFrom([rawData], { delay: 0 }).next()).value}`\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"trimmedMapFragment = step3a\n ? htl.html.fragment`${\n (await mapFrom([trimmedGraph], { delay: 0 }).next()).value\n }`\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"cleanedMapFragment = htl.html.fragment`${\n (await mapFrom([cleanedGraph], { delay: 0 }).next()).value\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"// mapFrom()\n// generates a map from geojson, or an animation from an (Iterable) series of geojson objects","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"### Developing the \"trimDangles()\" function","pinned":false,"hidden":false,"mode":"md"},{"id":726,"value":"(requires running step1) manually select a subset of geometry ID's from [openstreetmap](https://www.openstreetmap.org/query?lat=42.44827&lon=-71.08772#map=17/42.42847/-71.11409), which includes \"dangling\" access routes:","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"demo1 = ({\n ...rawData,\n features: rawData.features.filter(({ id }) =>\n [\n // upper dangle\n \"way/56344609\",\n // upper loop\n \"way/54247969\",\n \"way/54248133\",\n \"way/54247909\",\n \"way/54247909\",\n \"way/54247893\",\n \"way/54247920\",\n // middle and lower loop\n \"way/54247978\",\n \"way/54247933\",\n \"way/54248174\",\n \"way/54247881\"\n ].some((search) => id === search)\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"applying the \"trimDangles()\" function removes dangling geometry, leaving you just with the core connected shape:","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"{\n replaySuper;\n let trimmer = mapFrom(trimDangles(demo1, 2));\n let count = 0;\n\n let graph, original, single, full;\n\n for await (graph of trimmer) {\n // prettier-ignore\n switch (count) {\n case 0: original = graph; break;\n case 1: single = graph; break;\n default: full = graph; break;\n }\n\n yield html`\n

original ${original}

trimmed once ${single}

trimmed repeatedly (${count} times) ${full}

`;\n count++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"### utilities","pinned":false,"hidden":false,"mode":"md"},{"id":3187,"value":"turf = require(\"@turf/turf@6.5.0/turf.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3125,"value":"// polyfill for the sructuredClone web API\n// https://developer.mozilla.org/en-US/docs/Web/API/structuredClone for Electron Apps (notion.so)\nstructuredClone = window.structuredClone ||\n (await import(\"https://cdn.skypack.dev/@ungap/structured-clone@1.0.1?min\"))\n .default","pinned":true,"hidden":false,"mode":"ojs"},{"id":2600,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1371,"value":"import { toc, notice as callout } from \"@sgregson/components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3166,"value":"Make some UI improvments","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"import { styles, darkMode } from \"@sgregson/styles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"stylesCore = styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":3357,"value":"viewof isDarkMode = Inputs.toggle({ label: \"Dark Mode\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3118,"value":"dark = isDarkMode && darkMode","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}