31:Taac,versionTen = (allData) => { allData.forEach(row => { let stats = calculateIQR(row.values, 'heart_rate(bpm)'); row.min = stats.min; row.max = stats.max; row.firstQuartile = stats.firstQuartile; row.thirdQuartile = stats.thirdQuartile; row.median = stats.median }); console.log(allData); const width = 600, height = 300, margin = ({top: 50, bottom: 50, left: 60, right: 50}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const hrScale = d3.scaleLinear() .domain([80, 220]) .range([height, 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]); const dateScale = d3.scaleBand() .domain(d3.set(allData.map(d => d.key)).values()) .padding(.6) .range([0, width]) const yAxis = g.append("g") .call(d3.axisLeft(hrScale)); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(dateScale)) .selectAll(".tick").remove(); g.append("text") .attr("transform", `translate(0,${height/2}) rotate(-90)`) .attr("dy", -40) .style("text-anchor", "middle") .text("Heart Rate (BPM)"); g.append("text") .attr("transform", `translate(${width/2},${height}) `) .attr("dy", 20) .style("text-anchor", "middle") .text("January 2015 to August 2015"); const minMaxArea = d3.area() .y1(d => hrScale(d.min < 80 ? 80 : d.min)) .y0(d => hrScale(d.max)) .x(d => dateScale(d.key)); const quartileRange = d3.area() .y1(d => hrScale(d.firstQuartile)) .y0(d => hrScale(d.thirdQuartile)) .x(d => dateScale(d.key)); const medianLine = d3.line() .y(d => hrScale(d.median)) .x(d => dateScale(d.key)); const boxWidth = dateScale.bandwidth(); // Min Max g.append("path") .datum(allData.filter(d => d.max > 130).map(d => d)) .attr("d", minMaxArea) .style("fill", heartRed(130)) // IQR g.append("path") .datum(allData.filter(d => d.max > 130).map(d => d)) .attr("d", quartileRange) .style("fill", heartRed(145)) g.append("path") .datum(allData.filter(d => d.max > 130).map(d => d)) .attr("d", medianLine) .style("fill", "none") .style("stroke", heartRed(180)); return svg.node() }32:Teff,versionNine = (allData) => { const width = 600, height = 300, margin = ({top: 50, bottom: 50, left: 60, right: 50}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const hrScale = d3.scaleLinear() .domain([80, 220]) .range([height, 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]); const dateScale = d3.scaleBand() .domain(d3.set(allData.map(d => d.key)).values()) .padding(.6) .range([0, width]) const yAxis = g.append("g") .call(d3.axisLeft(hrScale)); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(dateScale)) .selectAll(".tick").remove(); g.append("text") .attr("transform", `translate(0,${height/2}) rotate(-90)`) .attr("dy", -40) .style("text-anchor", "middle") .text("Heart Rate (BPM)"); g.append("text") .attr("transform", `translate(${width/2},${height}) `) .attr("dy", 20) .style("text-anchor", "middle") .text("January 2015 to August 2015"); const boxWidth = dateScale.bandwidth(); const runningGroups = g.selectAll(".group") .data(allData.filter(d => d3.max(d.values.map(e => +e["heart_rate(bpm)"])) > 130)) .enter().append("g") .attr("class", "group") .attr("transform", d => `translate(${dateScale(d.key)}, 0)`) .each(function(d) { const values = calculateIQR(d.values, 'heart_rate(bpm)'); const thisGroup = d3.select(this); const whiskers = thisGroup.append("line") .attr("x1", boxWidth/2) .attr("x2", boxWidth/2) .attr("y1", hrScale(values.min < 80 ? 80 : values.min)) .attr("y2", hrScale(values.max)) .style("stroke", "#000") .style("stroke-width", .5) thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", hrScale(values.min < 80 ? 80 : values.min)) .attr("y2", hrScale(values.min < 80 ? 80 : values.min)) .style("stroke", "#000") .style("stroke-width", .5) thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", hrScale(values.max)) .attr("y2", hrScale(values.max)) .style("stroke", "#000") .style("stroke-width", .5) const box = thisGroup.append("rect") .attr("y", hrScale(values.thirdQuartile)) .attr("height", hrScale(values.firstQuartile) - hrScale(values.thirdQuartile)) .attr("width", boxWidth) .attr("x", 0) .style("fill", d => { if(values.median > lactateThreshold) { return heartRed(values.median) } else if(values.median > aerobicThreshold) { return heartGreen(values.median) } else { return heartBlue(values.median) } }) .style("stroke-width", .5) .style("stroke", "#000"); thisGroup.append("line") .attr("x1", 0) .attr("x2", boxWidth) .attr("y1", hrScale(values.median)) .attr("y2", hrScale(values.median)) .style("stroke", "#000") }); return svg.node() }33:Taa6,versionEight = (allData) => { const width = 600, height = 300, margin = ({top: 50, bottom: 50, left: 60, right: 30}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const hrScale = d3.scaleLinear() .domain([80, 180]) .range([height, 0]); const dateScale = d3.scaleBand() .domain(d3.set(allData.map(d => d.key)).values()) .padding(.2) .range([0, width]) const yAxis = g.append("g") .call(d3.axisLeft(hrScale)); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(dateScale)); const label = g.append("text") .attr("transform", `translate(0,${height/2}) rotate(-90)`) .attr("dy", -40) .style("text-anchor", "middle") .text("Heart Rate (BPM)"); const boxWidth = dateScale.bandwidth(); const runningGroups = g.selectAll(".group") .data(allData) .enter().append("g") .attr("class", "group") .attr("transform", d => `translate(${dateScale(d.key)}, 0)`) .each(function(d) { const values = calculateIQR(d.values, 'hr'); const thisGroup = d3.select(this); const whiskers = thisGroup.append("line") .attr("x1", boxWidth/2) .attr("x2", boxWidth/2) .attr("y1", hrScale(values.min)) .attr("y2", hrScale(values.max)) .style("stroke", "#000") thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", hrScale(values.min)) .attr("y2", hrScale(values.min)) .style("stroke", "#000") thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", hrScale(values.max)) .attr("y2", hrScale(values.max)) .style("stroke", "#000") const box = thisGroup.append("rect") .attr("y", hrScale(values.thirdQuartile)) .attr("height", hrScale(values.firstQuartile) - hrScale(values.thirdQuartile)) .attr("width", boxWidth) .attr("x", 0) .style("fill", "#fff") .style("stroke", "#000"); thisGroup.append("line") .attr("x1", 0) .attr("x2", boxWidth) .attr("y1", hrScale(values.median)) .attr("y2", hrScale(values.median)) .style("stroke", "#000") }); return svg.node() }34:T823,versionSeven = (data) => { const width = 600, height = 100, margin = ({top: 50, bottom: 50, left: 60, right: 50}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const values = calculateIQR(data, 'hr'); console.log(values) const hrScale = d3.scaleLinear() .domain([80, 180]) .range([0, width]); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(hrScale)); const label = g.append("text") .attr("transform", `translate(${width/2},0)`) .attr("dy", 10) .style("text-anchor", "middle") .text("Heart Rate (BPM)"); const boxHeight = height/4; const boxY = height/2; const whiskers = g.append("line") .attr("y1", boxY + boxHeight/2) .attr("y2", boxY + boxHeight/2) .attr("x1", hrScale(values.min)) .attr("x2", hrScale(values.max)) .style("stroke", "#000") g.append("line") .attr("y1", boxY + boxHeight/2 - 5) .attr("y2", boxY + boxHeight/2 + 5) .attr("x1", hrScale(values.min)) .attr("x2", hrScale(values.min)) .style("stroke", "#000") g.append("line") .attr("y1", boxY + boxHeight/2 - 5) .attr("y2", boxY + boxHeight/2 + 5) .attr("x1", hrScale(values.max)) .attr("x2", hrScale(values.max)) .style("stroke", "#000") const box = g.append("rect") .attr("x", hrScale(values.firstQuartile)) .attr("width", hrScale(values.thirdQuartile) - hrScale(values.firstQuartile)) .attr("height", boxHeight) .attr("y", boxY) .style("fill", "#fff") .style("stroke", "#000"); g.append("line") .attr("y1", boxY) .attr("y2", boxY + boxHeight) .attr("x1", hrScale(values.median)) .attr("x2", hrScale(values.median)) .style("stroke", "#000") return svg.node() }35:Tee6,versionSix = (allData) => { const width = 600; let 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); }); }); // Trying to filter out the funk in the data, like when it says I am running 20mph or Prospect Park is 600ft flatData = flatData.filter(d => d.speed <= 10 && d.ele <= 350) const padding = 10; const columns = Object.keys(allData[0].values[0]).filter(d => d == 'ele' || d == 'hr' || d == 'speed') const size = (width - (columns.length + 1) * padding) / columns.length + padding const x = columns.map(c => { let scale = d3.scaleLinear().rangeRound([padding / 2, size - padding / 2]); if(c == 'hr') { return scale.domain(d3.extent(flatData, d => d[c])) } else if(c == 'ele') { return scale.domain(d3.extent(flatData, d => d[c])) } else if( c == 'speed') { return scale.domain([0, 10]) } }) const y = x.map(x => x.copy().range([size - padding / 2, padding / 2])) const svg = d3.select(DOM.svg(width, width)) .style("padding", "10px") .style("overflow", "visible") .style("max-width", "100%") .style("height", "auto"); const axis = d3.axisBottom() .tickSize(size * columns.length); svg.append("g").selectAll("g").data(x).enter().append("g") .attr("transform", (d, i) => `translate(${(columns.length - i - 1) * size},0)`) .each(function(d) { return d3.select(this).call(axis.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const axisY = d3.axisLeft() .tickSize(-size * columns.length); svg.append("g") .selectAll("g").data(y).enter().append("g") .attr("transform", (d, i) => `translate(0,${i * size})`) .each(function(d) { return d3.select(this).call(axisY.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .enter().append("g") .attr("transform", ([i, j]) => `translate(${(columns.length - i - 1) * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); 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]); cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(flatData) .enter().append("circle") .attr("cx", d => x[i](+d[columns[i]])) .attr("cy", d => y[j](+d[columns[j]])) .attr("r", 1.5) .attr("fill-opacity", 0.5) .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) } }); }); svg.append("g") .style("font", "bold 14px sans-serif") .selectAll("text") .data(columns) .enter().append("text") .attr("transform", (d, i) => `translate(${(columns.length - i - 1) * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(d => d == 'hr' ? 'Heart Rate' : d == 'ele' ? 'Elevation' : 'Speed'); return svg.node(); }36:T1369,versionFive = (allData) => { let 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); }); }); flatData = flatData.filter(d => d.speed <= 10 && d.ele <= 350) const width = 500, height = 500, size = d3.min([width, height]), margin = {top: 20, bottom: 20, left: 20, right: 50} const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "12px sans-serif") .style("padding", "15px") svg.append("text") .style("font", "16px sans-serif") .attr("transform", `translate(${(width + margin.left + margin.right)/2},${height + margin.top + margin.bottom + 10})`) .style("text-anchor", "middle") .text("Speed"); svg.append("text") .style("font", "16px sans-serif") .attr("transform", `translate(${width*1/4},${height / 2}) rotate(-60)`) .style("text-anchor", "middle") .text("Heart Rate"); svg.append("text") .style("font", "16px sans-serif") .attr("transform", `translate(${width*3/4 + margin.left*2},${height / 2}) rotate(60)`) .style("text-anchor", "middle") .text("Elevation"); const hoverText = svg.append("text") .attr("dy", 10) .attr("x", 10) const corners = [[margin.left, height + margin.top], [width + margin.left,height + margin.top], [width/2 + margin.left,margin.left]] // function for determining the positioning const coord = (a, b, c) => { let sum, pos = [0,0]; sum = a + b + c; if(sum !== 0) { a /= sum; b /= sum; c /= sum; pos[0] = corners[0][0] * a + corners[1][0] * b + corners[2][0] * c; pos[1] = corners[0][1] * a + corners[1][1] * b + corners[2][1] * c; } return pos; } corners.forEach((corner, idx) => { let c1 = idx, c2 = idx + 1; if(c2 >= corners.length) { c2 = 0; } svg.append("line") .attr("x1", corners[c1][0]) .attr("y1", corners[c1][1]) .attr("x2", corners[c2][0]) .attr("y2", corners[c2][1]) .style("stroke", "#000") }) const hrScale = d3.scaleLinear() .domain([80, 180]) .range([0, 100]); // I am not sure why this needs to be 100.... const speedScale = d3.scaleLinear() .domain(d3.extent(flatData, d => d.speed)) .range([0, 100]); const eleScale = d3.scaleLinear() .domain(d3.extent(flatData, d => d.ele)) .range([0, 100]); var ticks = [0,20,40,60,80,100], n = ticks.length; ticks.forEach(function(v) { var coord1 = coord(v, 0, 100-v); var coord2 = coord(v, 100-v, 0); var coord3 = coord(0, 100-v, v); var coord4 = coord(100-v, 0, v); if(v !== 0 && v !== 100) { svg.append("line") .attr("x1", coord1[0]) .attr("y1", coord1[1]) .attr("x2", coord2[0]) .attr("y2", coord2[1]) .style("stroke", "lightgray") svg.append("line") .attr("x1", coord2[0]) .attr("y1", coord2[1]) .attr("x2", coord3[0]) .attr("y2", coord3[1]) .style("stroke", "lightgray") svg.append("line") .attr("x1", coord3[0]) .attr("y1", coord3[1]) .attr("x2", coord4[0]) .attr("y2", coord4[1]) .style("stroke", "lightgray") } svg.append("text") .attr("x", coord1[0] - 20) .attr("y", coord1[1] ) .text( function (d) { return hrScale.invert(v); }) svg.append("text") .attr("x", coord2[0] - 6) .attr("y", coord2[1] + 10 ) .text( function (d) { return Math.round(speedScale.invert(100- v)); }) svg.append("text") .attr("x", coord3[0] + 6) .attr("y", coord3[1] ) .text( function (d) { return Math.round(eleScale.invert(v)/10)*10; }) }) 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 circles = svg.selectAll("circle") .data(flatData) .enter().append("circle") .attr("cx", function (d) { return coord(hrScale(+d.hr), speedScale(+d.speed), eleScale(+d.ele))[0]; }) .attr("cy", function (d) { return coord(hrScale(+d.hr), speedScale(+d.speed), eleScale(+d.ele))[1]; }) .attr("r", 1.5) .style("fill-opacity", .25) .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) } }) .on("mouseenter", d => { hoverText.text(`(ft: ${Math.round(d.ele)}, mph: ${Math.round(d.speed)}, bpm: ${Math.round(d.hr)})`) }) return svg.node() }37:Tbe0,versionFour = (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 = 300, height = 400, margin = ({top: 20, bottom: 100, 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([100, 180]); const percentScale = d3.scaleLinear() .range([0, width]) .domain([0, 1]); 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 hrLine = d3.area() .x(d => percentScale(d.percent)) .y1(d => hrScale(d.rolHR)) .y0(d => height / allData.length); 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(${0}, ${runScale(moment(d.key))})`) const hrLines = hrGroups.append("path") .attr("class", "running-path") .attr("d", d => hrLine(d.values)) .style("stroke", "#000") .style("fill-opacity", 1) .style("fill", heartRed(120)); hrGroups.append("text") .attr("transform", `translate(${-margin.left},${hrScale.range()[0]})`) // .style("text-anchor", "end") .text(d => moment(d.key).format("MM/DD/YYYY")); const paceLine = d3.area() .x(d => percentScale(d.percent)) .y1(d => speedScale(d.rolSpeed == undefined ? 0 : d.rolSpeed)) .y0(d => height / allData.length); const paceGroups = pace.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(${0}, ${runScale(moment(d.key))})`) const paceLines = paceGroups.append("path") .attr("class", "running-path") .attr("d", d => paceLine(d.values)) .style("stroke", "#000") .style("fill-opacity", 1) .style("fill", heartGreen(120)); return svg.node() }38:T107c,versionThree = (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 = 300, height = 300, margin = ({top: 50, bottom: 50, left: 60, right: 20}); const svg = d3.select(createSVG(width*2 + margin.left*2 + margin.right*2, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const hr = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const pace = svg.append('g') .attr('transform', `translate(${margin.left + margin.right + margin.left + 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, 0]) .domain([80, 180]); const distanceScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(flatData, d => d.accumulatedDistance)]).nice(); const percentScale = d3.scaleLinear() .range([0, width]) .domain([0, 1]); const elevationScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(flatData, d => d.rolEle)]).nice(); const speedScale = d3.scaleLinear() .range([height, 0]) .domain([0, 10]); svg.append("text") .attr("transform", `translate(${20}, ${height/2 + margin.top}) rotate(-90)`) .style("text-anchor", "middle") .text("heart rate (bpm)"); svg.append("text") .attr("transform", `translate(${margin.left + width/2}, ${height + margin.top + 30})`) .style("text-anchor", "middle") .text("distance (percentage of run)"); svg.append("text") .attr("transform", `translate(${20 + width + margin.left + margin.right + 10 }, ${height/2 + margin.top}) rotate(-90)`) .style("text-anchor", "middle") .text("pace rate (mph)"); svg.append("text") .attr("transform", `translate(${(width + margin.left + margin.right) + (width/2 + margin.left)}, ${height + margin.top + 30})`) .style("text-anchor", "middle") .text("distance (percentage of run)"); const hrXAxis = hr.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(percentScale).tickSize(-height).tickFormat(d3.format(".0%"))); const hrYAxis = hr.append("g") .attr("class", "y axis") .call(d3.axisLeft(hrScale).tickSize(-width)) const paceXAxis = pace.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(percentScale).tickSize(-height).tickFormat(d3.format(".0%"))); const paceYAxis = pace.append("g") .attr("class", "y axis") .call(d3.axisLeft(speedScale).tickSize(-width)) hrXAxis.selectAll("line").style("stroke", "lightgray"); hrYAxis.selectAll("line").style("stroke", (d,i) => { return i == 0 ? "none" : "lightgray" }); paceXAxis.selectAll("line").style("stroke", "lightgray"); paceYAxis.selectAll("line").style("stroke", (d,i) => { return i == 0 ? "none" : "lightgray" }); const hrLine = d3.line() .x(d => percentScale(d.percent)) .y(d => hrScale(d.rolHR)) const hrLines = hr.selectAll(".running-path") .data(allData) .enter().append("path") .attr("class", "running-path") .attr("d", d => hrLine(d.values)) .attr("fill", "none") .style("stroke-width", .5) .style("stroke", heartRed(150)); const paceLine = d3.line() .x(d => percentScale(d.percent)) .y(d => speedScale(d.rolSpeed == undefined ? 0 : d.rolSpeed)) const paceLines = pace.selectAll(".running-path") .data(allData) .enter().append("path") .attr("class", "running-path") .attr("d", d => paceLine(d.values)) .attr("fill", "none") .style("stroke-width", .5) .style("stroke", heartGreen(150)); return svg.node() }39:T1095,versionTwo = (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 = 300, height = 300, margin = ({top: 50, bottom: 50, left: 60, right: 20}); const svg = d3.select(createSVG(width*2 + margin.left*2 + margin.right*2, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const hr = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const pace = svg.append('g') .attr('transform', `translate(${margin.left + margin.right + margin.left + 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, 0]) .domain([80, 180]); const distanceScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(flatData, d => d.accumulatedDistance)]).nice(); const percentScale = d3.scaleLinear() .range([0, width]) .domain([0, 1]); const elevationScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(flatData, d => d.ele)]).nice(); const speedScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(flatData, d => d.speed)]).nice(); svg.append("text") .attr("transform", `translate(${20}, ${height/2 + margin.top}) rotate(-90)`) .style("text-anchor", "middle") .text("heart rate (bpm)"); svg.append("text") .attr("transform", `translate(${margin.left + width/2}, ${height + margin.top + 30})`) .style("text-anchor", "middle") .text("distance (percentage of run)"); svg.append("text") .attr("transform", `translate(${20 + width + margin.left + margin.right + 10 }, ${height/2 + margin.top}) rotate(-90)`) .style("text-anchor", "middle") .text("pace rate (mph)"); svg.append("text") .attr("transform", `translate(${(width + margin.left + margin.right) + (width/2 + margin.left)}, ${height + margin.top + 30})`) .style("text-anchor", "middle") .text("distance (percentage of run)"); const hrXAxis = hr.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(percentScale).tickSize(-height).tickFormat(d3.format(".0%"))); const hrYAxis = hr.append("g") .attr("class", "y axis") .call(d3.axisLeft(hrScale).tickSize(-width)) const paceXAxis = pace.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(percentScale).tickSize(-height).tickFormat(d3.format(".0%"))); const paceYAxis = pace.append("g") .attr("class", "y axis") .call(d3.axisLeft(speedScale).tickSize(-width)) hrXAxis.selectAll("line").style("stroke", "lightgray"); hrYAxis.selectAll("line").style("stroke", (d,i) => { return i == 0 ? "none" : "lightgray" }); paceXAxis.selectAll("line").style("stroke", "lightgray"); paceYAxis.selectAll("line").style("stroke", (d,i) => { return i == 0 ? "none" : "lightgray" }); const hrLine = d3.line() .x(d => percentScale(d.percent)) .y(d => hrScale(d.hr)) const hrLines = hr.selectAll(".running-path") .data(allData) .enter().append("path") .attr("class", "running-path") .attr("d", d => hrLine(d.values)) .attr("fill", "none") .style("stroke-width", .5) .style("stroke", heartRed(150)); const paceLine = d3.line() .x(d => percentScale(d.percent)) .y(d => speedScale(d.speed == undefined ? 0 : d.speed)) const paceLines = pace.selectAll(".running-path") .data(allData) .enter().append("path") .attr("class", "running-path") .attr("d", d => paceLine(d.values)) .attr("fill", "none") .style("stroke-width", .5) .style("stroke", heartGreen(150)); return svg.node() }3a:Te88,versionOne = (runningData) => { const width = 600, height = 250, margin = ({top: 50, bottom: 20, left: 50, right: 20}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("font", "14px sans-serif"); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${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 distanceScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(runningData, d => d.accumulatedDistance)]).nice(); const elevationScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(runningData, d => d.ele)]).nice(); const speedScale = d3.scaleLinear() .range([10, 50]) .domain(d3.extent(runningData, d => d.speed)); svg.append("text") .attr("transform", `translate(${20}, ${height/2 + margin.top}) rotate(-90)`) .style("text-anchor", "middle") .text("elevation (ft)"); svg.append("text") .attr("transform", `translate(${(width + margin.left + margin.right)/2 }, ${height + margin.top + 30})`) .style("text-anchor", "middle") .text("distance (miles)"); const xAxis = g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(distanceScale).tickSize(-height)) const yAxis = g.append("g") .attr("class", "y axis") .call(d3.axisLeft(elevationScale).tickSize(-width)) xAxis.selectAll("line").style("stroke", "lightgray"); yAxis.selectAll("line").style("stroke", (d,i) => { return i == 0 ? "none" : "lightgray" }); const time = g.append("text") .attr("transform",`translate(${width},-5)`) .style("text-anchor", "end") .style("font", "16px sans-serif") .text(`${Math.round(runningData[runningData.length -1].accumulatedTime/1000/60/60*100, 2)/100} hours`); const bars = g.selectAll(".running-bar") .data(runningData) .enter().append("rect") .attr("class", "running-bar") .attr("x", d => distanceScale(d.accumulatedDistance)) .attr("height", d => speedScale(d.speed)) .attr("y", d => elevationScale(d.ele)) .attr("width", d => width/runningData.length*4) // Didn't want to deal with bandwidth .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) } }); const button = g.append("g") .attr("transform",`translate(0,-2)`) .on("click", () => { g.selectAll(".running-bar") .style("opacity", 0) .transition() .delay((d, i) => (i*5) + (d.speed)) .style("opacity", 1) .on("end", (d) => { return time.text(`${Math.round(d.accumulatedTime/1000/60/60*100, 2)/100} hours`) }); }).on("mouseenter", () => { button.select("text").style("fill", "green") }).on("mouseleave", () => { button.select("text").style("fill", "#000") }); button.append("rect") .attr("y", -16) .attr("height", 16) .attr("width", 75) .style("fill","#f1f1f1") button.append("text") .attr("dy", -5) .attr("dx", 3) .text("Animate Run") .style("text-anchor", "start") .style("font", "12px sans-serif"); return svg.node() }3b: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)); }); }); }3c: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(); }3d:[] 2f:{"title":"Visualizing Running - Part IV","cells":[{"id":0,"value":"md`# Visualizing Running - Part IV`","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 IV__. [Part I is here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i), [Part II is here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii), and [Part III is here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"md`## 4th Visualization Proposal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"versionNine(nestedLeadville)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"md`### Boxplots\n\nBox plots are great. Here I am using them to show where my heart rate was for a training run on July 29th, 2018:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"versionSeven(July292018)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"md`Box plots show the Interquartile Range (IQR), which is the median, first quartile and third quartile, as well as the min and max. So for this run, the min value was about 97bpm, max was 160bpm, and the IQR was 133bpm, 140bpm 150bpm for the first quartile, median and third quartile respectively. This, I would say, was a pretty good run.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"md`Now, what about performance over time? If I am doing better in my training, the IQR will be come smaller, and within the desired range.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2012,"value":"versionEight([{key: 'July222018', values: July222018}, \n {key: 'July232018', values: July232018}, \n {key: 'July252018', values: July252018}, \n {key: 'July262018', values: July262018}, \n {key: 'July292018', values: July292018}, \n {key: 'July312018', values: July312018}, \n {key: '08-02-2018', values: August022018}, \n {key: '08-04-2018', values: August042018}])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"md`This would look really great if I had it for more data. Let's try to pull up all the training runs I did for Leadville, which I have stored in this file.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"versionNine(nestedLeadville)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"md`I made the color for the IQR to be the median value, as its hard to see the small line in the middle of the box. I love this dataset, as you can really see the impact of training, where towards the 2nd half of training, I am able to keep my heart rate much more consistent and in the right range.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"md`### Area Chart\n\nDoes a simple area chart work better though? Here I've got in light red the min and max range, in red the IQR range, and in dark red, the median heart rate. I'm not as big of a fan of this one, as I think it implies that the data is continuous along the x-axis, when it's really more categorical.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"versionTen(nestedLeadville)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"md`I do think that this version is easier to read and see the overall trends, though some of the day-by-day results are harder to parse out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`### 1st Visualization Proposal\n\nRead more about it [here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i).`","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":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":1787,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"ProspectPark0722 = versionOne(July222018)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"ProspectPark0802 = versionOne(August042018)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"md`### 2nd Visualization Proposal \n\nRead more about it [here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2006,"value":"versionFour([{key: '07-22-2018', values: rollingAverage(July222018, rollingN)}, \n {key: '07-23-2018', values: rollingAverage(July232018, rollingN)}, \n {key: '07-25-2018', values: rollingAverage(July252018, rollingN)}, \n {key: '07-26-2018', values: rollingAverage(July262018, rollingN)}, \n {key: '07-29-2018', values: rollingAverage(July292018, rollingN)}, \n {key: '07-31-2018', values: rollingAverage(July312018, rollingN)}, \n {key: '08-02-2018', values: rollingAverage(August022018, rollingN)}, \n {key: '08-04-2018', values: rollingAverage(August042018, rollingN)}])","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"viewof rollingN = slider({\n min: 0, \n max: 50, \n step: 1, \n value: 20, \n title: \"Smoothing\", \n description: \"The number of records you want to get the average for.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"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":1886,"value":"md`### 3rd Visualization Proposal\n\nRead more about it [here](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1754,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"versionSix([{key: 'July222018', values: July222018}, \n {key: 'July232018', values: July232018}, \n {key: 'July252018', values: July252018}, \n {key: 'July262018', values: July262018}, \n {key: 'July292018', values: July292018}, \n {key: 'July312018', values: July312018}, \n {key: '08-02-2018', values: August022018}, \n {key: '08-04-2018', values: August042018}])","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`## The Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"md`The Leadville data has been somewhat aggregated so it's not too large.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"nestedLeadville = {\n\n const returnArray = d3.nest()\n .key(d => d.lookup)\n .entries(LeadvilleTraining)\n \n returnArray.forEach(row => {\n const iqr = calculateIQR(row.values, 'heart_rate(bpm)')\n row.min = iqr.min\n row.max = iqr.max\n row.median = iqr.median\n row.firstQuartile = iqr.firstQuartile\n row.thirdQuartile = iqr.thirdQuartile\n })\n \n return returnArray\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"LeadvilleTraining = d3.csv(\"https://gist.githubusercontent.com/pstuffa/7bc57cc0dde8ad77ee90effbb03f2b2a/raw/47904b75833aca0be2e0b931caf1436e4d6ac504/merged.csv\")","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":488,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$3a","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":"$3b","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":7,"value":"import { createSVG, d3, 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":"$3c","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}