31:T1ae1,August16th = { const div = html`

`; const left = d3.select(div).append("div") .style("width", `${width} px`) .style("display", "inline-block") const right = d3.select(div).append("div") .style("width", `${width} px`) .style("display", "inline-block") const svg = left.append("svg") .attr("width", width) .attr("height", height) .style("display", "inline-block") .style("background-color","#fff") .style("border", "1px solid #000") .style("font", "10px sans-serif"); const roads = svg.selectAll(".roads") .data(tiles) .enter().append("g") .attr('class', 'road') .style("stroke", "#000") .style("stroke-width", .25) .selectAll('.road') .data(d => d.data.roads.features) .enter().append("path") .style("fill", "none") .attr("d", path) const lands = svg.selectAll(".tile") .data(tiles) .enter().append("g") .selectAll(".building") .data(d => d.data.landuse.features) .enter().append("path") .attr("class", "building") .attr("d", (d) => { return path(d) }) .style("fill", "green") .style("stroke", "darkgreen") .style("fill-opacity", .05); const bubbles = svg.selectAll(".bubble") .data(July222018.filter(d => d.speed < 20)) .enter().append("circle") .attr("class", "bubble") .attr("transform", (d) => { let proj = projection([d.lon, d.lat]); return `translate(${proj[0]},${proj[1]})` }) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("stroke", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("fill-opacity", .15) .attr("r", d => speedScale(d.speed)) const rightSide = right.append("svg") .attr("width", width) .attr("height", height) .style("background-color","#fff") .style("border", "1px solid #000") .style("font", "10px sans-serif"); const svgMargin = {top: 20, bottom: 20, left: 40, right: 40}; const svgHeight = height/3 - (svgMargin.top*2); const svgWidth = width - svgMargin.left - svgMargin.right; const distanceScale = d3.scaleLinear() .domain([0, d3.max(July222018, d => d.accumulatedDistance)]) .range([0, svgWidth]) const elevation = rightSide.append("g") .attr("transform",`translate(${svgMargin.left},${svgMargin.top})`) elevation.append("text") .attr("dx", 5) .text("Elevation") const innerElScale = d3.scaleLinear() .domain(d3.extent(July222018, d => d.ele)) .range([svgHeight, 0]) elevation.append("g") .attr("transform", `translate(0, ${svgHeight})`) .call(d3.axisBottom(distanceScale)) elevation.append("g") .call(d3.axisLeft(innerElScale)) const elevationLine = d3.line() .x(d => distanceScale(d.accumulatedDistance)) .y(d => innerElScale(d.ele)) elevation.append("path") .datum(July222018) .style("fill","none") .style("stroke", "#000") .attr("d", elevationLine) elevation.selectAll("circle") .data(July222018) .enter().append("circle") .attr("class", "elevationCircles") .style("opacity", (d,i) => (i == 0 ? 1 : 0)) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .attr("cx", d => distanceScale(d.accumulatedDistance)) .attr("cy", d => innerElScale(d.ele)) .attr("r", d => 3) .style('stroke', '#000') .style("stroke-width", .25) const innerHRScale = d3.scaleLinear() .domain([80, 180]) .range([svgHeight, 0]) const heartrate = rightSide.append("g") .attr("transform",`translate(${svgMargin.left},${(svgMargin.top*2) + svgMargin.bottom + svgHeight})`) heartrate.append("text") .attr("dx", 5) .text("Heart Rate (bpm)") heartrate.append("g") .attr("transform", `translate(0, ${svgHeight})`) .call(d3.axisBottom(distanceScale)) heartrate.append("g") .call(d3.axisLeft(innerHRScale)) const hrLine = d3.line() .x(d => distanceScale(d.accumulatedDistance)) .y(d => innerHRScale(d.hr)) heartrate.append("path") .datum(July222018) .style("fill","none") .style("stroke", "#000") .attr("d", hrLine) heartrate.selectAll("circle") .data(July222018) .enter().append("circle") .attr("class", "hrCircles") .style("opacity", (d,i) => (i == 0 ? 1 : 0)) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .attr("cx", d => distanceScale(d.accumulatedDistance)) .attr("cy", d => innerHRScale(d.hr)) .attr("r", d => 3) .style('stroke', '#000') .style("stroke-width", .25) const innerSpeedScale = d3.scaleLinear() .domain([0, 20]) .range([svgHeight, 0]) const speed = rightSide.append("g") .attr("transform",`translate(${svgMargin.left},${(svgMargin.top*3) + (svgMargin.bottom*2) + (svgHeight*2)})`) speed.append("text") .attr("dx", 5) .text("Pace (mph)") speed.append("g") .attr("transform", `translate(0, ${svgHeight})`) .call(d3.axisBottom(distanceScale)) speed.append("g") .call(d3.axisLeft(innerSpeedScale)) const speedLine = d3.line() .x(d => distanceScale(d.accumulatedDistance)) .y(d => innerSpeedScale(d.speed == undefined ? 0 : d.speed)) speed.append("path") .datum(July222018.filter(d => d.speed < 20)) .style("fill","none") .style("stroke", "#000") .style("stroke-width", .5) .attr("d", speedLine) speed.selectAll("circle") .data(July222018) .enter().append("circle") .attr("class", "speedCircles") .style("opacity", (d,i) => (i == 0 ? 1 : 0)) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .attr("cx", d => distanceScale(d.accumulatedDistance)) .attr("cy", d => innerSpeedScale(d.speed)) .attr("r", d => 3) .style('stroke', '#000') .style("stroke-width", .25) return div }32:T521,restart = () => { const svg = d3.select(August16th) svg.selectAll(".bubble") .style("fill-opacity", 0) .style("stroke-opacity", 0) .transition() .duration(500) .delay((d,i) => (i * 30) - d.speed) .style("stroke-opacity", 1) .style("fill-opacity", .25) .transition() .delay((d,i) => i * 5) .duration(1000) .style("fill-opacity", 0) .style("stroke-opacity", 0) .filter((d,i) => i == (July222018.length - 1)) svg.selectAll(".elevationCircles") .style("opacity", 0) .transition() .duration(500) .delay((d,i) => (i * 30) - d.speed) .style("opacity", 1) .transition() .delay((d,i) => i * 5) .duration(1000) .style("opacity", 0) svg.selectAll(".hrCircles") .style("opacity", 0) .transition() .duration(500) .delay((d,i) => (i * 30) - d.speed) .style("opacity", 1) .transition() .delay((d,i) => i * 5) .duration(1000) .style("opacity", 0) svg.selectAll(".speedCircles") .style("opacity", 0) .transition() .duration(500) .delay((d,i) => (i * 30) - d.speed) .style("opacity", 1) .transition() .delay((d,i) => i * 5) .duration(1000) .style("opacity", 0) }33: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)); }); }); }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:[] 2f:{"title":"Visualizing Running - Part VIII","cells":[{"id":0,"value":"md`# Visualizing Running - Part VIII`","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 VIII__. 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), [Part V](https://beta.observablehq.com/@pstuffa/visualizing-running-part-v), [Part VI](https://beta.observablehq.com/@pstuffa/visualizing-running-part-vi), and [Part VII](https://beta.observablehq.com/@pstuffa/visualizing-running-part-vii).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"md`## 8th Visualization Proposal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2457,"value":"md`This is one I really wanted to do after my [Part V](https://beta.observablehq.com/@pstuffa/visualizing-running-part-v) visualization. Maps can he interesting, especially when you overlay additional metrics like pace and heart rate. In this version, I juxtapose those metrics as line graphs, so it's very clear how things line up. Hit the play button to see the visualization animate on both sides of the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"md`### July 22nd, 2018 - 8 Miles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2745,"value":"md`A recent training run in Prospect Park from my apartment. Starts off slow, then picks up when I get to the park. It was a very hot day, so hart to keep my heart rate low. I did a lot of sets of stairs, which you can see in multiple ways. Pace is very noisy - I think there is some smoothing needed there. This is a result from how granular the data is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2443,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n button.addEventListener('click', restart)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`## The Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3077,"value":"July222018","pinned":true,"hidden":false,"mode":"ojs"},{"id":2865,"value":"import {July222018} from '@pstuffa/visualizing-running-part-vi'","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`## Helpers`","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":2445,"value":"$32","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":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":2935,"value":"maxWidth = window.innerWidth*.85","pinned":false,"hidden":false,"mode":"ojs"},{"id":2931,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":2933,"value":"width = maxWidth/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2374,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2357,"value":"projection = d3.geoMercator()\n .center([-73.9713691, 40.6676646])\n .scale((1 << 22) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n // .rotate([106, 39])\n .precision(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2346,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=qrH6iBWjQRyZAVKyDXpR7Q`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","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":"$33","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-array@1\", \"d3-format@1\", \"d3-transition@1\", \"d3-ease@1\", \"d3-collection@1\", \"d3-shape@1\", \"d3-axis@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"},{"id":1356,"value":"sine = (radians) => { return Math.sin(radians) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"cosine = (radians) => { return Math.cos(radians) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3083,"value":"d3.range(20, 60, 5)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}