31:T443,versionTwelve([{key: '07-19-2018', values: rollingAverage(July192018, rollingN)}, {key: '07-22-2018', values: rollingAverage(July222018, rollingN)}, {key: '07-23-2018', values: rollingAverage(July232018, rollingN)}, {key: '07-25-2018', values: rollingAverage(July252018, rollingN)}, {key: '07-26-2018', values: rollingAverage(July262018, rollingN)}, {key: '07-29-2018', values: rollingAverage(July292018, rollingN)}, {key: '07-31-2018', values: rollingAverage(July312018, rollingN)}, {key: '08-02-2018', values: rollingAverage(August022018, rollingN)}, {key: '08-04-2018', values: rollingAverage(August042018, rollingN)}, {key: '08-07-2018', values: rollingAverage(August072018, rollingN)}, {key: '08-08-2018', values: rollingAverage(August082018, rollingN)}, {key: '08-09-2018', values: rollingAverage(August092018, rollingN)}, {key: '08-14-2018', values: rollingAverage(August142018, rollingN)}])32:T12a6,versionEleven = (allData) => { const flatData = []; allData.forEach(d => { let total = d3.max(d.values, d => d.accumulatedDistance); d.values.forEach(e => { e.percent = e.accumulatedDistance / total; flatData.push(e); }); }); const width = 600, height = 400, margin = ({top: 20, bottom: 30, left: 80, right: 50}); const svg = d3.select(createSVG(width*2 + margin.left*2 + margin.right*2, heightOffset + margin.top + margin.bottom)) .style("font", "14px sans-serif") .style("overflow", "visible") const hr = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const pace = svg.append('g') .attr('transform', `translate(${margin.left + margin.right + width}, ${margin.top})`); const heartRed = d3.scaleSequential(d3.interpolateReds) .domain([80, 180]); const heartBlue = d3.scaleSequential(d3.interpolateBlues) .domain([80, 180]); const heartGreen = d3.scaleSequential(d3.interpolateGreens) .domain([80, 180]); const hrScale = d3.scaleLinear() .range([(height / allData.length), 0]) .domain([80, 180]); const distanceScale = d3.scaleLinear() .range([0, width]) .domain([0, 13]); const speedScale = d3.scaleLinear() .range([hrScale.range()[0], 0]) .domain([3, 8]); const runScale = d3.scaleBand() .range([0, heightOffset]) .domain(d3.set(allData, d => moment(d.key)).values()); const gradientsData = []; const hrVals = [80, 100, 125, 135, 145, 150, 155, 160, 165]; let previous = undefined; hrVals.forEach(d => { let color = "#000" if(d > lactateThreshold) { color = heartRed(d); } else if (d > aerobicThreshold) { color = heartGreen(d) } else { color = heartBlue(d) } let offset = Math.round(((d - hrScale.domain()[0]) / (hrScale.domain()[1] - hrScale.domain()[0]))*100) + "%"; if(previous != undefined) { gradientsData.push({color: previous, offset: offset}) } gradientsData.push({color: color, offset: offset}) previous = color }) const hrGradient = DOM.uid("hrGradient"); svg.append("linearGradient") .attr("id", hrGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", hrScale(80)) .attr("x2", 0) .attr("y2", hrScale(180)) .selectAll("stop") .data(gradientsData) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const areaGradient = DOM.uid("areaGradient"); svg.append("linearGradient") .attr("id", areaGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", hrScale(80)) .attr("x2", 0) .attr("y2", hrScale(180)) .selectAll("stop") .data([{color: "#fff", offset: "0%"}, {color: "#fff", offset: "25%"}, {color: "#f4f3f6", offset: "60%"}, {color: "#f4f3f6", offset: "100%"}]) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const area = d3.area() .x(d => distanceScale(d.accumulatedDistance)) .y1(d => hrScale(d.hr)) .y0(d => height / allData.length); const line = d3.line() .x(d => distanceScale(d.accumulatedDistance)) .y(d => hrScale(d.hr)); const hrGroups = hr.selectAll(".running-group") .data(allData.sort((a,b) => moment(a.key) - moment(b.key))) .enter().append("g") .attr("class", "running-group") .attr("transform", (d,i) => `translate(${i*widthOffset}, ${runScale(moment(d.key))})`) const areas = hrGroups.append("path") .attr("class", "running-path") .attr("d", d => area(d.values)) .style("fill-opacity", fillOpacity) .style("fill", "#f4f3f6") .style("fill", areaGradient) const lines = hrGroups.append("path") .attr("class", "running-path") .attr("d", d => line(d.values)) .style("stroke", "#000") .style("fill-opacity", 0) .style("stroke", hrGradient) hrGroups.append("circle") .attr("r", 2) .attr("cy", d => hrScale(d.values[0].hr)) hrGroups.append("circle") .attr("r", 2) .attr("cy", d => hrScale(d.values[d.values.length-1].hr)) .attr("cx", d => distanceScale(d.values[d.values.length-1].accumulatedDistance)) hrGroups.append("text") .text(d => Math.round(d.values[d.values.length-1].accumulatedDistance) + "m") .style("font", "8px sans-serif") .attr("y", d => hrScale(d.values[d.values.length-1].hr)) .attr("x", d => distanceScale(d.values[d.values.length-1].accumulatedDistance)) .attr("dx", 3) return svg.node() }33:T12b4,versionTwelve= (allData) => { const flatData = []; allData.forEach(d => { let total = d3.max(d.values, d => d.accumulatedDistance); d.values.forEach(e => { e.percent = e.accumulatedDistance / total; flatData.push(e); }); }); const width = 600, height = 400, margin = ({top: 20, bottom: 50, left: 80, right: 50}); const svg = d3.select(createSVG(width*2 + margin.left*2 + margin.right*2, heightOffset + margin.top + margin.bottom)) .style("font", "14px sans-serif") .style("overflow", "visible") const hr = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const pace = svg.append('g') .attr('transform', `translate(${margin.left + margin.right + width}, ${margin.top})`); const heartRed = d3.scaleSequential(d3.interpolateReds) .domain([80, 180]); const heartBlue = d3.scaleSequential(d3.interpolateBlues) .domain([80, 180]); const heartGreen = d3.scaleSequential(d3.interpolateGreens) .domain([80, 180]); const hrScale = d3.scaleLinear() .range([(height / allData.length), 0]) .domain([80, 180]); const distanceScale = d3.scaleLinear() .range([0, width]) .domain([0, 13]); const speedScale = d3.scaleLinear() .range([hrScale.range()[0], 0]) .domain([3, 8]); const runScale = d3.scaleBand() .range([0, heightOffset]) .domain(d3.set(allData, d => moment(d.key)).values()); const gradientsData = []; const hrVals = [80, 100, 125, 135, 145, 150, 155, 160, 165]; let previous = undefined; hrVals.forEach(d => { let color = "#000" if(d > lactateThreshold) { color = heartRed(d); } else if (d > aerobicThreshold) { color = heartGreen(d) } else { color = heartBlue(d) } let offset = Math.round(((d - hrScale.domain()[0]) / (hrScale.domain()[1] - hrScale.domain()[0]))*100) + "%"; if(previous != undefined) { gradientsData.push({color: previous, offset: offset}) } gradientsData.push({color: color, offset: offset}) previous = color }) const hrGradient = DOM.uid("hrGradient"); svg.append("linearGradient") .attr("id", hrGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", hrScale(80)) .attr("x2", 0) .attr("y2", hrScale(180)) .selectAll("stop") .data(gradientsData) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const areaGradient = DOM.uid("areaGradient"); svg.append("linearGradient") .attr("id", areaGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", hrScale(80)) .attr("x2", 0) .attr("y2", hrScale(180)) .selectAll("stop") .data([{color: "#fff", offset: "0%"}, {color: "#fff", offset: "25%"}, {color: "#f4f3f6", offset: "60%"}, {color: "#f4f3f6", offset: "100%"}]) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const area = d3.area() .x(d => distanceScale(d.accumulatedDistance)) .y1(d => speedScale(d.rolSpeed)) .y0(d => height / allData.length); const line = d3.line() .x(d => distanceScale(d.accumulatedDistance)) .y(d => speedScale(d.rolSpeed)); const hrGroups = hr.selectAll(".running-group") .data(allData.sort((a,b) => moment(a.key) - moment(b.key))) .enter().append("g") .attr("class", "running-group") .attr("transform", (d,i) => `translate(${i*widthOffset}, ${runScale(moment(d.key))})`) const areas = hrGroups.append("path") .attr("class", "running-path") .attr("d", d => area(d.values)) .style("fill-opacity", fillOpacity) .style("fill", areaGradient) const lines = hrGroups.append("path") .attr("class", "running-path") .attr("d", d => line(d.values)) .style("stroke", "#000") .style("fill-opacity", 0) .style("stroke", hrGradient) hrGroups.append("circle") .attr("r", 2) .attr("cy", d => speedScale(d.values[0].rolSpeed)) hrGroups.append("circle") .attr("r", 2) .attr("cy", d => speedScale(d.values[d.values.length-1].rolSpeed)) .attr("cx", d => distanceScale(d.values[d.values.length-1].accumulatedDistance)) hrGroups.append("text") .text(d => Math.round(d.values[d.values.length-1].accumulatedDistance) + "m") .style("font", "8px sans-serif") .attr("y", d => speedScale(d.values[d.values.length-1].rolSpeed)) .attr("x", d => distanceScale(d.values[d.values.length-1].accumulatedDistance)) .attr("dx", 3) return svg.node() }34:T60d,heartRateScale = () => { const width = 500, height = 20 const svg = d3.select(createSVG(width, height)); const n = [80, 100, 125, 135, 145, 150, 155, 160, 165], boxwidth = (width - 100)/n.length; svg.append("text") .attr("dy", 14) .style("font", "12px sans-serif") .text("Heart Rate Scale:") const boxes = svg.selectAll(".box") .data(n) .enter().append("g") .attr("class","box") .attr("transform", (d,i) => `translate(${boxwidth*i + 100},0)`); const heartRed = d3.scaleSequential(d3.interpolateReds) .domain([80, 180]); const heartBlue = d3.scaleSequential(d3.interpolateBlues) .domain([80, 180]); const heartGreen = d3.scaleSequential(d3.interpolateGreens) .domain([80, 180]); boxes.append("rect") .attr("width", boxwidth) .attr("height", height) .style("stroke", "#000") .style("fill", d => { if(d > lactateThreshold) { return heartRed(d) } else if(d > aerobicThreshold) { return heartGreen(d) } else { return heartBlue(d) } }); boxes.append("text") .attr("dx", 12) .attr("dy", 14) .style("fill", "#000") .style("font", "12px sans-serif") .text(d => d) .style("fill", d => { if(d > lactateThreshold) { return "#fff" } else if(d > aerobicThreshold) { return "#fff" } else { return "#000" } }); return svg.node(); }35:T609,loadChartData = (url) => { return new Promise((resolve, reject) => { d3.xml(url).then(data => { const results = []; data.querySelectorAll('trkpt').forEach(point => { results.push({ lat: point.getAttribute('lat'), lon: point.getAttribute('lon'), ele: +point.querySelector('ele').textContent * 3.28084, hr: +point.querySelector('hr').textContent, cad: +point.querySelector('cad').textContent, time: new Date(point.querySelector('time').textContent) }); }); return results; }).then(results => { const points = results.map((point, idx, results) => { let speed = 0; let distance = 0; if (idx > 0) { const prev = results[idx - 1]; try { distance = turf.distance( turf.point([+prev.lon, +prev.lat]), turf.point([+point.lon, +point.lat]), { units: 'miles' }); const elapsedTime = (point.time - prev.time)/1000/60/60; speed = distance/elapsedTime; point.distance = distance; point.speed = speed; } catch(error) { point.distance = distance; point.speed = speed; console.log(error); } } return {'cad': point.cad, 'distance': point.distance, 'ele': point.ele, 'hr': point.hr, 'lat': point.lat, 'lon': point.lon, 'speed': point.speed, 'time': point.time}; }) resolve(accumulateDistances(points)); }); }); }36:[] 2f:{"title":"Visualizing Running - Part VI","cells":[{"id":0,"value":"md`# Visualizing Running - Part VI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`I love to run. I train for long distance races, and enjoy using data to track my training performance. I use a Garmin Fenix 3 watch with a heart rate monitor strap, so I can download that data and make custom visualizations. I enjoy trying to find new ways of looking at data, so I'm starting a series of running visualization prototypes. This is __Part VI__. Here is [Part I](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i), [Part II](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii), [Part III](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii), [Part IV](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iv), and [Part V](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iv).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"md`## 6th Visualization Proposal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3115,"value":"md`I find looking at averages over time to be relatively uninteresting, and frankly any summary statitics to never tell the fully story. I want to see the trend and the consistency of each run, with as much detail as I can comprehend. One idea is to plot Ridgeplots of the metric in focus. Here, I am using custom gradients on the lines to indicate heart rate at each point in the run, which provides a nice additional visual cue to the data. The length of the line represents the length of the run.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3186,"value":"md`You can adjust the settings here to see how the gradients are changed. I really like this approach to doing extremely customized styling of your lines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof lactateThreshold = slider({\n min: 80, \n max: 180, \n step: 1, \n value: 155, \n title: \"Lactate Threshold\", \n description: \"Minimum heart rate to be to hit your lactate threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof aerobicThreshold = slider({\n min: 80, \n max: 180, \n step: 1, \n value: 140, \n title: \"Aerobic Threshold\", \n description: \"Minimum heart rate to be to hit your aerobic threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3169,"value":"md`## Trends in Heart Rate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3174,"value":"md`This version plots the lines by heart rate. You can see that in longer runs, I generally have a much lower heart rate. Also, it looks like during the two miles or so in the run, my heart rate goes up and down a lot. This is be because that's usually where I do a few set of stairs. (The number of spikes usually equal ths number of stairs I did.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3159,"value":"md`Using Observable is really nice for adjusting things like offsets to the right setting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2999,"value":"viewof widthOffset = slider({\n min: 0, \n max: 500, \n step: 1, \n value: 25, \n title: \"Width Offset\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2963,"value":"viewof heightOffset = slider({\n min: 0, \n max: 500, \n step: 1, \n value: 150, \n title: \"Height Offset\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3377,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2954,"value":"versionEleven([{key: '07-19-2018', values: July192018},\n {key: '07-22-2018', values: July222018}, \n {key: '07-23-2018', values: July232018 }, \n {key: '07-25-2018', values: July252018 }, \n {key: '07-26-2018', values: July262018 }, \n {key: '07-29-2018', values: July292018 }, \n {key: '07-31-2018', values: July312018 }, \n {key: '08-02-2018', values: August022018 }, \n {key: '08-04-2018', values: August042018 }, \n {key: '08-07-2018', values: August072018 }, \n {key: '08-08-2018', values: August082018 },\n {key: '08-09-2018', values: August092018 },\n {key: '08-14-2018', values: August142018 },\n {key: '08-15-2018', values: August152018 },\n {key: '08-16-2018', values: August162018 } ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3379,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3142,"value":"viewof fillOpacity = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"Fill Opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"md`## Trends in Pace`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3179,"value":"md`This version plots the lines by pace instead of heart rate, but still keeps the heart rate color gradients. The way that garmin collects pace, I find that it can hop around a lot. I don't believe I am ever actually running this fast. That's why here I am using some smoothing. You can see that ingnerall, high pace = high heart rate, lower pace = lower heart rate. Makes sense.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2960,"value":"viewof rollingN = slider({\n min: 1, \n max: 50, \n step: 1, \n value: 15, \n title: \"Smoothing\", \n description: \"The number of records you want to get the average for.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3348,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3117,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2788,"value":"md`If you enjoyed this, you should my other posts on runnings visualiations. Here is [Part I](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i), [Part II](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii), [Part III](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii), [Part IV](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iv), and [Part V](https://beta.observablehq.com/@pstuffa/visualizing-running-part-v).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`## The Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3385,"value":"July192018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/ebbc379fe59ea0b9feb47e153115aca4/raw/b732a039b95af3036719c10b64b08b4a80bf9b3e/activity_2864103071.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"July222018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/4ab33e7db97261e72f06bf3e7dfc7aae/raw/099305a61ffc1b19b719bf5a36755f2c001f5f72/activity_2872096370.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"July232018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/93bc9a287bb5a30a54ed5bbd66e48cb9/raw/30ea504fa112379e9cd2bbc166bd77183e212f78/activity_2874405826.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"July252018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/82a93053a89045f6e0b55d49af5f61e2/raw/eeebcd17257cddb1016f1cb7f4fb7dc333d5b91f/activity_2879764928.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"July262018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/8a54c777195bfe94a5c6d489040155d5/raw/a3457eceb245d671dedf5906b26cf3e1868def39/2018-07-26.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"July292018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/b1fb0af89215ec3f1cd03f4704bfb1ae/raw/6e5ec1250f61ae241b5058dc053ed45e85f14362/activity_2891084953.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"July312018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/f54fb8343b0e37a31ce71d7c14f30c45/raw/9c8ab1fa0b91b340dad2666400f447b6a52d6c46/activity_2895135776.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"August022018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/838c7b9b2e932e35f670c97174ff7425/raw/5c6beeccf43e185128f13a006d453ec6f9dcbb56/activity_2901499446.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"August042018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/01cbc99a1545da74ae0201fb65e94a12/raw/baec40c9a611c9d9c6156fc1c512e47e70015a8a/activity_2905566834.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"August072018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/045556db880e53a3dec177f612963a6e/raw/c3dd2e4404afa0ea4a0c8397033e04639340ccc0/activity_2913782710.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2978,"value":"August082018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/ac18efa645b36be2daab1a0f972d1d6d/raw/4480cc23878c2452bc5458b41c269293f1cb5fe6/activity_2916698156.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3381,"value":"August092018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/e1fec94d528d1724e022f28972fff603/raw/9c0b35269deb914a046dfd93d455335be27d6bde/activity_2919135065.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3389,"value":"August142018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/e1013649ead9c8469ad112cf81d103e5/raw/4e1acc1acddb3fad071a0e2c6e768ee8a6dec937/activity_2932511464.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3395,"value":"August152018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/90c5c6e53d832ef550750bef32b78f70/raw/7c612a678d96d0fb12502f949b73b5747046b940/activity_2934937060.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3398,"value":"August162018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/355e549735679bf9958c9ddcdfb066d5/raw/61830015b4791109a303e650ead313d3498cd50c/activity_2939950562.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3401,"value":"August182018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/355e549735679bf9958c9ddcdfb066d5/raw/61830015b4791109a303e650ead313d3498cd50c/activity_2939950562.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2359,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":2958,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3127,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2439,"value":"speedScale = d3.scaleLinear()\n .domain([0, 20])\n .range([1, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2426,"value":"heartRed = d3.scaleSequential(d3.interpolateReds)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2428,"value":"heartBlue = d3.scaleSequential(d3.interpolateBlues)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"heartGreen = d3.scaleSequential(d3.interpolateGreens)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"calculateIQR = (data, field) => {\n \n const min = d3.min(data, d => +d[field]);\n const max = d3.max(data, d => +d[field]);\n const median = d3.median(data, d => +d[field]);\n const firstQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .25);\n const thirdQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .75);\n \n return {min: min, max: max, median: median, firstQuartile: firstQuartile, thirdQuartile: thirdQuartile}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"rollingAverage = (data, nPoints) => {\n \n data.forEach((row,index) => {\n row.rolSpeed = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.speed);\n row.rolCad = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.cad);\n row.rolHR = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.hr);\n row.rolEl = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.ele);\n })\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"accumulateDistances = (points) => {\n points[0].accumulatedDistance = 0;\n points[0].accumulatedTime = 0;\n let idx = 1;\n while (idx < points.length) {\n points[idx].accumulatedDistance = points[idx].distance + points[idx - 1].accumulatedDistance;\n points[idx].accumulatedTime = points[idx - 1].accumulatedTime + Math.abs(points[idx].time.getTime() - points[idx - 1].time.getTime());\n idx += 1;\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@1\", \"d3-time-format@1\", \"d3-axis@1\",\"d3-array@1\", \"d3-format@1\", \"d3-transition@1\", \"d3-ease@1\", \"d3-collection@1\", \"d3-shape@1\", \"d3-scale-chromatic@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { createSVG, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import {slider, radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}