Skip to content

Instantly share code, notes, and snippets.

@claudialexa

claudialexa/educationbyincome.csv

Created February 29, 2016 05:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save claudialexa/95cfeec5b92153850762 to your computer and use it in GitHub Desktop.
Save claudialexa/95cfeec5b92153850762 to your computer and use it in GitHub Desktop.
Download ZIP
Seeting up our Children for Failure: The Effect of Income on Education
Raw
educationbyincome.csv
State lowIncomeReading highIncomeReading lowIncomePreK highIncomePreK
Alabama 18 49 32 52
Alaska 15 40 31 39
Arizona 15 43 25 44
Arkansas 22 46 41 51
California 15 46 37 56
Colorado 21 55 38 57
Connecticut 19 57 56 67
Delaware 25 52 36 55
District of Columbia 13 61 0 0
Florida 27 58 41 58
Georgia 21 53 38 59
Hawaii 17 43 41 53
Idaho 22 44 26 40
Illinois 16 52 45 59
Indiana 25 51 30 49
Iowa 23 48 42 51
Kansas 22 54 38 49
Kentucky 23 51 36 49
Louisiana 15 42 45 56
Maine 24 48 36 47
Maryland 24 58 35 55
Massachusetts 25 62 46 65
Michigan 19 44 40 53
Minnesota 23 52 38 50
Mississippi 15 42 46 52
Missouri 23 49 36 52
Montana 22 46 35 42
Nebraska 23 49 37 51
Nevada 17 44 22 40
New Hampshire 24 53 43 60
New Jersey 22 56 53 66
New Mexico 15 39 34 44
New York 23 53 46 62
North Carolina 22 53 31 55
North Dakota 22 40 33 40
Ohio 20 52 37 53
Oklahoma 21 43 37 46
Oregon 21 50 31 50
Pennsylvania 23 55 36 56
Rhode Island 19 55 0 0
South Carolina 17 46 34 52
South Dakota 18 42 34 37
Tennessee 18 52 32 49
Texas 17 47 33 49
Utah 24 46 31 48
Vermont 26 54 38 58
Virginia 21 56 34 54
Washington 23 53 29 49
West Virginia 24 37 33 38
Wisconsin 20 47 32 45
Wyoming 24 46 0 0
Raw
index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Effect on Income on Education</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 26px;
font-weight:bold;
margin: 0;
}
h3 {
font-size: 20px;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.clicker {
font-weight: bolder;
color: black;
cursor: pointer;
}
.button {
background-color: #ffffff;
border: 0px;
}
.selected {
background-color: #969899;
border: 0px;
}
.chart-title {
font-size: 14pt;
font-weight: bolder;
color: black;
margin-left: 300px;
}
svg {
background-color: white;
}
.dots {
fill: #3498DB;
}
.highlighted {
fill: #E74C3C;
}
.axis path,
.axis line {
fill: none;
stroke: gray;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.xlabel{
font-size: 15px;
fill: gray;
}
.ylabel{
font-size: 15px;
fill: gray;
}
.row {
padding-top: 30px;
}
.btn-group{
padding-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>The Effect of Income on Education</h1>
<p>Fourth graders who did not qualify for free or discounted school lunch, an indicator of a family living below the poverty line, performed significantly better in reading exams. On a national average, only 18% of fourth graders in lower income families were reading proficient, against 48% of their higher income counterparts.</p>
<p>Children from lower income families are less likely to attend pre-school. In urban states, that may be because early care is too expensive, especially in areas that do not provide free universal early care. In rural areas, the problem is more connected to the distance from a family to the nearest pre-school or even more alarmingly, the quality of the education provided at the care centers.</p>
<p>Source: <a href="http://datacenter.kidscount.org/data#FL/2/0">Kids Count Data Center</a></p>
<div class="btn-group" role="group" aria-label="...">
<button class="clicker" id="reading">Reading Proficiency</button>
<button class="clicker" id="earlyed">Early Education</button>
</div>
<h3>Reading Proficiency</h3>
</div>
<div class="col-md-4">
<div id="svg"></div>
<div>
<img src="united-states-map.png" class="img-responsive" alt="United States">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
var fullwidth = 600;
var fullheight = 450;
var margin = { top: 20, right: 10, bottom: 50, left: 50 };
var width = fullwidth - margin.left - margin.right;
var height = fullheight - margin.top - margin.bottom;
// redo this with an object for the margin settings: var margin = {top...}
var dotRadius = 3; // fix this to a nice value.
var xScale = d3.scale.linear()
.range([ 0, width ])
.domain([-2,100]);
// top to bottom, padding just in case
var yScale = d3.scale.linear()
.range([ height, 0 ])
.domain([-2,100]);
// Create your axes here.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(12);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", fullwidth)
.attr("height", fullheight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("educationbyincome.csv", draw);
function draw(error, data) {
if (error) {
console.log("error reading data");
}
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
return xScale(+d.lowIncomeReading);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.highIncomeReading);
})
.attr("class", function(d){
// highlighting some interesting outliers
if (d.State === "Florida" || d.State === "Massachusetts" || d.State == "Wisconsin") {
return "highlighted";
}
else {
return "dots";
}
})
.append("title")
.text(function(d) {
return d.State + " " + "Low Income Family:"+ " " + d.lowIncomeReading + "%" + " " + "High Income Family:" + " " + d.highIncomeReading + "%";
});
// adding a silly intro animation to catch the eye -- using transition:
circles.sort(function(a, b) {
return d3.ascending(+a.urban, +b.urban);
})
.transition()
.delay(function(d, i) {
return i * 10;
})
.duration(500) // milliseconds, so this is 1 second.
.attr("r", dotRadius);
// fix these translates so they use your margin and height width as needed
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height + 20) + ")")
.style("text-anchor", "middle")
.attr("dy", "12")
.text("Low Income Families");
svg.append("text")
.attr("class", "ylabel")
.attr("transform","rotate(-90) translate(" + (-height/2) + ",0)")
.style("text-anchor", "middle")
.attr("dy", -25)
.text("Higher Income Families");
// make the default data button look selected
d3.select("button#reading").classed("selected", true);
// handle the click events on the 2 buttons:
d3.selectAll("button.clicker").on("click", function() {
// we use the id attr on each to see which data set to use.
var whichbutton = d3.select(this).attr("id");
// style the buttons to show which one was clicked:
d3.select(this).classed("selected", true);
if (whichbutton === "reading") {
d3.select("button#earlyed").classed("selected", false);
} else {
d3.select("button#reading").classed("selected", false);
}
// The id is either toys or books. We just check which
// one and return the right data and text below:
circles
.transition()
.duration(2000)
.attr("cx", function(d) {
if (whichbutton === "earlyed") {
return xScale(+d.lowIncomePreK);
}
else { // then it's books:
return xScale(+d.lowIncomeReading);
}
// return the value to use for your x scale here
})
.attr("cy", function(d) {
if (whichbutton === "earlyed") {
return yScale(+d.highIncomePreK);
} else {
return yScale(+d.highIncomeReading);
}
});
circles.selectAll("title").remove();
circles
.append("title")
.text(function(d) {
if (whichbutton === "reading") {
return d.State + " " + "Reading proficiency in low income families:" + " " + d.lowIncomeReading + "Reading proficiency in higher income families:" + " " + d.highIncomeReading;
} else {
return d.State + " " + "Children enrolled in Pre-k in low income families:" + " " + d.lowIncomePreK + "Children enrolled in Pre-k in higher income families:" + " " + d.highIncomePreK;
}
});
// change the visible title!
if (whichbutton === "reading") {
d3.select("p.chart-title").text("Reading Proficiency of 4th Graders");
} else {
d3.select("p.chart-title").text("Children Enrolled in Early Education (Pre-k)");
}
}); // end clicker function
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment