D3 Examples - Lakeland 50 Splits

Lakeland 50 Splits

A parallel coordinates plot of the time taken for each of the 723 athletes who ran the Lakeland 50 between the 8 checkpoints.

Click and drag on an checkpoint 'y axis' to filter the results to just include those that reached the checkpoint at that time.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/d3@4.6.0"></script>
  <script src="https://unpkg.com/d3fc@13.0.1"></script>
  <style>
    body {
      font-family: sans-serif;
    }
    g.run path {
      fill: none;
      stroke: black;
      stroke-width: 0.02;
    }
    g.run text {
      text-anchor: end;
      font-size: 10px;
      opacity: 0.00;
    }
    g.run.highlight text {
      opacity: 0.5;
    }
    g.run.highlight path {
      stroke: steelblue;
      stroke-width: 1;
      opacity: 1;
    }
    .x-scale path {
      display: none;
    }
  </style>
  <body>
    <d3fc-group auto-resize>
      <d3fc-svg id='chart' style='width: 85%; height: 400px; display: block; margin: 50px; margin-left: 100px'/>
    </d3fc-group>
    <script src="script.js"></script>
  </body>
</html>
​
    