Ex 5 scatterplot with cross-linked mouseover; added legend

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise 5- Sorting Education data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		
			
		<style type="text/css">
			
			body {background-color: white; font-family: Lato; margin-left:10px;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: #888888;  
				stroke-opacity: .75;   
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
				 fill:#888888;  
			 }
			
            .axis text, text.axis {
                  font-size: 12px;
				  fill:#888888;
              }

text.centered {
                  text-anchor: middle;
              }		   
									
			svg { background-color: #F9F1DD;  margin-bottom:10px;   }
	
			circle {fill:#94B2BD;} 
			circle:hover {fill:SandyBrown;}

.node.active {
 		     fill: SandyBrown;
 		     stroke: #000;
 		     stroke-width: 1.8px;
 
 		   }
		   
		   .node.White  {fill:#D8C355;}
		   .node.Hispanic {fill:#d6e8e3;}
		   .node.Black {fill:#8cc7d1;}  
		   .node.All {fill:#8a8887;}
   	   
	    h1, p {
		           position: relative;
		           left: 12px;
		           color: #333333;  }
				   
			h1 {font-size:24px;}
   		 p {font-weight:normal; font-size:12px;}  
		   	   
			   
		div {text-align:left; width:650px; font-size:13px;  font-weight: normal;padding-bottom:6px; }
		
        .source {
             padding: 0;
             
             font-size: 10px;
             font-style: italic;
             position: absolute;
            
         }
    
         a {
               text-decoration: none;
               color:blue;
           }
		   
		   div.tooltip {   
		     position: absolute;              
		     width: 80px;                 
		     height: 46x;                 
		     padding-top: 3px;  
			 padding-right:3px;
			 padding-left:6px;     
			 padding-bottom: 2px;        
		     font: 12px sans-serif;        
		     background: lightsteelblue;   
		     border: 0px;      
		     border-radius: 8px;           
		     pointer-events: none;         
		   }

.legend {fill:#888888; font-size: 10px;}
		 .notes {fill:#888888; font-size: 10px;} 
	
		</style>
	</head>
	
	<body>
		<div id="wrapper">
		<h1>Algebra Scores for U.S. 8th Grade Students by Race/ethnicity: 2013<h1>
			<p>Mouseover the datapoints to see cross-linked mouseover effect.</p>
			<script type="text/javascript">		
		
			var w = 850;  //840
			var h = 290;    //220
		
			var cwidth =280; var cheight = 200;  
			var padding = [ 40, 5, 20, 55 ];

var xScale = d3.scale.linear()
					.range([ 0, cwidth - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
					.range([ padding[0], cheight - padding[2] ]);

var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("bottom")
					.ticks(5);

var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient("left")
					.ticks(5)
					.tickFormat(function(d) {
						return d + "%";
					});
										
	var div = d3.select("body").append("div")   
				    .attr("class", "tooltip")               
				    .style("opacity", 0);	
					
	 var color = d3.scale.ordinal()
			        .domain(["All races","White","Black","Hispanic"])
			        .range(["#8a8887","#D8C355","#8cc7d1","#d6e8e3",]);	
					
						
			var svg=d3.select("body").append("svg").attr("width", w).attr("height", h);

d3.csv("gr8_algebra_Ex5ALL.csv", function(data) {		
					
				data = data.filter(function(d){return (d.Jurisdiction == "Boston" || d.Jurisdiction == "Los Angeles" || d.Jurisdiction == "San Diego" ) });
						
					xScale.domain([200,            
						d3.max(data, function(d) {
							return +d.Score;
						})
					]);

yScale.domain([
						d3.max(data, function(d) {
							return +d.LunchElig;
						}), 
					d3.min(data, function(d) {
								return +d.LunchElig;		
					})
					]);
		
			
			   // Nest data by Jurisdiction
			    var cities = d3.nest()
			        .key(function(d) { return d.Jurisdiction; })
			        .entries(data);			
			
				
			    var g = svg.selectAll("g")
			        .data(cities)
			        .enter().append("g")
			   	    .attr("transform",function(d,i) {return "translate("+(cwidth*i)+",0)";}); 
										 			
 // add city label
 				g
  				 .append("text")
   				 .attr("y",(padding[0]-12))  
   				 .attr("x",(padding[3]+padding[1]+cwidth)/2-25)
				
 				  .text(function(d) {return d.key;})		
		
				g
					.append("g")
					.attr("class", "x axis")
					 .attr("transform", "translate(" + padding[3] + "," + (cheight - padding[2]) + ")")   
						
					.call(xAxis);	
				
					g
					.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")  
					.call(yAxis);

//NEW""
					g.append("rect").attr("fill", "white")
						.attr("x",padding[3])
						.attr("y",padding[0])
						.attr("width", (cwidth-padding[1]-padding[3]))
					.attr("height",(cheight-padding[0]-padding[2]));

legend.append('rect')
					       .attr('width', legendRectSize)
					       .attr('height', legendRectSize)
					       .style("fill", function(d) { return (color(d))})

legend.append('text')
					       .attr('x', legendRectSize + legendSpacing)
					       .attr('y', legendRectSize - legendSpacing)
						  .text(function(d) { return d; });
						
						 function highlight(type) {
						   if (type == null) d3.selectAll(".node").classed("active", false);
						   else d3.selectAll(".node." + type).classed("active", true);
						 }						
						
											
														
       d3.select("body")
           	.append("p")
      					.append("text")
         					 .attr("y",cheight+40)  
         				 	.attr("x",padding[3])
      					.attr("fill","#888888")
      					.attr("class", "source")
      					.text("Source: The National Assessment of Educational Progress (NAEP),")
      			     	.append("a")
      			     .attr("href", "https://nces.ed.gov/nationsreportcard/naepdata/")
      			     .append("span")
      			     .text(" https://nces.ed.gov/nationsreportcard/naepdata/"); 										
									
				});  
		</script>
	</body>
</html>

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

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