ColinEberhardt/.block

## .block
license: mit

## README.md

      
        

                Raw

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    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.

  

  

## index.html
<!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>

## thumbnail.png

      
        

                Raw

        
        
          
            
          
          
            
              thumbnail.png
            
          
        
      
    
    

        
            
        
    

  

## training-days.csv

          
            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

## training-days.js

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);
});
	<!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);
	});