d3.js Bubble Chart Example - Jquery
How to create bubble chart in d3 js?
Snippet Code
Rate this page :
|
[ 1 votes]
|
d3.js bubble charts are used to encode the data in the area of circles. Bubble charts are more simple and accurate like bar charts, bubble charts can contain hundreds of values in it. The sample code to create bubble chart in d3 js is given below.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var diameter = 710,
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("bubble.json", function(error, root) {
if (error) throw error;
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(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.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
bubble.json:
---------------
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "hscripts", "size": 938},
{"name": "statsmonkey", "size": 812},
{"name": "easycalculations", "size": 714},
{"name": "shorttutorials", "size": 643}
]
},
{
"name": "graph",
"children": [
{"name": "tufing", "size": 534},
{"name": "quotespick", "size": 431},
{"name": "worlddomainstats", "size": 840},
{"name": "hibihi", "size": 114},
{"name": "svgimages", "size": 216}
]
},
{
"name": "optimization",
"children": [
{"name": "tufing", "size": 74}
]
}
]
}
]
}
