Bubble Chart working tree

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

forked from mbostock's block: Bubble Chart

forked from anaeliaovalle's block: Bubble Chart

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

}

div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 70px;					
    height: 60px;					
    padding: 2px;				
    font: 20px avenir;		
    background: lightgrey;	
    border: 1px;		
    border-radius: 10px;			
    pointer-events: none;			
}
</style>
<svg width="960" height="600" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

width = 960
  height = 600

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", width)
    .attr("class", "bubble");
  
  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 ")

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

d3.csv("bubble.csv", function(d) {
  d.value = +d["Count"];
  d.Call_Type = d["Call_Type"]

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

var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(data))
      .filter(function(d) { return !d.children; }))
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var color = d3.scale.ordinal()
  .domain(data.map(function(d){ return d.Call_Type;}))
  .range(['#fbb4ae','#b3cde3','#98dbb7','#decbe4','#fed9a6',
  '#ffe9a8','#b9bfe3','#fddaec','#cccccc']);

node.append("circle")
      .attr("id", function(d) { return d.id; })
      .attr("r", function(d) { console.log(d);return d.r; })
      .style("fill", function(d) { return color(d.data.Call_Type); })
      .on("mouseover", function(d) {		
      div.transition()		
        .duration(150)		
        .style("opacity", .9);		
      div.html("Count: "+"<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 > 748|| d.data.Call_Type == "Other" || d.data.Call_Type == "Fire"){
       return d.data.Call_Type;
     }
     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.Call_Type)});

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.Call_Type;})
    .attr("font-size", "12px"); 
  
      
    legend.append("text")
     .attr("x",31) 
     .attr("dy", "-.2em")
     .attr("y",-10)
     .text("Call Type")
  	.attr("font-size", "17px"); 
});
  
  
  function classes(root) {
    var classes = [];

recurse(null, root);
    return {children: classes};
}

</script>

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