D3 Examples - London Marathon Athlete Splits 2016

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
​
<script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js"></script>
​
<style>
path.line {
    stroke-opacity: 0.015;
}
.annotation-line line {
  stroke: red;
}
.right-handle text {
  transform: translate(-60px, -10px);
}
body {
  font-family: sans-serif;
  font-size: 1.2em;
}
.tick {
  font-size: 1.2em;
}
.y-axis-label {
  white-space: nowrap;
  transform: rotate(-90deg) translateY(20px) !important;
  font-size: 0.8em;
}
#chart .x-axis {
  display: none;
}
</style>
​
<div id='chart' style='height: 350px'></div>
<div id='elevation' style='height: 150px'></div>
<script src="stream.js"></script>
​
    