2f:T677,md`# Running SF

It’s time for another running map. I moved to San Francisco a while ago, and have been — very slowly — trying to do the same thing that I did in Washington, DC: [running all the streets](https://macwright.org/2016/05/17/a-new-running-map-in-print.html). My last effort looked like this:

That was after I had lived there for a while and had run a large portion of the city. I plan my runs with these maps in mind, trying to cover all the streets in a particular neighborhood in some specific season: it keeps things feeling fresh, and gives me a goal that isn’t just a number. And it’s also a project that has really been neat to return to - I made the first version in [2011](https://macwright.org/2011/07/28/mapping-runs.html), when I had covered relatively few streets and it was a neat chance to test out the early technology I was helping build at [Mapbox](https://mapbox.com/). Then I did an update in [2012](https://macwright.org/2012/08/28/running-maps-redux.html), which focused on charts, and then the print version was in 2016. I still miss that apartment. This time there’ll be yet another twist: it won’t be printed on a printer, but traced on an [AxiDraw](https://www.axidraw.com/). Yep, we’ve got an AxiDraw in Observable headquarters: it's a very good perk. And it’s time to use it. Let’s begin: --- You need an access token to request stuff from the [Strava API](http://developers.strava.com/).`30:T5c3,pMap = (iterable, mapper, opts) => new Promise((resolve, reject) => { opts = Object.assign( { concurrency: Infinity }, opts ); if (typeof mapper !== 'function') { throw new TypeError('Mapper function is required'); } const concurrency = opts.concurrency; if (!(typeof concurrency === 'number' && concurrency >= 1)) { throw new TypeError( `Expected \`concurrency\` to be a number from 1 and up, got \`${concurrency}\` (${typeof concurrency})` ); } const ret = []; const iterator = iterable[Symbol.iterator](); let isRejected = false; let iterableDone = false; let resolvingCount = 0; let currentIdx = 0; const next = () => { if (isRejected) { return; } const nextItem = iterator.next(); const i = currentIdx; currentIdx++; if (nextItem.done) { iterableDone = true; if (resolvingCount === 0) { resolve(ret); } return; } resolvingCount++; Promise.resolve(nextItem.value) .then(el => mapper(el, i)) .then( val => { ret[i] = val; resolvingCount--; next(); }, err => { isRejected = true; reject(err); } ); }; for (let i = 0; i < concurrency; i++) { next(); if (iterableDone) { break; } } })31:T72d,outputAnnotated = { const ratio = 8.5 / 11; const height = w * ratio; const svg = d3.select(DOM.svg(w, height)); svg.style('width', '100%') svg.style('height', `${ratio}%`) svg.style('border', '1px solid #000'); svg.selectAll("path") .data(sfGeoJSONHD.features) .enter() .append("path") .attr("class", "run") .attr('stroke-width', 1) .attr('stroke', '#000') .attr('fill', 'transparent') .attr("d", path); const northArrow = svg.append("g") .attr('transform', `translate(${30}, ${height - 25})`); northArrow.append('path') .attr('fill', 'transparent') .attr('stroke', '#000') .attr('d', 'M0 4 L 3 0 L 6 4') .attr('transform', 'translate(1, -25)'); northArrow.append("text") .attr("text-anchor", "start") .attr('font-family', 'FifteenTwentyRegular') .attr('font-size', 15) .attr("alignment-baseline", "baseline") .text("N"); const legend = svg.append("g") .attr('transform', `translate(${w - 30}, ${height - 65})`); legend.append("text") .attr("text-anchor", "end") .attr('font-family', 'FifteenTwentyRegular') .attr('font-size', 15) .attr("alignment-baseline", "baseline") .text("Tom MacWright 2018"); legend.append("text") .attr('transform', `translate(0, 20)`) .attr("text-anchor", "end") .attr('font-family', 'FifteenTwentyRegular') .attr('font-size', 15) .attr("alignment-baseline", "baseline") .text("San Francisco, CA"); legend.append("text") .attr('transform', `translate(0, 40)`) .attr("text-anchor", "end") .attr('font-family', 'FifteenTwentyRegular') .attr('font-size', 15) .attr("alignment-baseline", "baseline") .text("-122.4, 37.7"); return svg.node(); }32:[{"id":"18d85216f4a5374380b037d750183f97e872182c2294c6c1dfd647c2aaee4660bf3432465ddbb6de4df9baa8564146572b08a8fd88a2e84e87f454fa8fea9cc1","href":"https://static.observableusercontent.com/files/18d85216f4a5374380b037d750183f97e872182c2294c6c1dfd647c2aaee4660bf3432465ddbb6de4df9baa8564146572b08a8fd88a2e84e87f454fa8fea9cc1","name":"image.png","type":"image/png","lastModified":1683480356043.736,"size":4675760},{"id":"89a92795e21089f32f6377023fe2c7577c48f12f5bd3f67170c9673f1642ef070561cfe97d1fd82900caec106b4c12897add51cded7d5d92dca1342bbf753c8b","href":"https://static.observableusercontent.com/files/89a92795e21089f32f6377023fe2c7577c48f12f5bd3f67170c9673f1642ef070561cfe97d1fd82900caec106b4c12897add51cded7d5d92dca1342bbf753c8b","name":"image@1.png","type":"image/png","lastModified":1683480356043.736,"size":849153}] 2d:{"title":"Running SF","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof apiToken = text({placeholder: \"Strava API Token\", description: \"From https://www.strava.com/settings/api\", submit: \"Set\", value: 'tmcw' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`We send that access token with each request as a header — the Authorization header — so I create this object here once to reuse it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"headers = ({ Authorization: `Bearer ${apiToken}` })","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`Okay, so I’m not actually hitting Strava right now: the Strava has a pretty low rate limit of 600 requests per 15 minutes, and this notebook makes about 90 requests to the API each time that it runs - so when it’s at the top of Hacker News, it might break. Which is why I’m abstracting away the \\`fetch\\` method with a version that can pull from a cache that I’ve stashed on GitHub, and can access with RawGit, which is much faster and has much higher limits.\n\nBut that only applies for my access token - if you run in San Francisco and plug in your token, it _will_ load from your account. And, of course, note that the token isn’t stored anywhere, this is all ephemeral.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"getJson = async url => {\n const json = await (await fetch(url, { headers })).json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n if (!apiToken) return 'We’ll need an access token to get started.';\n let user = await getJson('https://www.strava.com/api/v3/athlete');\n return html`

Authenticated as ${user.firstname} ${user.lastname}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`Okay, so we’re authenticated. Now to fetch runs. The first 200 runs should do it: I only moved here last year, and though I did run in San Francisco before that point, I’ll exclude those ancient runs for the sake of efficiency.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"runs = Promise.all([\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=1&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=2&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=3&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=4&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=5&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=6&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=7&per_page=100`),\n getJson(`https://www.strava.com/api/v3/athlete/activities?page=8&per_page=100`)\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`Then I’ll smoosh those into the same array, and filter out the runs that are in other cities, and filter out bike rides.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"sfRuns = [].concat(...runs)\n .filter(run => run.type === \"Ride\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`Next I need to unpack the geometries that are encoded as [encoded polylines](https://developers.google.com/maps/documentation/utilities/polylinealgorithm) in this dataset. So I load the [@mapbox/polyline](https://github.com/mapbox/polyline) module.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"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":316,"value":"md`Use polyline.toGeoJSON to unpack.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"sfGeoJSON = ({\n type: \"FeatureCollection\",\n features: sfRuns.map(({ map: { summary_polyline } }) => polyline.toGeoJSON(summary_polyline))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`Now for the AxiDraw I need SVG output, at least initially. Though I could just splat these into SVG paths with minimal math — and use a equirectangular projection — think d3’s geo tools are the fastest route to victory.\n\nHere comes some stuff that is pretty particular to the map in question, that if you want to adapt this notebook for yourself, you’ll also want to tweak:\n\n- Rotation is the longitude, latitude of the centerpoint, which is then negated so it works with d3-geo’s rotate() method.\n- Scale is essentially the zoom level`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"rotation = [-95.39, 29.76].map(n => -n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"scale = 250000","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"path = d3.geoPath().projection(d3.geoAzimuthalEqualArea()\n .scale(scale)\n .rotate(rotation)\n .precision(0.1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`The drawing context is an 8.5x11” piece of paper, so I’ll use the same ratio for an SVG element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"w = 966","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"output = {\n const ratio = 8.5 / 11;\n const height = w * ratio;\n const svg = d3.select(DOM.svg(w, height));\n svg.style('width', '100%')\n svg.style('height', `${ratio}%`)\n svg.style('border', '1px solid #000');\n \n svg.selectAll(\"path\")\n .data(sfGeoJSON.features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"run\")\n .attr('stroke-width', 1)\n .attr('stroke', '#000')\n .attr('fill', 'transparent')\n .attr(\"d\", path);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"DOM.download(serialize(output), null, \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`That looks pretty good! But not _great_. I want a high-fidelity print, so I want the real polylines, not these summary polylines. So I’ll download the originals and map those instead. This requires a lot more requests than before, so I’ll make sure not to hammer the API.\n\n☕️ This might take a while.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"mapper = async ({ id }) => {\n return getJson(`https://www.strava.com/api/v3/activities/${id}?include_all_efforts=`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"sfRunsHD = pMap(sfRuns, mapper, { concurrency: 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"sfGeoJSONHD = ({\n type: \"FeatureCollection\",\n features: sfRunsHD.map(({ map: { polyline: poly } }) => polyline.toGeoJSON(poly))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"outputHD = {\n const ratio = 8.5 / 11;\n const height = w * ratio;\n const svg = d3.select(DOM.svg(w, height));\n svg.style('width', '100%')\n svg.style('height', `${ratio}%`)\n svg.style('border', '1px solid #000');\n \n svg.selectAll(\"path\")\n .data(sfGeoJSONHD.features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"run\")\n .attr('stroke-width', 1)\n .attr('stroke', '#000')\n .attr('fill', 'transparent')\n .attr(\"d\", path);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"DOM.download(serialize(outputHD), null, \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`Now we’re talking. But I always find that adding a bit of text makes a graphic seem more legit. Thankfully [Stewart Russell ported a font from the Commodore 1520](https://fontlibrary.org/en/font/fifteentwenty) - FifteenTwentyRegular that should work well with plotters. I’m including the web font version on this page so that it displays like it will eventually, through the printer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"webFont = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"DOM.download(serialize(outputAnnotated), null, \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`Okay, now it’s time to print!\n\n\n

AxiDraw drawing my runs from tmcw on Vimeo.

\n\nI’m a first-time plotter user, so the transition to physical paper was a bit rough: basically I\n\n1. Exported this to SVG\n2. Opened it in the Inkscape distribution that Evil Mad Scientist Labs distributes for AxiDraw\n3. Converted the text to paths\n4. Hit play\n5. Messed it up a few times, and hit play several times to keep the thing from drawing on the table, destroying pens, or other mischief`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`So - what does this mean for you? This graph is a little tailored to me - but it shouldn’t be too hard to adapt! If you want to make your own, and you’re already using Strava, you should:\n\n1. Fork this notebook\n2. Get an access token for Strava at https://www.strava.com/settings/api\n3. Plug it into your forked notebook\n4. Tweak the text in outputAnnotated, and the coordinates that spin and zoom the map. You might want to use geojson.io to find that centerpoint.\n5. Tweak other stuff that’s necessary, like how many runs we load or if you want just runs or runs and rides`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}