D3 Examples - Animated scatterplot through time

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> Oklahoma college costs </title>
</head>
<style>
    html {
        min-height: 1000px;
    }
​
    input[type='range'] {
        -webkit-appearance: none !important;
        -webkit-border-radius: 5px;
        /*-webkit-box-shadow: inset 0 0 5px #333;*/
        background-color: rgb(53, 135, 212);
        height: 10px;
        width: 200px;
        margin: 20px;
        /*position: relative;
         left: 10%;*/
​
    }
​
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        -webkit-border-radius: 15px;
        background-color: #bbb;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#888));
        border: 1px solid #000;
        height: 25px;
        width: 25px;
    }
​
    body {
        font: 10px sans-serif;
    }
​
    .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
    .dot {
        stroke: #000;
        stroke-width: 1;
    }
​
    .dot:hover {
        stroke: #bbb;
    }
​
    #range {
        font: 15px sans-serif;
    }
​
    input[type=range] {
    }
​
    div.tooltip {
        position: absolute;
        text-align: left;
        padding: 2px;
        font: 12px sans-serif;
        background: #EDEDED;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
​
    table {
        border-collapse: collapse;
        width: 400px;
        margin-left: 0px;
    }
​
    td {
        text-align: left;
        border-bottom: 2px solid #bbb;
    }
​
    th {
        padding-top: 10px;
        text-align: left;
        /*padding-left: 20px;*/
    }
​
    h3 {
        text-align: center;
        margin-bottom: 0px;
        font-size: 12pt;
    }
    h4  {
        text-align: center;
    }
​
    .chart {
        width: 100%;
        height: 500px;
    }
​
    @media only screen and (min-width: 481px) {
        .chart {
            width: 100%;
            height: 500px;
        }
        table{
            width:500px;
            margin-left: 10%;
        }
        h3, h4{
            margin-left: 20%;
        }
        h3{
            font-size: 16pt;
        }
        
    }
    @media only screen and (min-width: 769px) {
        .chart {
            width: 100%;
            height: 600px;
        }
        
        table{
            width:700px;
            left: -20px;
            margin-left: 15%;
        }
        h3, h4{
            margin-left: 20%;
        }
        h3{
            font-size: 16pt;
        }
        
    }
​
    button {
        width: 4em;
        height: 2em;
        background: rgb(53, 135, 212);
        border: 1px solid rgb(53, 135, 212);
        border-radius: 4px;
        color: white;
        font-size: 1.5em;
    }
​
    h4 {
        text-align: center;
        margin-bottom: .5em;
        margin-top: .5em;
    }
​
    .label {
        font-size: 1.2em;
    }
​
    #schoolinfo {
        position: absolute;
    }
​
</style>
<body>
    <input id="slider" type="range" min="2000" max="2011" value="2000" step="1" />
    
    <span id="range">2000</span>
​
    <button name="play" id="play">Play</button>
    
    <div id="chart"></div>
    
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fryn/html5slider/gh-pages/html5slider.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="script.js"></script>
​
    