d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

mbostock/d3

101 lines (95 loc) • 13.6 kB

HTML

View Raw

100

101

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Bubble Chart</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='bubble_chart'>Bubble Chart</h1> <div class='gallery' id='chart'> </div><link href='bubble.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='bubble.js' type='text/javascript'> </script> Implementation based on work by <a href='http://jheer.org/'>Jeff Heer</a>. Data shows the <a href='http://flare.prefuse.org/'>Flare</a> class hierarchy, also courtesy Jeff Heer. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 var r = 960, 2 format = d3.format(",d"), 3 fill = d3.scale.category20c(); 4 5 var bubble = d3.layout.pack() 6 .sort(null) 7 .size([r, r]); 8 9 var vis = d3.select("#chart").append("svg:svg") 10 .attr("width", r) 11 .attr("height", r) 12 .attr("class", "bubble"); 13 14 d3.json("flare.json", function(json) { 15 var node = vis.selectAll("g.node") 16 .data(bubble(classes(json)) 17 .filter(function(d) { return !d.children; })) 18 .enter().append("svg:g") 19 .attr("class", "node") 20 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 21 22 node.append("svg:title") 23 .text(function(d) { return d.data.className + ": " + format(d.value); }); 24 25 node.append("svg:circle") 26 .attr("r", function(d) { return d.r; }) 27 .style("fill", function(d) { return fill(d.data.packageName); }); 28 29 node.append("svg:text") 30 .attr("text-anchor", "middle") 31 .attr("dy", ".3em") 32 .text(function(d) { return d.data.className.substring(0, d.r / 3); }); 33 }); 34 35 // Returns a flattened hierarchy containing all leaf nodes under the root. 36 function classes(root) { 37 var classes = []; 38 39 function recurse(name, node) { 40 for (var childName in node) { 41 var child = node[childName]; 42 if (isNaN(child)) { 43 recurse(childName, child); 44 } else { 45 classes.push({ 46 className: childName, 47 packageName: name, 48 value: child 49 }); 50 } 51 } 52 } 53 54 recurse(null, root); 55 return {children: classes}; 56 } </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>