Skip to content

Instantly share code, notes, and snippets.

@darrenjaworski

darrenjaworski/README.md

Last active April 2, 2018 18:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darrenjaworski/5544599 to your computer and use it in GitHub Desktop.
Save darrenjaworski/5544599 to your computer and use it in GitHub Desktop.
Download ZIP
Animated scatterplot through time
Raw
README.md

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.

Raw
index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="script.js"></script>
Raw
loanvscost.csv
id type name loan1011 loan0910 loan0809 loan0708 loan0607 loan0506 loan0405 loan0304 loan0203 loan0102 loan0001 loan9900 TF9900 TF1011 TF0910 TF0809 TF0708 TF0607 TF0506 TF0405 TF0304 TF0203 TF0102 TF0001 TotalEnrollment
207500 1 University of Oklahoma Norman Campus 6873 5900 5167 4790 5090 4632 3876 3747 3654 3540 3242 3424 2396 6476 7864 18295 7483 17464 7423 17404 6507 15621 5110 13399 5008 12901 4515 12033 3983 10112 2929 8077 2713 7437 2581 6916 27138
207388 1 Oklahoma State University-Main Campus 5458 5011 4889 3985 3835 3650 3472 3378 3339 3362 3255 3027 2340 6400 6779 17601 6202 16556 6201 16556 5491 14916 4997 13569 4365 12389 4071 11361 3520 9420 2760 7480 2556 6706 2340 6400 24390
207935 1 Tulsa Community College 4371 4661 2669 2444 2088 2034 2132 2067 2082 2147 1973 1969 1438 3508 2313 6231 2204 5937 2622 6935 2373 6366 2373 6366 2277 6009 1703 4467 1535 3935 1609 3853 1438 3508 1438 3508 20154
206941 1 University of Central Oklahoma 5913 5251 5338 4597 1576 3498 3285 1659 2269 2121 1002 2000 1936 4456 4456 11242 4223 10652 4223 10652 3857 9729 3539 8924 3618 8628 3012 7586 2550 6190 2187 5081 2067 4814 1936 4456 17239
207449 1 Oklahoma City Community College 5001 5273 2188 3083 1325 2526 2436 2292 2272 2223 2237 2289 1094 2714 2659 7087 2521 6721 2521 6721 2340 6240 2191 5836 1935 4967 1726 4515 1726 4515 1204 3127 809 2574 1368 3393 14941
207263 1 Northeastern State University 4679 5377 4864 3845 3216 3227 3125 3118 2893 2598 2358 2180 1926 4581 4385 10722 4155 10245 4155 10245 3798 9318 3489 8589 3270 8040 3000 7350 2700 6600 2312 5465 2136 5029 2003 4658 9316
207670 1 Rose State College 4466 3799 3792 2813 2013 2203 2017 1210 1160 1140 1184 876 1095 2715 2660 7970 2490 7350 2490 7350 2340 6798 2134 5978 1949 5238 1777 4272 1627 4272 1220 3144 1163 1163 1100 2720 8150
206914 1 Cameron University 5279 3923 3767 3297 2951 2786 2783 2676 2488 2676 2509 2557 1970 4325 4336 10553 4110 9975 4020 9742 3872 9344 3588 8380 3360 7904 3228 7388 2778 6678 2118 5002 1964 4435 1908 4385 6463
207281 1 Northern Oklahoma College 5169 6095 5231 4588 3642 2897 2849 2181 2042 1877 720 2269 1296 3321 2526 6231 2303 5813 2302 5812 2097 5362 2060 5083 1988 5011 1910 4760 1820 4465 1529 3933 1376 3582 1265 3294 5422
207865 1 Southwestern Oklahoma State University 4933 4818 4571 5255 3904 3434 3670 3072 1982 1792 2446 2339 1956 4476 4335 10050 4110 9450 3536 8164 3198 7410 3680 8480 3456 8256 3200 7680 2948 6658 2416 5601 2212 5032 1972 4476 5263
208035 1 Western Oklahoma State College 4575 4030 3886 3171 2957 2790 2851 2488 2387 2478 2429 1171 1400 1800 2750 6234 2750 5998 2750 6230 2550 3135 2400 3135 2320 3135 2150 2715 1925 2565 1725 2565 1650 2206 1500 2025 5035
207041 1 East Central University 4548 1862 4654 3728 2380 2180 3974 1214 2413 2439 2523 2251 1961 4452 4482 10798 4271 10286 4271 10286 3930 9404 3578 8674 3256 7890 3042 7332 2548 5768 2260 5396 2024 5970 1840 4600 4851
207661 1 Rogers State University 4615 4558 4321 2697 3052 3927 2576 2722 1111 894 2224 1179 1457 3354 4513 10270 4277 9734 4277 9734 3893 8858 3300 7860 3330 7890 2676 6576 2441 5735 2325 5318 1063 2436 1619 3635 4803
207847 1 Southeastern Oklahoma State University 3527 3363 3492 3548 2930 2695 2612 3511 2124 2538 3377 1255 2036 2670 4652 11379 4416 10787 4316 10687 3668 9080 3156 7656 3040 7380 3123 7452 2947 6847 2250 5043 2120 4683 1934 4286 4140
207971 2 University of Tulsa 6765 6768 7891 5994 6543 5710 5531 5307 4989 4038 3970 3739 13680 28735 28735 27237 27237 24365 24365 22195 22195 21113 21113 19235 19235 18005 18005 16805 16805 15265 15265 14555 14555 14085 14085 4092
207458 2 Oklahoma City University 7658 7002 7039 4707 4599 4622 4237 4791 8926 6807 5171 4179 9410 25760 25760 23950 23950 23400 23400 21000 21000 19200 19200 18000 18000 16400 16400 14094 14094 12375 12375 10800 10800 10080 10080 3575
207582 2 Oral Roberts University 7896 7771 8864 7734 10746 9818 7281 7403 7333 6519 5810 5590 10968 20054 20054 19106 19106 18385 18385 17800 17800 16670 16670 15880 15880 14600 14600 13970 13970 12600 12600 11900 11900 11300 11300 3259
207209 1 Langston University 7742 7413 8932 5842 5045 4981 5438 5454 4720 4243 4112 3778 2189 4852 3974 9833 3827 9407 3827 9407 3596 8710 3465 8100 3240 7280 3004 7068 2762 6374 2644 3068 1888 4204 2202 4856 2840
207236 1 Murray State College 5417 2885 4520 4037 2450 1783 1830 3405 2854 1234 1390 3437 2990 7070 2840 6650 3004 6664 2566 6180 2040 5190 2220 5354 2074 5088 1850 4898 1698 4304 1562 3779 2674
206923 1 Carl Albert State College 3334 3037 3167 2634 2423 2177 2137 2261 2263 2332 2372 1315 3345 2216 2216 2104 2104 2104 2104 2145 2145 2040 2040 2040 2040 1980 4830 1820 4484 1521 3925 1421 3628 2622
207069 1 Redlands Community College 4179 4043 3962 1620 862 970 1080 1226 3450 2421 2288 3030 5280 2903 5153 2903 5153 2640 4890 2460 5010 2312 4560 2190 4440 1920 4470 1708 3958 1525 3775 1465 3450 2574
206996 1 Connors State College 4531 4271 3367 3679 3595 2577 3964 2863 2687 1137 1113 1757 2091 4992 2091 4992 2239 4969 1866 4518 1715 4160 1715 4160 1697 4025 1769 4413 1504 3909 1326 2814 2563
207290 1 Northeastern Oklahoma A&M College 4252 3333 3398 2809 2458 2408 2355 2224 1987 1879 1844 2076 1424 3584 2778 6828 2640 6450 2432 6253 2276 5751 2128 5407 2057 5180 1940 4805 1778 4418 1536 3896 1557 3813 1424 3584 2542
207740 1 Seminole State College 4979 4781 4644 3383 3087 2696 2989 2735 2362 2382 1734 2297 1416 3514 3000 7020 2848 6664 2849 6665 2593 6078 2370 5670 2224 5296 2159 5084 1949 4681 1630 3946 1557 3765 1461 3486 2282
207306 1 Northwestern Oklahoma State University 3697 4205 3990 3126 2769 2800 2437 2083 2164 2118 2076 1163 1948 2688 4479 10478 4247 10478 4247 10478 3875 5735 3565 5270 3379 4991 3085 4557 2803 4030 2348 3092 2080 2894 1948 2688 2271
245953 2 Mid-America Christian University 6017 6489 6732 6521 5473 5252 2527 4672 3110 3664 2326 3064 5434 14080 14080 13430 13430 12800 12800 11950 11950 10400 10400 9900 9900 9400 9400 8125 8125 8466 8466 7450 7450 2255
207324 2 Oklahoma Christian University 6249 5883 7805 6645 3062 3043 4447 4212 5012 4061 3703 3574 7600 17456 17456 16366 16366 16566 16566 15796 15796 14976 14976 13932 13932 13160 13160 13034 13034 12700 12700 12100 12100 2172
206862 2 Southern Nazarene University 8742 6410 6914 5778 2525 2000 1980 3624 3263 2765 2915 3686 9380 18354 18354 17664 17664 16824 16824 15924 15924 14400 14400 12870 12870 12090 12090 11310 11310 11056 11056 9870 9870 9868 9868 2098
207050 1 Eastern Oklahoma State College 3500 3436 5128 4653 2318 2625 2221 2623 1036 2125 2400 1163 1426 3506 3006 6636 2856 6486 2720 5199 2916 5532 2772 5532 2278 5559 2100 5137 1966 4732 1630 3976 1562 3710 1946
207403 2 Oklahoma Baptist University 5978 5959 5893 6931 4036 3733 3962 3047 3505 3473 2901 2906 18608 18608 17562 17562 16728 16728 15932 15932 13654 13654 12924 12924 12286 12286 10800 10800 10300 10300 9440 9440 1871
207351 1 Oklahoma Panhandle State University 4692 4821 1657 3661 2499 2746 1580 2434 1921 2000 1278 2440 1910 4430 4894 10453 4241 9541 4242 6844 3820 6220 3309 3309 3309 5535 2899 5689 2500 5142 2002 3307 2022 3196 1910 2796 1463
206835 2 Oklahoma Wesleyan University 6566 8205 8537 4733 4278 4187 2061 2894 3366 3127 1670 3201 8700 19200 19200 17970 17970 15685 15685 15500 15500 14550 14550 12900 12900 12900 12900 12150 12150 11280 11280 10400 10400 9200 9200 1178
206817 2 Bacone College 7383 6577 5711 5010 3996 4977 3956 1643 4160 2625 4780 12300 12300 11700 11700 10418 10418 10056 10056 8792 8792 8820 8820 8580 8580 8580 8580 8105 8105 8025 8025 8000 8000 1111
207722 1 University of Science and Arts of Oklahoma 5994 5247 3620 4390 3319 3882 2823 3067 2626 2438 2046 2046 1878 4398 3744 8904 3552 8448 3552 8448 3240 7704 2976 7056 2784 6576 2544 6000 2312 5432 2250 5402 2244 5339 1538 3554 1032
434982 3 University of Phoenix-Oklahoma City Campus 8922 10586 9453 9048 5198 3365 2142 3462 2526 9776 7450 4946 9480 9480 9000 9000 11340 11340 10860 10860 10500 10500 9360 9360 8910 8910 8550 8550 8250 8250 701
434991 3 University of Phoenix-Tulsa Campus 8532 9601 8763 8521 4322 3283 876 3441 3940 6612 9480 9480 9000 9000 11340 11340 10890 10890 10500 10500 9360 9360 8910 8910 8550 8550 8250 8250 679
207856 2 Southwestern Christian University 2164 5043 8108 4305 3011 3746 2625 2625 2681 2569 2425 5900 10700 10700 10700 10700 9800 9800 9668 9668 6890 6890 8250 8250 7950 7950 7700 7700 7480 7480 7200 7200 673
447485 3 DeVry University-Oklahoma 9219 6604 6358 4917 9664 14826 14826 14592 14592 13930 13930 13020 13020 12440 12440 12100 12100 177
Raw
script.js
$(document).ready(function() {
var margin = {
top : 20,
right : 20,
bottom : 30,
left : 40
}, width = 725 - margin.left - margin.right, height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var formatCurrency = d3.format(",");
var div = d3.select("body")
.append("div")
.attr("id", "schoolinfo")
.style("opacity", 0);
//var color = d3.scale.category10();
var color = d3.scale.ordinal()
.domain([1, 2, 3])
.range(["rgb(53,135,212)", "rgb(77, 175, 74)", "rgb(228, 26, 28)"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart")
.append("svg")
.attr("class", "chart")
.attr("viewBox", "0 0 725 600")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("loanvscost.csv", function(error, data) {
x.domain([0, 30000]).nice();
y.domain([0, 11000]).nice();
//x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Tuition and Fees ($)");
//y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Avg. Student Loan Total ($)")
//legend y position
var LYP = 300,
LXP = 570;
svg.append("text").attr("class", "label").attr("x", LXP - 5).attr("y", LYP).text("Institution Type").style("font-weight", "bold");
//color legend
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 20).attr("r", 12).style("fill", "rgb(53, 135, 212)").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 25).style("text-anchor", "start").text(function(d) {
return "Public";
});
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 50).attr("r", 12).style("fill", "rgb(77, 175, 74)").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 55).style("text-anchor", "start").text(function(d) {
return "Nonprofit";
});
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 80).attr("r", 12).style("fill", "rgb(228, 26, 28)").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 85).style("text-anchor", "start").text(function(d) {
return "For-profit";
});
svg.append("text").attr("class", "label").attr("x", LXP - 5).attr("y", LYP + 110).text("Enrollment").style("font-weight", "bold");
//size legend
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 30 + 110).attr("r", 20).style("fill", "#bbb").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 25).attr("y", LYP + 140).style("text-anchor", "start").text("27,000");
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 60 + 110).attr("r", 15).style("fill", "#bbb").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 25).attr("y", LYP + 170).style("text-anchor", "start").text("18,000+");
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 80 + 110).attr("r", 9).style("fill", "#bbb").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 25).attr("y", LYP + 190).style("text-anchor", "start").text("9,000+");
svg.append("circle").attr("cx", LXP).attr("cy", LYP + 93 + 110).attr("r", 4).style("fill", "#bbb").attr("stroke", "#000");
svg.append("text").attr("class", "label").attr("x", LXP + 25).attr("y", LYP + 210).style("text-anchor", "start").text("100+");
//circles
svg.selectAll(".dot")
.data(data.sort(
function(a, b) {
return b.TotalEnrollment - a.TotalEnrollment;
}))
.enter()
.append("circle")
.attr("class", "dot")
.attr("r",
function(d) {
return (4 + (d.TotalEnrollment * .0006));
})//gave it a base 3.4 plus a proportional amount to the enrollment
.attr("cx",
function(d) {
return x(d.TF9900);
})
.attr("cy",
function(d) {
return y(d.loan9900);
})
.style("fill",
function(d) {
if (d.type == 3) {
return "rgb(228, 26, 28)";
} else if (d.type == 2) {
return "rgb(77, 175, 74)";
} else {
return "rgb(53, 135, 212)";
}
});
var running = false;
var timer;
$("button").on("click", function() {
var duration = 3000,
maxstep = 2011,
minstep = 2000;
if (running == true) {
$("button").html("Play");
running = false;
clearInterval(timer);
}
/*
else if (running == true && $("#slider").val() == maxstep) {
running = true;
$("button").html("Play1");
}
*/
else if (running == false) {
$("button").html("Pause");
sliderValue = $("#slider").val();
timer = setInterval( function(){
if (sliderValue < maxstep){
sliderValue++;
$("#slider").val(sliderValue);
$('#range').html(sliderValue);
}
$("#slider").val(sliderValue);
update();
}, duration);
running = true;
}
});
$("#slider").on("change", function(){
update();
$("#range").html($("#slider").val());
clearInterval(timer);
$("button").html("Play");
});
update = function() {
d3.selectAll(".dot")
.transition()
.duration(1000)
.attr("cy", function(d) {
switch ($("#slider").val()) {
case "2000":
return y(d.loan9900);
break;
case "2001":
return y(d.loan0001);
break;
case "2002":
return y(d.loan0102);
break;
case "2003":
return y(d.loan0203);
break;
case "2004":
return y(d.loan0304);
break;
case "2005":
return y(d.loan0405);
break;
case "2006":
return y(d.loan0506);
break;
case "2007":
return y(d.loan0607);
break;
case "2008":
return y(d.loan0708);
break;
case "2009":
return y(d.loan0809);
break;
case "2010":
return y(d.loan0910);
break;
case "2011":
return y(d.loan1011);
break;
}
})
.transition()
.duration(1000)
.attr("cx", function(d) {
switch ($("#slider").val()) {
case "2000":
return x(d.TF9900);
break;
case "2001":
return x(d.TF0001);
break;
case "2002":
return x(d.TF0102);
break;
case "2003":
return x(d.TF0203);
break;
case "2004":
return x(d.TF0304);
break;
case "2005":
return x(d.TF0405);
break;
case "2006":
return x(d.TF0506);
break;
case "2007":
return x(d.TF0607);
break;
case "2008":
return x(d.TF0708);
break;
case "2009":
return x(d.TF0809);
break;
case "2010":
return x(d.TF0910);
break;
case "2011":
return x(d.TF1011);
break;
}
});
};
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment