D3 Examples - London Marathon 2016 Pacing vs. Finish Time

London Marathon 2016 Pacing vs. Finish Time

This charts shows the splits pace (in mph) for 7,190 London Marathon 2016 finishers as obtained from strava athletes data. The data is rendered using a combination of d3 and d3fc components.

The code performs quite a bit of data manipulation, primarily via d3.nest and d3.pairs in order to shape the data. Interestingly, the labels on the right-side of the chart are rendered as d3fc line annotations where the line is hidden, just leaving the label.

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.41"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
​
<style>
.annotation-line line {
  display: none;
}
.right-handle text {
  fill: black;
  font-size: 0.8em;
}
.gridline-y {
  display: none;
}
body {
  font-family: sans-serif;
  font-size: 1.2em;
}
.plot-area {
  margin-right: 6em;
  overflow: visible !important;
}
.tick {
  font-size: 1.2em;
}
.y-axis-label {
  white-space: nowrap;
  transform: rotate(-90deg) translateY(20px) !important;
  font-size: 0.8em;
}
path.area {
  fill: inherit;
  stroke: #333;
  fill-opacity: 0.7;
}
</style>
​
<div id='chart' style='height: 400px'></div>
<script src="stream-band.js" type='text/babel'></script>
​
    