This charts shows the weekly training mileage of strava athletes who ran the 2016 London Marathon. The data is rendered using a combination of d3 and d3fc components.
xxxxxxxxxx
<meta charset='utf-8'>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></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;
bottom: auto;
top: 50px;
right: 10px;
width: 150px;
height: 120px;
font-size: 0.8em;
}
.y-axis-label {
transform: rotate(-90deg) translateY(20px) !important;
}
.point {
fill: inherit;
stroke: transparent;
}
.line {
stroke: inherit;
}
</style>
<div id='chart' style='height: 400px'></div>
<script src="training-mileage.js"></script>
https://unpkg.com/d3@4.6.0
https://unpkg.com/d3fc@12.1.0
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.js