Ex. 5 Scatterplot with cross-linked mouseover

forked from devdiva8's block: Ex. 5 Scatterplot with cross-linked mouseover

<!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;
 
 		   }
   	   
	    h1, p {
		           position: relative;
		           left: 10px;
		           color: #333333;  }
				   
			h1 {font-size:24px;}	   
			   
		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;         
		   }		   
		   
		   
		   	
		</style>
	</head>
	
	<body>
		<div id="wrapper">
		<h1>Algebra Scores for U.S. 8th Grade Students by Race/ethnicity: 2013<h1>
			<script type="text/javascript">		
		
			var w = 840;  
			var h = 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 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);

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

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