D3 Examples - D3 - Line chart, slider to choose year (Data: UK Unemployment rate)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unemployment Rate</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
    <style>
    html, body, #vis {
        height: 100%;
        margin: 0;
    }
​
    .tooltip {
        position: absolute;
    }
​
    .tooltip p {
        background-color: white;
        border: #eee 1px solid;
        padding: 2px;
        font-family: sans-serif;
        font-size: 11px;
    }
</style>
</head>
<body>
    <label for="year">Please select a year: </label>
    <input type="range" min=1975 max=2016 step=1 id="year" value=2014 oninput="selected_year.value = year.value">
    <output name="selected_year" id="selected_year">2014</output>
    <div id="vis">
    </div>
    <script src="script.js"></script>
</body>
</html>
​
    