block by pstuffa 1f2b6eeacd8500c2728a50872ba86b6f

Running IX

Full Screen

Elevation Profile by Distance Ran - Jan 2015 to August 2015

I got all the training run data from my Garmin Fenix 2. Notice some of the funkiness in the elevation profile readings. I added some notes of where I was training.

Part of my deck on ultrarunning. Give it a minute, as there’s about 730,000 rows.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  background-color: #fff;
}

h2 {
  font 18px sans-serif;
  font-color: #bfbfbf;
}
/*
.axis path,
.axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.x.axis path {
  fill:none;
  stroke:#fff;
  shape-rendering: crispEdges;
}

.y.axis line {
  stroke: #fff;
  stroke-width: 2;
}*/

.runs {
  stroke:#000;
  fill: none;
  /*stroke-opacity: .25;*/
  stroke-width: 1;
}

svg {
  border: 1px solid #000;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

const margin = {top: 20, right: 50, bottom: 60, left: 60},
    width = 300 - margin.left - margin.right,
    height = 750 - margin.top - margin.bottom;

const graphScale = d3.scalePoint()
    .range([0, height]);

const elScale = d3.scaleLinear();

const distanceScale = d3.scaleLinear()
    .domain([0.0,100])
    .range([0, width]);

const elAxis = d3.axisLeft(elScale)
    .tickSize(-width);

const colorScale = d3.scaleOrdinal()
    .domain(["new york", "bear mountain", "boulder", "leadville", "pike"])
    .range(["#045a8d", "#000000", "#8c6bb1", "#3690c0", "#000000"])

const distanceAxis = d3.axisBottom(distanceScale);

const area = d3.area()
      
      .x(d => { return distanceScale(d.key) });

const line = d3.line()
      .y(d => { return elScale(d.delta) })
      .x(d => { return distanceScale(d.key) });

const svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

d3.json("processed.json", function(error, data) {

  data = data.filter(d => { return d.key != '2' && d.key != '2015-11-14' })

  // find elevation deltas
  deltas = []
  data.forEach(run => {
    const runExtent = d3.extent(run.values, d => d.value )
    run.values.forEach(step => { step.delta = (step.value - runExtent[0]) })
    deltas.push(run.values[run.values.length-1].value - run.values[0].value)
  })

  // set scales
  graphScale.domain(d3.set(data.map(d => d.key)).values())
  const sectionHeight = graphScale.step()*8

  elScale.range([sectionHeight, 0])
    // .domain([-100, 3000]);
         .domain(d3.extent(deltas));

  area.y0(sectionHeight)
      .y1(d => { return elScale(d.delta) })

  line.y(d => { return elScale(d.delta) })

  const multiple = function(thisLineD) {

    const svg = d3.select(this); 
    console.log(thisLineD.key, elScale.domain())
    svg.append("path")
        .attr("fill", "#fff")
        .attr("d", (d) => { return area(d.values) })
        // .on("mouseenter", d => d3.select(this).style("fill", "red"))
    
    svg.append("path")
        .attr("fill", "none")
        .style("stroke", function(d) { 
          if(d3.max(d.values, e => e.value) > 14000) {
            return colorScale("pike")
          } else if(d3.min(d.values, e => e.value) > 9000) {
            return colorScale("leadville")
          } else if(d3.max(d.values, e => e.value) > 9000) {
            return colorScale("leadville")
          } else if(d3.min(d.values, e => e.value) > 5000) {
            return colorScale("boulder")
          } else if(d3.max(d.values, e => e.value) > 1000) {
            return colorScale("bear")
          } else if(d3.min(d.values, e => e.value) > -1000) {
            return colorScale("new york city")
          } else {
            return "#000"
          }
        })
        .attr("d", (d) => { return line(d.values) })

    // svg.append("text")
    //     .style("text-anchor", "end")
    //     .style("font-size", "6px")
    //     .style("fill", function(d) { 
    //       if(d3.max(d.values, e => e.value) > 14000) {
    //         return colorScale("pike")
    //       } else if(d3.min(d.values, e => e.value) > 9000) {
    //         return colorScale("leadville")
    //       } else if(d3.max(d.values, e => e.value) > 9000) {
    //         return colorScale("leadville")
    //       } else if(d3.min(d.values, e => e.value) > 5000) {
    //         return colorScale("boulder")
    //       } else if(d3.max(d.values, e => e.value) > 1000) {
    //         return colorScale("bear")
    //       } else if(d3.min(d.values, e => e.value) > -1000) {
    //         return colorScale("new york city")
    //       }
    //     })
    //     .attr("y", sectionHeight/2)
    //     .text(thisLineD.key)

  }

 const serie = svg.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", (d, i) => `translate(${0},${graphScale(d.key) })`)
      .each(multiple)


});



</script>