| license: gpl-3.0 | |
| height: 960 | |
| border: no |
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
forked from anaeliaovalle's block: Bubble Chart
| Call_Type | Count | |
|---|---|---|
| Medical Incident | 9702 | |
| Alarms | 1068 | |
| Fire | 723 | |
| Vehicle-Related | 438 | |
| Other | 379 | |
| Citizen Assist / Service Call | 271 | |
| Environmental Hazard | 204 | |
| Rescue | 91 | |
| Assist Police | 2 |
| <!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 = []; | |
| function recurse(name, node) { | |
| if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); | |
| else classes.push({Call_Type: node.Call_Type, value: node.Count}); | |
| } | |
| recurse(null, root); | |
| return {children: classes}; | |
| } | |
| </script> |