Skip to content

Instantly share code, notes, and snippets.

@csessig86

csessig86/ia_free_reduced_50_higher.csv

Created April 19, 2015 01:29
Show Gist options
  • Save csessig86/174bf6e9437c6d175583 to your computer and use it in GitHub Desktop.
Save csessig86/174bf6e9437c6d175583 to your computer and use it in GitHub Desktop.
Download ZIP
Breakdown: Students on free and reduced lunch in Iowa
Raw
ia_free_reduced_50_higher.csv
Á Name Enrollment FreeLunch ReducedLunch FreeorReduced Price Percent
72 Albert City-Truesdale 99 36 17 53 53.54 53.5
135 Allamakee 1116 329 237 566 50.72 50.7
387 Atlantic 1499 600 155 755 50.37 50.4
594 Belmond-Klemme 716 334 37 371 51.82 51.8
882 Burlington 4001 2225 217 2442 61.03 61
916 CAL 220 117 21 138 62.73 62.7
977 Cardinal 627 306 56 362 57.74 57.7
1053 Cedar Rapids 15884 6894 1055 7949 50.04 50
1093 Central Decatur 698 339 109 448 64.18 64.2
1107 Chariton 1337 635 70 705 52.73 52.7
1211 Clarke 1330 622 161 783 58.87 58.9
1278 Clinton 3465 1724 246 1970 56.85 56.9
1368 Columbus 739 487 59 546 73.88 73.9
1413 Coon Rapids-Bayard 379 137 55 192 50.66 50.7
1449 Corwith-Wesley 58 26 4 30 51.72 51.7
1476 Council Bluffs 8582 3895 466 4361 50.82 50.8
1503 Creston 1441 650 143 793 55.03 55
1611 Davenport 15269 7520 619 8139 53.3 53.3
1701 Denison 2126 1273 255 1528 71.87 71.9
1737 Des Moines Independent 31356 19796 3163 22959 73.22 73.2
1944 Eagle Grove 823 421 85 506 61.48 61.5
2313 Fort Dodge 3680 1951 406 2357 64.05 64
2322 Fort Madison 2028 955 169 1124 55.42 55.4
2493 Gilmore City-Bradgate 42 18 7 25 59.52 59.5
2772 Hamburg 207 107 13 120 57.97 58
2781 Hampton-Dumont 1186 545 94 639 53.88 53.9
2834 Harmony 256 107 42 149 58.2 58.2
3312 Keokuk 1844 953 185 1138 61.71 61.7
3465 Lamoni 322 134 33 167 51.86 51.9
3537 Laurens-Marathon 270 163 13 176 65.19 65.2
3609 Lenox 471 196 50 246 52.23 52.2
3897 LuVerne 73 39 10 49 67.12 67.1
4033 Maple Valley-Anthon Oto 614 238 85 323 52.61 52.6
4041 Maquoketa 1391 610 105 715 51.4 51.4
4104 Marshalltown 4852 2932 456 3388 69.83 69.8
4131 Mason City 3761 1680 390 2070 55.04 55
4491 Moravia 378 151 46 197 52.12 52.1
4505 Mormon Trail 215 107 20 127 59.07 59.1
4572 Murray 322 130 36 166 51.55 51.6
4581 Muscatine 5184 2308 353 2661 51.33 51.3
4644 Newell-Fonda 463 190 53 243 52.48 52.5
4725 Newton 2838 1230 224 1454 51.23 51.2
4778 North Kossuth 261 112 36 148 56.7 56.7
4869 Oelwein 1209 562 127 689 56.99 57
4905 Olin Consolidated 83 52 4 56 67.47 67.5
4978 Orient-Macksburg 166 77 14 91 54.82 54.8
5049 Ottumwa 4332 2049 302 2351 54.27 54.3
5184 Perry 1746 1104 222 1326 75.95 75.9
5310 Postville 656 654 0 654 99.7 99.7
5328 Prescott 38 22 4 26 68.42 68.4
5463 Red Oak 1088 543 94 637 58.55 58.5
5895 Seymour 250 104 28 132 52.8 52.8
6039 Sioux City 13862 7804 1378 9182 66.24 66.2
6097 South Page 127 70 7 77 60.63 60.6
6098 South Tama County 1423 693 150 843 59.24 59.2
6219 Storm Lake 2306 1453 253 1706 73.98 74
6462 Tri-County 234 88 29 117 50 50
6516 Twin Rivers 50 30 7 37 74 74
6651 Villisca 280 115 33 148 52.86 52.9
6795 Waterloo 10662 6498 914 7412 69.52 69.5
6854 Wayne 518 199 61 260 50.19 50.2
6975 West Liberty 1179 560 138 698 59.2 59.2
6990 West Sioux 740 360 88 448 60.54 60.5
7002 Whiting 193 92 30 122 63.21 63.2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Free and reduced lunch in Iowa</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<h3>Breakdown: Students on free and reduced lunch in Iowa</h3>
<p>This graph shows all the schools in Iowa where 50% or more of their students are on a free or reduced lunch program. A total of 64 school districts are shown.</p>
<p>The y scale from top to bottom shows the percentage of students that each school has on one of those programs. The x scale from left to right shows the number of students on one of those programs.</p>
<p>As the graph shows, most of the schools shown have less than 5,000 students.</p>
<svg></svg>
<p>To download the data, <a href="https://docs.google.com/spreadsheets/d/1KvLX4M8ww2js4GMWOX4niM9fApu0efvc59pLKAyeM-s/" target="_blank">click here</a>.</p>
<script type="text/javascript">
var width = 750;
var height = 500;
var padding = [40, 15, 35, 50];
// Determines x scale
// Based on data values
var xScale = d3.scale.linear()
// This is what is outputted
.range([ padding[3] + 15, width - padding[3] ]);
// Determines y scale
// Based on number of values total
var yScale = d3.scale.linear()
// This is what is outputted
.range([ padding[0] + 15, height - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
// Create empty SVG so we can append data to it later
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
// Load CSV data
d3.csv("ia_free_reduced_50_higher.csv", function(data) {
// Map school name to school value
xScale.domain([
d3.min(data, function(d) {
return +d['FreeorReduced'];
}),
d3.max(data, function(d) {
return +d['FreeorReduced'];
})
]);
// Set second domain to max value in data
yScale.domain([
d3.max(data, function(d) {
return +d['Percent'];
}),
d3.min(data, function(d) {
return +d['Percent'];
})
]);
// Create circleangles and append to DOM
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// Set attributes
circles.attr("cx", function(d, num) {
return xScale( d['FreeorReduced'] );
})
.attr("cy", function(d, num) {
return yScale( d['Percent'] );
})
.attr("r", 4)
.append("title")
// Tooltip
.text(function(d) {
return 'The percentage of students on free or reduced lunch at ' + d['Name'] + ' High School is ' + d['Percent'] + '%. A total of ' + d['FreeorReduced'] + ' students are on the program.';
});
// Append x and y axis
svg.append("g")
.attr("class", "x-axis axis")
.attr("transform", "translate(0," + padding[0] + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
styles.css
html, body {
font-family: Helvetica;
}
circle {
cursor: pointer;
fill: #4169E1;
stroke: #333;
stroke-width: 1;
}
circle:hover {
fill: #203470;
stroke-width: 5;
}
svg {
margin-bottom: 20px;
}
rect:hover {
fill: #999;
}
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family:sans-serif;
font-size: 12px;
fill: #333;
}
.y-axis path, .y-axis line {
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment