31:T581,md` ## Introduction On 2020-05-16 the sports club KFUM Uppsala Survival held a survivalrun race for members of the club. The 10 km mens' competition class consisted of roughly 10 km running and around 30 obstacles. The winner of that competition class was Rutger Schutten with a total duration of ${raceResultHumanReadable} and no skipped obstacles. He recorded his race with a fitness tracker and uploaded the activity to [Strava](https://www.strava.com/), an internet service for tracking human exercise which incorporates social network features. Although Strava provides pretty good options for exploring the data, there were some questions that I couldn't find the answer for in Strava: 1. **What was the ratio of time spent running to the time spent completing obstacles?** Rutger is a very good survivalrun athlete, and very fast at climbing. I suspect that he spends more time running than climbing. If the ratio is very skewed towards one of the activities, it seems likely that Rutger could best improve his performance by focusing his training efforts to improve in that activity. 2. **How much time did Rutger spend in the different parts of the race?** I examined [the Strava page for the activity](https://www.strava.com/activities/3461582413) in [Chrome dev tools](https://youtu.be/e1gAyQuIFQo), and in the network tab I was able to find and download the following data (click to explore): `32:T500,createMapView({ width: width / 2, postProcessMap: map => { map.addSource('line', { type: "geojson", data: line }); map.addLayer({ id: "line", type: "line", source: "line", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": colors.trace, "line-width": lineWidth } }); map.addSource('splitters.exit', { type: "geojson", data: splitters.exit }); map.addLayer({ id: "splitters.exit", type: "line", source: "splitters.exit", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": colors.splitter, "line-width": lineWidth } }); map.addSource('splitters.courseCenterLine', { type: "geojson", data: splitters.courseCenterLine }); map.addLayer({ id: "splitters.courseCenterLine", type: "line", source: "splitters.courseCenterLine", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": colors.courseCenterLine, "line-width": lineWidth } }); map.fitBounds(turf.bbox(polygons.trainingGrounds)); } })33:T446,halfbakeChart = (width = defaultWidth) => { const height = getHeight(width); const x = createX(width); const y = createY(height); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", width) .style("height", height); svg.x = x; svg.y = y; const filter = svg .append("defs") .append("filter") .attr("id", "brightgray"); filter .append("feColorMatrix") .attr("type", "saturate") .attr("values", 0.1); const feComponentTransfer = filter.append("feComponentTransfer"); ["feFuncR", "feFuncG", "feFuncB"].forEach(prop => { feComponentTransfer .append(prop) .attr("type", "linear") .attr("intercept", 0.5) .attr("slope", 0.75); }); svg .append("image") .attr("href", aerialImageUrl) .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("preserveAspectRatio", "none") // see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio .attr("filter", "url(#brightgray)"); return svg; }34:T46e,polygons = ({ blueLapBbox: { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ [ [17.57941246032715, 59.854396125464], [17.581719160079956, 59.854396125464], [17.581719160079956, 59.85551142540583], [17.57941246032715, 59.85551142540583], [17.57941246032715, 59.854396125464] ] ] } }, trainingGrounds: { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ [ [17.584481835365295, 59.85577273423778], [17.584315538406372, 59.855883183745604], [17.58284568786621, 59.85566228436333], [17.582556009292603, 59.85557877323924], [17.58236825466156, 59.85543599567059], [17.583435773849487, 59.85512080528386], [17.58363425731659, 59.85529860535627], [17.58338749408722, 59.855387505036205], [17.58360207080841, 59.85556530368347], [17.584058046340942, 59.8554279139031], [17.584481835365295, 59.85577273423778] ] ] } } })35:[{"id":"36557a2dff979f9a6c8218d9cf680572686ddc38df29da4c08d73743e34f38f30fbfffa7764aac24535c61a7f4e600971b2907c82c601264b4877560eec94f20","href":"https://static.observableusercontent.com/files/36557a2dff979f9a6c8218d9cf680572686ddc38df29da4c08d73743e34f38f30fbfffa7764aac24535c61a7f4e600971b2907c82c601264b4877560eec94f20","name":"aerial-image.png","type":"image/png","lastModified":1590185918881.185,"size":1756676},{"id":"c465cd591359c8f467d8786b2a4abb72d0654a1354cef1205ee46a496cfe3bbd28c3fff362e14d40ad8ee02ca13ef40cc145c3e06519c28237c3e6bf1815584c","href":"https://static.observableusercontent.com/files/c465cd591359c8f467d8786b2a4abb72d0654a1354cef1205ee46a496cfe3bbd28c3fff362e14d40ad8ee02ca13ef40cc145c3e06519c28237c3e6bf1815584c","name":"stats.json","type":"application/json","lastModified":1590184380432.362,"size":148459},{"id":"82dfa203a7fd6155118a41176b7bd07161209aedf6a70d86bb13b67f016f791c7a3d93a62157ee861a6859380c6a6fd9136a5d4a72aa0b52376d0c5b2dfae0b2","href":"https://static.observableusercontent.com/files/82dfa203a7fd6155118a41176b7bd07161209aedf6a70d86bb13b67f016f791c7a3d93a62157ee861a6859380c6a6fd9136a5d4a72aa0b52376d0c5b2dfae0b2","name":"latlng.json","type":"application/json","lastModified":1590184380394.696,"size":91556}] 2f:{"title":"Survivalrun race data analysis, May 2020, Part 1","cells":[{"id":2255,"value":"md`# Survivalrun race data analysis, May 2020, Part 1\n\n**An analysis of Rutger Schutten's sports activity tracker data from [KFUM Uppsala Survival](http://www.uppsalasurvival.se/)'s club competition on [2020-05-16](https://en.wikipedia.org/wiki/ISO_8601).**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"{\n const climbingTenPercents = Math.round(10 * plateuRatio);\n return html`

Summary

\nAnalysis suggests that Rutger was climbing obstacles for about ${climbingTenPercents}0% of his total time (${createColorLabel(\n colors.climbing\n )} color on the map), meaning that most of the rest of the time, ${10 -\n climbingTenPercents}0%, must have been spent running (${createColorLabel(\n colors.trace\n )} color on the map).

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"{\n const svg = halfbakeChart(width);\n\n const line = d3\n .line()\n .x(([lat, lng], i) => svg.x(lng))\n .y(([lat, lng], i) => svg.y(lat));\n\n const path = svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", colors.trace)\n .attr(\"stroke-width\", lineWidth)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data([rawData.latlng])\n .join(\"path\")\n // .style(\"mix-blend-mode\", \"soft-light\")\n .attr(\"d\", line);\n\n const path2 = svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", colors.climbing)\n .attr(\"stroke-width\", lineWidth)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data(plateauSegments.map(s => s.map(d => d.latlng)))\n .join(\"path\")\n // .style(\"mix-blend-mode\", \"soft-light\")\n .attr(\"d\", line);\n\n plateauSegments;\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2350,"value":"md`Further down, there's also an interactive version of this map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"rawData = ({\n ...await FileAttachment(\"latlng.json\").json(),\n ...await FileAttachment(\"stats.json\").json(),\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"properties = Object.keys(rawData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`## Data analysis\nThe data is a set of arrays of various metrics, such as geographical position, distance and time. All the arrays have the same length, ${\n rawData.time.length\n} elements, and one of them is called _time_. The _time_ array contains only integers, starts at 0 and each value is 1 greater than the previous value (except for the first value, obviously). The maximum time value is ${d3.max(\n rawData.time\n)}. Compare this to Rutger's result, ${raceResultHumanReadable}, which is ${raceResultSeconds} seconds.\n\nI find it highly likely that Rutger started the tracking as he started the race, and then stopped the tracking ${d3.max(\n rawData.time\n) - raceResultSeconds} seconds after finishing.\n\nThe evidence suggests that the data is a time series, so let's reshape it like that, to a single array of multidimensional datapoints:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"data = d3\n .range(rawData.time.length)\n .map(i => Object.fromEntries(properties.map(key => [key, rawData[key][i]])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"md`First, lets look at the data in a classical diagram. Use the dropdowns to select what data to show where. Not all properties are useful to show on the horizontal axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"viewof d1x = select({\n title: \"x\",\n description: \"Horizontal axis.\",\n options: properties,\n value: properties[properties.length - 1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof d1y1 = select({\n title: \"y1\",\n description: \"Left vertical axis.\",\n options: properties,\n value: properties[5]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"viewof d1y2 = select({\n title: \"y2\",\n description: \"Right vertical axis.\",\n options: properties,\n value: properties[3]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"vegaEmbed({\n width: width - 2 * 60,\n height: 500,\n data: {\n values: data\n },\n encoding: {\n x: {\n field: d1x,\n type: \"quantitative\",\n axis: { title: d1x }\n }\n },\n layer: [\n {\n mark: { stroke: \"#75b85b\", type: \"line\", tooltip: { content: \"data\" } },\n encoding: {\n y: {\n field: d1y1,\n type: \"quantitative\",\n axis: { title: d1y1, titleColor: \"#75b85b\" }\n }\n }\n },\n {\n mark: { stroke: \"#85A9C5\", type: \"line\", tooltip: { content: \"data\" } },\n encoding: {\n y: {\n field: d1y2,\n type: \"quantitative\",\n axis: { title: d1y2, titleColor: \"#85A9C5\" }\n }\n }\n }\n ],\n resolve: { scale: { y: \"independent\" } }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"md`I suspect that the dips in cadence indicate obstacles.\n\nLet's look at the distance as a function of time, i.e. time on the horizontal axis and distance on the vertical axis. Plateaus are clearly visible, where the distance is nearly constant for a while. [An algorithm](https://observablehq.com/@fil/plateau-detection) is used to calculate where the plateaus are (for some parametric definition of a plateau, see appendix section (which I couldn't find out how to link to)), and they are indicated by the lightblue vertical bands.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"plateauChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"md`Here are the plateaus in data form, as pairs of start time and end time in seconds:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"plateaus = d3\n .pairs(rawPlateaus)\n .filter(([a, b]) => a[1] === 1 && b[1] === -1) // get only the plateaus\n .map(([[t1], [t2]]) => [t1, t2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2088,"value":"md`The data points, split into segments according to the plateaus:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2034,"value":"plateauSegments = plateaus.map(([t1, t2]) => {\n const bisectTime = d3.bisector(d => d.time);\n const i1 = bisectTime.left(data, t1);\n const i2 = bisectTime.left(data, t2);\n return data.slice(i1, i2);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"md`As a [GeoJSON](https://geojson.org/) feature:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"plateauSegmentLines = turf.multiLineString(\n plateauSegments.map(s => s.map(d => flip(d.latlng)))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"md`Let's compute the sum of the durations of the plateus, and compute the ratio to the total duration:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"plateausTotalDuration = d3.sum(\n plateaus.map(([startTime, endTime]) => endTime - startTime)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1685,"value":"plateuRatio = plateausTotalDuration / raceResultSeconds","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"{\n const nonPlateuDuration = raceResultSeconds - plateausTotalDuration;\n const formatPercent = v => `${(v * 100).toFixed(0)}%`;\n return md`The plateus sum to ${plateausTotalDuration} s. That's ${formatPercent(\n plateuRatio\n )} of the total ${raceResultSeconds} s. **If we assume that the plateaus correspond to climbing obstacles, then most of the remaining ${nonPlateuDuration} s, or ${formatPercent(\n 1 - plateuRatio\n )} of the total duration, must have been spent running.**\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1663,"value":"md`---\n## Geospatial Data Analysis\n\nThe data contains geographical coordinates, pairs of longitude and latitude, which seem to be expressed in the standard [WGS 84 reference system](https://en.wikipedia.org/wiki/World_Geodetic_System). Let's see what we can learn by looking at the data on a map! (maps created with [Mapbox](https://www.mapbox.com/) and [D3.js](https://d3js.org/))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2366,"value":"md`A screenshot from [Eniro.se](https://kartor.eniro.se/?c=59.855511,17.583425&z=17&l=aerial) is used as the base of the map, and a drone photography (from the autumn 2019 club championships) is overlaid over the training grounds to provide more detail there as you zoom in.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"html`

Rutger's position through the race is traced by the ${createColorLabel(\n colors.trace\n)} colored line. The ${createColorLabel(\n colors.climbing\n)} colored lines show the plateaus.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"plateausMapView = createMapView({\n width: width,\n postProcessMap: map => {\n map.addSource('line', {\n type: \"geojson\",\n data: line\n });\n map.addLayer({\n id: \"line\",\n type: \"line\",\n source: \"line\",\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": colors.trace,\n \"line-width\": lineWidth\n }\n });\n map.addSource('plateauSegmentLines', {\n type: \"geojson\",\n data: plateauSegmentLines\n });\n map.addLayer({\n id: \"plateauSegmentLines\",\n type: \"line\",\n source: \"plateauSegmentLines\",\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": colors.climbing,\n \"line-width\": lineWidth\n }\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"md`The plateau analysis seems to have worked pretty well to segment the data into climbing and non-climbing periods. But the result isn't perfect. The mistakes are few, but there are some [false negatives](https://en.wikipedia.org/wiki/False_positives_and_false_negatives#False_negative_error) and some [false positives](https://en.wikipedia.org/wiki/False_positives_and_false_negatives#False_positive_error). (Click the buttons to zoom in around places of interest)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2155,"value":"html`

\n${createBoundsZoomButton(\n plateausMapView,\n poiBounds.entrance,\n \"Around the container\"\n)} there is a lot of ${createColorLabel(\n colors.climbing\n)} color in places where there are no obstacles. This probably corresponds to periods when Rutger was resting, having a water break, checking the schedule and so on.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"html`\n

\n${createBoundsZoomButton(\n plateausMapView,\n poiBounds.spuriousPlateauSegment,\n \"Between the two climbing rigs\"\n)} there's a segment that clearly doesn't correspond to an obstacle, but is still marked as a plateau.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2164,"value":"{\n const countPlateplateauSegmentLines = plateauSegmentLines.geometry.coordinates.filter(\n line => turf.booleanContains(polygons.blueLapBbox, turf.lineString(line))\n ).length;\n const countBlueLapSegments = segments.features.filter(segment =>\n booleanCrosses(splitters.blueLap, segment)\n ).length;\n return html`\n

\n${createBoundsZoomButton(\n plateausMapView,\n poiBounds.blueSwingOver,\n \"Around the swing over obstacle in the woods\"\n)} the plateau analysis has detected ${countPlateplateauSegmentLines} of ${countBlueLapSegments} swing overs.\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2370,"value":"html`

Geographical segmentation

\nLet's explore another approach: splitting the race into segments solely by the coordinate data.\n

\nIn the following map the trace is shown in ${createColorLabel(\n colors.trace\n)}. The ${createColorLabel(\n colors.splitter\n)} colored line can be used to split the data into segments by whether they ocurred inside or outside the training grounds. The segments that occur inside the trainig grounds are those that cross the ${createColorLabel(\n colors.courseCenterLine\n)} colored line.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1811,"value":"md`Notice how the coordinates don't have perfect [precision and/or accuracy](https://en.wikipedia.org/wiki/Accuracy_and_precision#ISO_definition_(ISO_5725). For example, the trace crosses over the fence around the training grounds at some points.\n\nHad the quality of the coordinates been better, we could have easily found all datapoints corresponding to climbing simply by taking those points whose coordinates are inside the climbing rigs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"md`Anyway, let's use the ${createColorLabel(\n colors.splitter\n)} colored line to split the trace into segments. The segments that cross the ${createColorLabel(\n colors.courseCenterLine\n)} colored line occur inside the training grounds, and can be assumed to mostly (in terms of duration) consist of climbing. Here's the result:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"createMapView({\n postProcessMap: map => {\n const n = segments.features.length;\n const nColors = 10;\n const distinctColor = d3\n .scaleOrdinal()\n .domain(d3.range(n))\n .range(d3.schemeTableau10)\n .unknown(\"#bbb\");\n\n // const sequentialColor = (i) => d3.interpolateRainbow(i / (n - 1));\n\n const lineWidth = 2;\n\n segments.features.forEach((segment, i) => {\n const sourceId = `segment-${i}-source`;\n map.addSource(sourceId, {\n type: \"geojson\",\n data: segment\n });\n map.addLayer({\n id: `segment-${i}-layer`,\n type: \"line\",\n source: sourceId,\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": distinctColor(i),\n \"line-width\": lineWidth\n }\n });\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2614,"value":"{\n const countPoints = features =>\n d3.sum(features, feature => feature.geometry.coordinates.length);\n const totalPointCount = countPoints(segments.features);\n const outsidePointCount = countPoints(outsideSegments);\n return md`A quick and dirty analysis of this data (see code) shows that the segments outside the track constitute about **${Math.round(\n (100 * outsidePointCount) / totalPointCount\n )}%** of the total.\n \n In the next part of this notebook series, we'll explore this segmentation further.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"md`\n---\n## Appendix: Helper functions, settings, etc`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"poiBounds = ({\n surroundings: [\n [17.5764426321, 59.8538294394],\n [17.5872125208, 59.8581348075]\n ],\n entrance: [\n [17.583594024181366, 59.85531342198608],\n [17.58345454931259, 59.85515178566785]\n ],\n spuriousPlateauSegment: [\n [17.583274841308594, 59.85533766736609],\n [17.58327752351761, 59.85549795582281]\n ],\n blueSwingOver: [\n [17.580541670322418, 59.85482581670429],\n [17.580512166023254, 59.85516390841896]\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"createBoundsZoomButton = (mapView, bounds, label) =>\n html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"defaultWidth = 0.5 * width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"createChart = (width = defaultWidth) => halfbakeChart(width).node();","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"line = turf.lineString(rawData.latlng.map(flip))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2169,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"splitters = ({\n exit: {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"LineString\",\n coordinates: [\n [17.583473324775696, 59.85577542813259],\n [17.58249431848526, 59.85560571233442],\n [17.582193911075592, 59.855390198962176],\n [17.58353501558304, 59.85502921093635],\n [17.583813965320587, 59.85532015681566]\n ]\n }\n },\n courseCenterLine: {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"LineString\",\n coordinates: [\n [17.58413314819336, 59.855747142226335],\n [17.582698166370392, 59.85522317513855]\n ]\n }\n },\n blueLap: {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"LineString\",\n coordinates: [\n [17.582314610481262, 59.854587399365954],\n [17.5816011428833, 59.85399741013359]\n ]\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"segments = turf.lineSplit(line, splitters.exit);","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"coordinateData = segments.features.map(f => f.geometry.coordinates);","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"outsideSegments = segments.features.filter(\n f => !booleanCrosses(f, splitters.courseCenterLine)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`\\`turf.booleanCrosses\\` [doesn't work!](https://github.com/Turfjs/turf/issues/1901), so we use a wrapper around \\`turf.lineSplit\\` (which _does_ work) as a substitute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"booleanCrosses = (line1, line2) => {\n const split = turf.lineSplit(line1, line2);\n return split.features.length > 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1965,"value":"flip = array => array.slice().reverse();","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"getHeight = width => 793 / 1000 * width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"createX = width =>\n d3\n .scaleLinear()\n .domain(poiBounds.surroundings.map(([lng]) => lng))\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"createY = height =>\n d3\n .scaleLinear()\n .domain(poiBounds.surroundings.map(([lng, lat]) => lat))\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"aerialImageUrl = await FileAttachment(\"aerial-image.png\").url();","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"raceResult = ({\n hours: 1,\n minutes: 10,\n seconds: 25\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"raceResultHumanReadable = `${raceResult.hours} hour${\n raceResult.hours > 1 ? \"s\" : \"\"\n} 10 minute${raceResult.minutes > 1 ? \"s\" : \"\"} ${raceResult.seconds} second${\n raceResult.seconds > 1 ? \"s\" : \"\"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"raceResultSeconds = 3600 * raceResult.hours +\n 60 * raceResult.minutes +\n raceResult.seconds","pinned":false,"hidden":false,"mode":"ojs"},{"id":1934,"value":"/**csv = {\n const csv =\n \"lat,lng,\" +\n properties.slice(1).join(\",\") +\n \"\\n\" +\n data.map(d => Object.values(d).join(\",\")).join(\"\\n\");\n console.log(csv);\n return csv;\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1833,"value":"md`## Appendix: General settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"colors = ({\n trace: \"steelblue\",\n climbing: \"tomato\",\n splitter: \"lime\",\n courseCenterLine: \"coral\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2380,"value":"createColorLabel = color =>\n html`${color}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"lineWidth = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"md`## Appendix: Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { slider, select, checkbox, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"import {\n createMapView,\n rasterSaturation,\n rasterBrightnessMin,\n rasterBrightnessMax\n} from \"@mast4461/mapbox-gl-static-image-layer-only\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"vegaEmbed = await require(\"vega-embed@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"turf = require(\"@turf/turf@5\"); // the fix for booleanCrosses might come in turf 7...","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"import {\n chart as plateauChart,\n style as plateauStyle,\n plateaus as rawPlateaus\n} with {\n plateauAnalysisInputData as data,\n plateau_tolerance,\n plateuBandwidth as bandwidth,\n plateauBase as base,\n plateuChartInnerHeight as innerHeight,\n plateauCompareTo as compare_to\n} from \"3dd8174057a65272\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`## Appendix: Plateau analysis settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"plateauAnalysisInputData = data.map(d => ({\n state_name: \"\",\n year: d.time,\n value: d.distance\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"viewof plateuBandwidth = slider({\n title: \"LOESS Bandwidth\",\n min: 0,\n max: 0.1,\n value: 0.0075,\n precision: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"viewof plateau_tolerance = slider({\n title: \"Plateau tolerance\",\n min: 0,\n max: 1.5,\n step: 0.01,\n value: 1,\n format: \".0%\",\n description: \"% of the standard deviation of the differences\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"viewof plateauCompareTo = radio({\n options: [\n { label: \"the median of the differences\", value: \"median\" },\n \"zero\"\n ],\n value: \"zero\",\n title: \"Compare the regime to:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"plateuChartInnerHeight = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"plateauBase = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"md`## Appendix: Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"plateauStyle","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"html`