Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/Education_Poverty.csv

Last active March 7, 2016 16:55
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 natemiller/2686e5c0d9a1a4bb0895 to your computer and use it in GitHub Desktop.
Save natemiller/2686e5c0d9a1a4bb0895 to your computer and use it in GitHub Desktop.
Download ZIP
d3:Education/Poverty_Tooltip
Raw
Education_Poverty.csv
state non_math_prof child_pov year math_proficient
United_States 71.5 18.5 2005 28.5
Alabama 84.8 24.8 2005 15.2
Alaska 71.3 14.5 2005 28.7
Arizona 74.3 20.3 2005 25.7
Arkansas 78 24.9 2005 22
California 78.2 18.6 2005 21.8
Colorado 68 14.2 2005 32
Connecticut 65.4 11.6 2005 34.6
Delaware 70.3 14.5 2005 29.7
District_of_Columbia 93.1 32.2 2005 6.9
Florida 74.4 17.9 2005 25.6
Georgia 76.8 20.2 2005 23.2
Hawaii 81.8 12.7 2005 18.2
Idaho 70 17.7 2005 30
Illinois 71.4 16.4 2005 28.6
Indiana 69.6 16.7 2005 30.4
Iowa 66.3 14 2005 33.7
Kansas 65.8 15.1 2005 34.2
Kentucky 77.5 22.5 2005 22.5
Louisiana 83.9 28.4 2005 16.1
Maine 70.1 17.5 2005 29.9
Maryland 70.4 10.8 2005 29.6
Massachusetts 56.7 13.6 2005 43.3
Michigan 70.7 18.5 2005 29.3
Minnesota 57.3 11.6 2005 42.7
Mississippi 86.5 30.9 2005 13.5
Missouri 74 19 2005 26
Montana 64 20.1 2005 36
Nebraska 65.1 14.8 2005 34.9
Nevada 78.7 14.9 2005 21.3
New_Hampshire 65.4 9.4 2005 34.6
New_Jersey 64.1 11.8 2005 35.9
New_Mexico 86 26 2005 14
New_York 69.2 19.4 2005 30.8
North_Carolina 68.1 21.3 2005 31.9
North_Dakota 65.4 13.5 2005 34.6
Ohio 66.9 18.6 2005 33.1
Oklahoma 79.4 23 2005 20.6
Oregon 66.3 18.4 2005 33.7
Pennsylvania 69.1 16.7 2005 30.9
Rhode_Island 76.5 19.5 2005 23.5
South_Carolina 70.1 22.7 2005 29.9
South_Dakota 63.5 18.2 2005 36.5
Tennessee 79.4 21.4 2005 20.6
Texas 69.3 24.9 2005 30.7
Utah 70.5 10.9 2005 29.5
Vermont 62.2 15.4 2005 37.8
Virginia 66.6 13.3 2005 33.4
Washington 64 15.1 2005 36
West_Virginia 82.1 25.6 2005 17.9
Wisconsin 64.2 13.9 2005 35.8
Wyoming 71 11.1 2005 29
United_States 65.6 22.6 2013 34.4
Alabama 80.3 27.5 2013 19.7
Alaska 67 13.9 2013 33
Arizona 69.4 27 2013 30.6
Arkansas 72.3 28.5 2013 27.7
California 72.4 23.8 2013 27.6
Colorado 58.1 18.5 2013 41.9
Connecticut 62.9 14.8 2013 37.1
Delaware 67.3 17.4 2013 32.7
District_of_Columbia 81.2 26.5 2013 18.8
Florida 69.2 25.4 2013 30.8
Georgia 70.6 27.2 2013 29.4
Hawaii 67.7 17.1 2013 32.3
Idaho 63.5 20.7 2013 36.5
Illinois 63.5 20.7 2013 36.5
Indiana 61.9 22.4 2013 38.1
Iowa 64.2 15.9 2013 35.8
Kansas 59.5 19 2013 40.5
Kentucky 70 26.5 2013 30
Louisiana 79.2 28.1 2013 20.8
Maine 60.5 20.9 2013 39.5
Maryland 62.6 13.8 2013 37.4
Massachusetts 45.4 15.4 2013 54.6
Michigan 69.5 24.9 2013 30.5
Minnesota 52.8 14.6 2013 47.2
Mississippi 78.7 34.7 2013 21.3
Missouri 67.4 22.6 2013 32.6
Montana 60.4 20.3 2013 39.6
Nebraska 64.4 17.9 2013 35.6
Nevada 71.7 24 2013 28.3
New_Hampshire 53.2 15.6 2013 46.8
New_Jersey 51.1 15.4 2013 48.9
New_Mexico 77.3 29.3 2013 22.7
New_York 67.7 22.8 2013 32.3
North_Carolina 63.7 26 2013 36.3
North_Dakota 59.4 13.2 2013 40.6
Ohio 59.8 23.8 2013 40.2
Oklahoma 75 24.1 2013 25
Oregon 65.7 23 2013 34.3
Pennsylvania 58.1 19.7 2013 41.9
Rhode_Island 64 19.5 2013 36
South_Carolina 69.2 26.9 2013 30.8
South_Dakota 61.6 17.5 2013 38.4
Tennessee 72.5 25.8 2013 27.5
Texas 62.1 25.8 2013 37.9
Utah 63.8 15.1 2013 36.2
Vermont 53.1 15.5 2013 46.9
Virginia 61.9 15.3 2013 38.1
Washington 58.1 18.5 2013 41.9
West_Virginia 76.5 24.6 2013 23.5
Wisconsin 60.2 18.2 2013 39.8
Wyoming 62.2 16.9 2013 37.8
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scatterplot</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: white;
padding: 50px;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.tooltip {
/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
font-size: 14px;
background-color: white;
opacity: 0.9;
}
</style>
</head>
<body>
<h1>Poor Educational Outcomes and Links to Poverty</h1>
<p>From the 2014 Annie E. Casey Foundation, KIDS COUNT Data Book. Percentage of childhood poverty vs. percentage of 8th graders listed as proficient in mathematics, by US state. Source: <a href=http://www.aecf.org/resources/the-2014-kids-count-data-book/auxiliary-materials/>aecf.org</a>, 2014. Mouse over points to see data for each state in 2005 (green points) and 2013 (blue points). </p>
<p>While the overall correlation is for poorer performance with greater poverty there also appears to be a general trend for greater mathematical performance between 2005 to 2013...however, looking state by state this often seems to occur with a corresponding increase in poverty <em>(many, but not all states move up (better math performance) and to the right (increase poverty) from 2005 to 2013).</em> <br><br>What does this say about the actual relationship between poverty and performance <em>(at least using this metric)?</em></p>
<div id="legend"></div>
<script type="text/javascript">
var margin = {top: 20, right: 0, bottom: 60, left: 130},
width = 900 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var color = d3.scale.ordinal()
.range(["#1f77b4", "#98df8a"])
.domain(d3.range(0,1));
var xScale = d3.scale.linear()
.range([ margin.bottom, width - margin.top - margin.bottom ]);
var yScale = d3.scale.linear()
.range([ margin.top, height - margin.right ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(9)
.tickFormat(function(d) {
return d + "%";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
var svg = d3.select("body")
.append("svg")
.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("Education_Poverty.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.child_pov;
}),
d3.max(data, function(d) {
return +d.child_pov;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.math_proficient;
}),
d3.min(data, function(d) {
return +d.math_proficient;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) {return d.state});
circles.attr("cx", function(d){
return xScale(d.child_pov);
})
.attr("cy", function(d) {
return yScale(d.math_proficient);
})
.attr("r", 6)
.attr("stroke", "grey")
.attr("fill", function (d) {
if(d.state == "United_States") {
return "#e377c2";
} else {
return color(d.year);
} });
circles.on("mouseover", function(d){
var states = d3.selectAll('circle.' +d.state)
.attr("r", 8)
.attr("fill","orange")
var tooltips = d3.select('svg').append('g');
var rect = tooltips.selectAll('rect')
.data(states.data())
.enter()
.append('rect')
.attr('class','tooltip')
.attr('x', 200)
.attr('y', function (d) {
if(d.year == 2005) {
return 60;
} else {
return 80;
} })
.style("opacity",0.95)
.style("fill", 'white');
var text = tooltips.selectAll('text.tooltip')
.data(states.data())
.enter()
.append('text')
.attr('class','tooltip')
.html( function(d) {
return "&#160;&#160;&#160;" + d.year + ": " + d.state + ", Poverty: " + d.child_pov + "%, Math: " + d.math_proficient + "%" ;})
.attr('x', 200)
.attr('y', function (d) {
if(d.year == 2005) {
return 60;
} else {
return 80;
} })
.style('color','black')
.style('font-size','12px')
.style('font-family', 'sans-serif');
var textSize = text.node().getBBox();
rect.attr("height", textSize.height + 2)
.attr("width", textSize.width + 10);
});
circles.on("mouseout", function(d) {
d3.select('svg').selectAll('text.tooltip').remove();
d3.select('svg').selectAll('rect').remove();
d3.selectAll('circle.' +d.state)
.attr("r", 6)
.attr("fill", function(d) {
if(d.state == "United_States") {
return "#e377c2";
} else {
return color(d.year);
} });
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + 10) + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom/1.4) //smaller divider moves down
.attr("x",width/2.8)
.text("Percentage of Children Living in Poverty")
.attr("font-family","serif")
.attr("font-size","16px");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.bottom - 10) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
.attr("x",-height/2) //smaller divider moves up
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Percentage of 8th Graders Proficient in Math")
.attr("font-family","serif")
.attr("font-size","16px");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment