xxxxxxxxxx
<html>
<head>
<style>
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 10px;
}
.track-inset {
stroke: #dcdcdc;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
stroke: transparent;
cursor: crosshair;
}
.handle {
fill: #fff;
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
g:hover > .line{
opacity: 1;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:700|Roboto">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
</head>
<body>
<div class="container">
<h2>Shifting Tides of Life Expectancy from 1960 to 2015</h2>
<div class="slider"></div>
<div class="lineChart"></div>
<footer class="u-pull-right"><a href="https://data.world/makeovermonday/life-expectancy-at-birth-by-country">Life Expectancy at Birth</a></footer>
</div>
</body>
<script src='chart.js'></script>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js