Hover over data points for tooltip built with transition and div

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>TEST 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;}

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;
             /* margin: 0px 0px 0px 32px;  */
             font-size: 10px;
             font-style: italic;
             position: absolute;
            /* top: 380px;  */
         }
    
         a {
               text-decoration: none;
               color:blue;
           }
		   
		   div.tooltip {   
		     position: absolute;           
		    /* text-align: center;     */      
		     width: 80px;   /*   was 60  */               
		     height: 46x;                 
		     padding-top: 3px;  
			 padding-right:3px;
			 padding-left:6px;   /* 2 all padding */   
			 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);

// circles					
					var circles = g.selectAll("circle") ; 
					
					circles
  					.data(function(d) {return d.values}) 
  					.enter()
					.append("circle")
					.attr("cx", function(d) {
						return (xScale(+d.Score)+ 55);   
							}) 
					.attr("cy", function(d) {
							return yScale(+d.LunchElig);
						})
						
						.attr("r", 5)    //0.1
				        .on("mouseover", function(d) {      
				            div.transition()        
				                .duration(200)      
				                .style("opacity", .9);      
				            div .html(d.Race + "<br/> Elig. for lunch pgm= " +d.LunchElig +"%  <br/> Score= " + d.Score )  
				                .style("left", (d3.event.pageX+7) + "px")     
				                .style("top", (d3.event.pageY - 28) + "px");    
				            })                  
				        .on("mouseout", function(d) {       
				            div.transition()        
				                .duration(500)      
				                .style("opacity", 0);   
							});
						
					  g.append("text")
					        .text("Eligible for lunch program*")
					        .attr("transform", function(d) {
								return "rotate(-90 0, 360)"
					        })
					        .attr("x", 260)   
					        .attr("y", (1.34*cwidth)) 
					      .attr("text-anchor", "middle")
							.attr("class", "axis") ;
					     //   .attr("opacity", 0);
						  
						  
						   g.append("text")
                    .attr("x", (cwidth/2+20))
                    .attr("y", cheight+15)
                    .attr("class", "centered axis")
                    .text("Algebra score")		
						
						
														
       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