d3.js Bubble Chart Example - Jquery

How to create bubble chart in d3 js?

Snippet Code


  
Rate this page :
  [ 0 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} ] } ] } ] }

Tags


Ask Questions

Ask Question