Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Weekly training days

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>

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

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.js