Animated scatterplot through time

This is my initial attempt to replicate a NY Times graphic on the rising debt and cost of college. This is Oklahoma centric data. Circle size is proportional to total enrollment. X axis is tuition and fee costs and the Y axis is average student debt for first time full time students.

forked from darrenjaworski's block: Animated scatterplot through time

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js to https://cdn.jsdelivr.net/gh/fryn/html5slider/gh-pages/html5slider.js

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js