Skip to content

Instantly share code, notes, and snippets.

@ColinEberhardt
Last active February 3, 2023 22:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ColinEberhardt/66ae2df764efe8448b9b12c0c699f5b5 to your computer and use it in GitHub Desktop.
Save ColinEberhardt/66ae2df764efe8448b9b12c0c699f5b5 to your computer and use it in GitHub Desktop.
Weekly training days
license: mit

This charts shows the average number of training days for around 1,000 London Marathon 2016 finishers as obtained from strava athletes data. The data is rendered using a combination of d3 and d3fc components.

<!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://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.js"></script>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
.tick {
font-size: 1.2em;
}
.gridline-y {
display: none;
}
.gridline-x {
opacity: 0.5;
}
#legend {
position: absolute;
top: auto;
bottom: 1em;
left: 6em;
width: 150px;
height: 120px;
font-size: 0.8em;
}
.y-axis-label {
transform: rotate(-90deg) translateY(20px) !important;
white-space: nowrap;
}
.point {
fill: inherit;
stroke: inherit;
}
.line {
stroke: inherit;
}
#container {
position: relative;
}
#chart {
height: 400px;
}
</style>
<div id='container'>
<div id='chart' ></div>
<svg id='legend'></svg>
</div>
<script src="training-days.js" type='text/babel'></script>
week 2 - 3 hours 3 - 4 hours 4 - 5 hours 5 - 6 hours
1 4.542857143 3.31147541 2.836676218 2.673076923
2 4.671328671 3.281496063 2.864864865 2.707964602
3 4.503448276 3.275390625 2.757746479 2.719298246
4 4.506849315 3.245714286 2.730245232 2.595041322
5 4.472527473 3.251712329 2.645945946 2.616
6 4.824858757 3.345486111 2.693333333 2.479674797
7 4.719101124 3.352136752 2.734177215 2.491935484
8 4.95 3.454237288 2.821782178 2.428571429
9 4.363636364 3.231281198 2.687192118 2.488
10 4.773809524 3.227739726 2.4975 2.114503817
11 4.676300578 3.247058824 2.544578313 2.227272727
12 4.888235294 3.238333333 2.631578947 2.288888889
13 4.292307692 3.042003231 2.514851485 2.142857143
14 4.715053763 3.243822076 2.520581114 2.062992126
15 4.666666667 3.091056911 2.507425743 2.295454545
17 3.961111111 2.651085142 2.085271318 1.757009346
18 2.523560209 1.932228916 1.587096774 1.418181818
d3.csv('training-days.csv').then(mileage => {
var group = fc.group()
.orient('horizontal')
.key('week');
var groupedMileage = group(mileage);
var colourDomain = groupedMileage[0].map(d => d[0]);
var color = d3.scaleOrdinal(d3.schemeCategory10)
.domain(colourDomain);
var point = fc.seriesSvgPoint()
.size(20)
.crossValue((_, i) => i + 1)
.mainValue(d => d[1]);
var line = fc.seriesSvgLine()
.crossValue((_, i) => i + 1)
.mainValue(d => d[1]);
var pointLineSeries = fc.seriesSvgMulti()
.series([point, line]);
var multiLine = fc.seriesSvgRepeat()
.series(pointLineSeries)
.decorate(function(sel) {
sel.attr('stroke', (_, i) => color(colourDomain[i]))
.attr('fill', (_, i) => color(colourDomain[i]))
});
var gridline = fc.annotationSvgGridline()
.yTicks(5);
var multi = fc.seriesSvgMulti()
.series([multiLine, gridline]);
var yExtent = fc.extentLinear()
.include([0])
.pad([0, 0.1])
.accessors([d => d.map(j => j[1])]);
var legend = d3.legendColor()
.shapeWidth(30)
.orient('vertical')
.scale(color);
d3.select('#legend')
.call(legend);
var extent = yExtent(groupedMileage);
var chart = fc.chartCartesian(
d3.scaleLinear(),
d3.scaleLinear()
)
.xDomain([0.5, 17.5])
.yDomain(yExtent(groupedMileage))
.yOrient('left')
.yTicks(5)
.yLabel('Running days')
.xLabel('Week')
.yNice()
.chartLabel('Weekly training days')
.svgPlotArea(multi);
d3.select('#chart')
.datum(groupedMileage)
.call(chart);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment