Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Training miles vs finish time

This charts shows the finish times vs average weekly training mieage fow 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>

<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;
}
.multi:nth-child(1) .point {
  opacity: 0.2;
}
svg>.multi:nth-child(2) {
  fill: blue;
  stroke: blue;
}

.y-axis-label {
  transform: rotate(-90deg) translateY(20px) !important;
  white-space: nowrap;
}
.point {
  fill: inherit;
  stroke: inherit;
}
.line {
  stroke: inherit;
}
</style>

<div id='chart' style='height: 400px'></div>
<script src="miles-vs-finish.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;
}
.multi:nth-child(1) .point {
  opacity: 0.2;
}
svg>.multi:nth-child(2) {
  fill: blue;
  stroke: blue;
}
​
.y-axis-label {
  transform: rotate(-90deg) translateY(20px) !important;
  white-space: nowrap;
}
.point {
  fill: inherit;
  stroke: inherit;
}
.line {
  stroke: inherit;
}
</style>
​
<div id='chart' style='height: 400px'></div>
<script src="miles-vs-finish.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