d3: Poverty and Educational Outcomes Scatterplot

This plot is ok, but it could use a legend and the mouseover effect where both years of data are highlighted for a common state only works in one direction. It works when you highlight the 2013 data (blue points), but doesn't work in reverse when you highlight green points (2005). I'm not sure how to fix this though I may have to make the separate years into separate groups.

<!DOCTYPE html>
<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;
			}
			.legend rect {
				fill:white;
				stroke:black;
				opacity:0.8;
			}

</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 non-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 down (better math performance) and to the right (increase poverty) from 2005 to 2013)</em></p>

var margin = {top: 20, right: 0, bottom: 60, left: 50},
    			width = 800 - 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.non_math_prof;
					}),
					d3.min(data, function(d) {
						return +d.non_math_prof;
					})
				]);

var circles = svg.selectAll("circle")
			      	.data(data)
			    	.enter()
			    	.append("circle");

circles.attr("cx", function(d){
			      	return xScale(d.child_pov);
					})
					.attr("cy", function(d) {
						return yScale(d.non_math_prof);
					})
					.attr("r", 6)
					.attr("stroke", "grey")
					.attr("fill", function(d) {
						if(d.state == "United_States") {
							return "#e377c2";
						} else {
						return color(d.year);
					} })
			      .on("mouseover", function(d){
			        d3.select(this)
			          .attr("r", 8)
			          .attr("fill","orange")
			          this.parentNode.parentNode.appendChild(this.parentNode); 
			        d3.select('#circle' + d.state)
			          .attr("r",8)
			          .attr("fill","orange"); 
			      })
			      .on("mouseout", function(d) {
			          d3.select(this)
			            .transition()
			            .duration(200)
			            .attr("r",6)
			            .attr("fill", function(d) {
						if(d.state == "United_States") {
							return "#e377c2";
						} else {
						return color(d.year);
					} })
			          d3.select('#circle' + d.state)
			            .transition()
			            .duration(200)
			            .attr("r", 6)
			            .attr("fill", function(d) {
						if(d.state == "United_States") {
							return "#e377c2";
						} else {
						return color(d.year);
					} });
			          })
			    	.attr("id", function(d, i) { return "circle" + d.state; })
					.append("title")
					.text(function(d) {
						return "In " + d.year + " " + d.state + "'s child poverty level was " + d.child_pov + "%, and " + d.non_math_prof + "% of 8th graders were not proficient in math";
					})
					.attr("data-legend",function(d) { return d.name});

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 Not Proficient in Math")
				      .attr("font-family","serif")
				      .attr("font-size","16px");

// 	// add legend   
				// var legend = svg.append("g")
				// 	  .attr("class", "legend")
				// 	  .attr("height", 100)
				// 	  .attr("width", 100)
				//     .attr('transform', 'translate(-20,50)')    
				      
				    
				//     legend.selectAll('rect')
				//       .data(data)
				//       .enter()
				//       .append("rect")
				// 	  .attr("x", width - 65)
				//       .attr("y", function(d, i){ return i;})
				// 	  .attr("width", 10)
				// 	  .attr("height", 10)
				// 	  .style("fill", function(d) {
				// 		if(d.state == "United States") {
				// 			return "#e377c2";
				// 		} else {
				// 		return color(d.year);
				// 	} });
				      
				//     legend.selectAll('text')
				//       .data(data)
				//       .enter()
				//       .append("text")
				// 	  .attr("x", width - 52)
				//       .attr("y", function(d, i){ return i;})
				// 	  .text(d.year);

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js