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.
testing with different data
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
text { | |
font: 10px sans-serif; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var diameter = 960, | |
format = d3.format(",d"), | |
color = d3.scale.category20c(); | |
var bubble = d3.layout.pack() | |
.sort(null) | |
.size([diameter, diameter]) | |
.padding(1.5); | |
var svg = d3.select("body").append("svg") | |
.attr("width", diameter) | |
.attr("height", diameter) | |
.attr("class", "bubble"); | |
d3.json("test.json", function(error, root) { | |
var node = svg.selectAll(".node") | |
.data(bubble.nodes(root) | |
.filter(function(d) { return !d.children; })) | |
.enter().append("g") | |
.attr("class", "node") | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
node.append("title") | |
.text(function(d) { return d.name + ": " + format(d.size); }); | |
node.append("circle") | |
.attr("r", function(d) { return d.r; }) | |
.style("fill", function(d) { return color(d.name); }); | |
node.append("text") | |
.attr("dy", ".3em") | |
.style("text-anchor", "middle") | |
.text(function(d) { return d.className.substring(0, d.r / 3); }); | |
}); | |
d3.select(self.frameElement).style("height", diameter + "px"); | |
</script> |
[ | |
{"name": "A","size":1200}, | |
{"name": "A","size":1300}, | |
{"name": "A","size":1400}, | |
{"name": "A","size":1500}, | |
{"name": "A","size":1600}, | |
{"name": "A","size":1700}, | |
{"name": "A","size":1800}, | |
{"name": "A","size":1900}, | |
{"name": "A","size":2100}, | |
{"name": "A","size":2200}, | |
{"name": "A","size":2300}, | |
{"name": "A","size":2400}, | |
{"name": "A","size":2500}, | |
{"name": "A","size":2600}, | |
{"name": "A","size":2700}, | |
{"name": "A","size":2800}, | |
{"name": "A","size":2500}, | |
{"name": "A","size":3000}, | |
{"name": "A","size":1500}, | |
{"name": "A","size":200}, | |
{"name": "A","size":600}, | |
{"name": "A","size":4000}, | |
{"name": "A","size":500}, | |
{"name": "A","size":2000} | |
] |