London Marathon Finish Times 2016

The distribution of finish times for 7,190 London Marathon 2016 finishers as obtainer from strava athletes data. This is a relatively straightforward demonstration of a few d3fc components:

The d3.nest component is used to bucket the finish times by the minute.
The d3fc bar series is configured to render this data.
The bar series is rendered, along with the d3fc gridlines within a cartesian chart.

forked from ColinEberhardt's block: London Marathon Finish Times 2016

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
​
<script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js"></script>
​
<style>
.gridline-x {
  display: none;
}
.gridline-y {
  stroke: #d95f02
}
body {
  font-family: sans-serif;
  font-size: 1.2em;
}
.y-axis-label {
  transform: rotate(-90deg) translateY(20px) !important;
}
.bar path {
  fill: #1f78b4;
}
</style>
​
<div id='chart' style='height: 400px;'></div>
<script src="finish-time.js"></script>
​
    

Updated missing url https://unpkg.com/d3/build/d3.min.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js

https://unpkg.com/d3/build/d3.min.js

https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js