bubble.html

<!DOCTYPE html>
<style>
  
svg {
 font: 16px"Avenir";

}
  
  div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 45px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
  }


</style>
<svg width="960" height="960" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>


var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  // Define the div for the tooltip
var div = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);

  
  svg.append("text")
    .attr("x", 100)   
    .attr("y", 20 )
    .attr("dy", "3.5em" )
    .attr("text-anchor", "start")  
    .style("font-size", "28px")  
  	.style("font-weight", "bold")
    .text("SFFD Call Incidents in December 2016 ")

var pack = d3.pack()
    .size([width-150, height])
    .padding(1.5);

d3.csv("Best_PickUp_Locs.csv", function(d) {
  d.value = +d["count"];
  d.PUZone = d["PUZone"]

 	return d;
}, function(error, data) {
  if (error) throw error;

  
  var color = d3.scaleLinear()
    //.domain([-1, 0, 1])
    .range(["red", "green"]);
    
    //var color = d3.scaleOrdinal()
  //.domain(data.map(function(d){ return d.Call_Type;}))
  //.range(['#fbb4ae','#b3cde3','#ccebc5','#decbe4','#fed9a6',
  //'#ffe9a8','#b9bfe3','#fddaec','#cccccc']);
  
  var root = d3.hierarchy({children: data})
      .sum(function(d) { return d.value; })

  var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 
  
  node.append("circle")
      .attr("id", function(d) { return d.id; })
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.data.PUZone); })
      .on("mouseover", function(d) {		
    div.transition()		
      .duration(200)		
      .style("opacity", .9);	
    
      var duration = 300;
  data.forEach(function(d, i) {
    console.log(d.value);
    node.transition().duration(duration).delay(i * duration)
        .attr("r", d.value);
});
     
    
    div.html(d.data.Call_Type + ": <br>"+d.data.value  )	
      .style("left", (d3.event.pageX) + "px")		
      .style("top", (d3.event.pageY - 28) + "px");	
  })					
    .on("mouseout", function(d) {		
    div.transition()		
      .duration(500)		
      .style("opacity", 0);	
  });

  
   node.append("text")
      .text(function(d) {
     if (d.data.value > 7480){
       return d.data.PUZone;
     }
     return "";});
  
  
  var legend = svg.selectAll(".legend")
  .data(data).enter()
  .append("g")
  .attr("class","legend")
  .attr("transform", "translate(" + 780 + "," + 120+ ")");
     
 
   legend.append("rect")
     .attr("x", 0) 
     .attr("y", function(d, i) { return 20 * i; })
     .attr("width", 15)
     .attr("height", 15)
		.style("fill", function(d) { return color(d.PUZone)});
   

    legend.append("text")
     .attr("x", 25) 
    	.attr("text-anchor", "start")
     .attr("dy", "1em") 
     .attr("y", function(d, i) { return 20 * i; })
     .text(function(d) {return d.PUZone;})
    .attr("font-size", "12px"); 
  
      
    legend.append("text")
     .attr("x",31) 
     .attr("dy", "-.2em")
     .attr("y",-10)
     .text("Call Type")
  	.attr("font-size", "17px"); 

  
});

</script>