xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Scatterplot</title> <script type="text/javascript" src="https://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=https://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 "   " + 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> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js