Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Weekly mileage vs. Marathon training plans

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

<!DOCTYPE html>

<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>

<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>

<style>
body {
  font-family: sans-serif;
  font-size: 1.2em;
}
.tick {
  font-size: 1.2em;
}
#chart {
  margin-top: 25px;
}
#chart>div {
  width: 50%;
  display: inline-block;
}
.cartesian-chart {
  position: relative;
  width: 50%;
}
.chart-label {
  position: absolute;
  top: -15%;
  left: 10%;
}
#chart>div:nth-child(1) .x-axis,
#chart>div:nth-child(1) .x-label,
#chart>div:nth-child(2) .x-axis,
#chart>div:nth-child(2) .x-label {
  display: none;
}
#chart>div:nth-child(1) .y-axis,
#chart>div:nth-child(1) .y-axis-label,
#chart>div:nth-child(3) .y-axis,
#chart>div:nth-child(3) .y-axis-label {
  display: none;
}

.gridline-y {
  display: none;
}
.gridline-x {
  opacity: 0.5;
}
.area {
  opacity: 0.1;
  fill: blue;
}
.multi:nth-child(3) .line {
  stroke-dasharray: 5, 5
}
</style>

<div id='chart'></div>
<script src="mileage-versus-plan.js" type='text/babel'></script>

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>
​
<style>
body {
  font-family: sans-serif;
  font-size: 1.2em;
}
.tick {
  font-size: 1.2em;
}
#chart {
  margin-top: 25px;
}
#chart>div {
  width: 50%;
  display: inline-block;
}
.cartesian-chart {
  position: relative;
  width: 50%;
}
.chart-label {
  position: absolute;
  top: -15%;
  left: 10%;
}
#chart>div:nth-child(1) .x-axis,
#chart>div:nth-child(1) .x-label,
#chart>div:nth-child(2) .x-axis,
#chart>div:nth-child(2) .x-label {
  display: none;
}
#chart>div:nth-child(1) .y-axis,
#chart>div:nth-child(1) .y-axis-label,
#chart>div:nth-child(3) .y-axis,
#chart>div:nth-child(3) .y-axis-label {
  display: none;
}
​
.gridline-y {
  display: none;
}
.gridline-x {
  opacity: 0.5;
}
.area {
  opacity: 0.1;
  fill: blue;
}
.multi:nth-child(3) .line {
  stroke-dasharray: 5, 5
}
</style>
​
<div id='chart'></div>
<script src="mileage-versus-plan.js" type='text/babel'></script>
​
    

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41