Skip to content

Instantly share code, notes, and snippets.

@anaeliaovalle
Last active March 19, 2017 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anaeliaovalle/e3bafe7893271fa227c2776607f52174 to your computer and use it in GitHub Desktop.
Save anaeliaovalle/e3bafe7893271fa227c2776607f52174 to your computer and use it in GitHub Desktop.
Bubble Chart
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

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: 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("bubble.csv", function(d) {
d.value = +d["Count"];
d.Call_Type = d["Call_Type"]
return d;
}, function(error, data) {
if (error) throw error;
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.Call_Type); })
.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 > 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");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment