| 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.
forked from ColinEberhardt's block: Weekly training days
| <!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.1"></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.chartSvgCartesian( | |
| 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') | |
| .plotArea(multi); | |
| d3.select('#chart') | |
| .datum(groupedMileage) | |
| .call(chart); | |
| }); |