title: Stacked D3JS Bubble Chart
body: <p>Hey I'm using D3JS as a chart library and I'm really interested in exploiting the cool features in the Bubble Chart. On the main <a href="http://d3js.org/" rel="nofollow noreferrer">D3JS</a> chart site the following Bubble Chart is used to compare two sets of data:</p>
  
  <p><img src="https://i.stack.imgur.com/ZvcJb.png" alt="enter image description here"></p>
  
  <p><a href="http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html" rel="nofollow noreferrer">Bubble Chart</a>. </p>
  
  <p>I was wondering if anybody actually had any idea of how to create a bubble chart like this, I'm struggling to get it work past using a size variable.</p>
  
  <p>I just really want to be able to compare two sets of data for example:</p>
  
  <p>Hostnames (45,955,158) VS Active Sites (21,335,629) </p>
  
  <p>The code I am using is below, I use JSON to retrieve my data, I'm a major newbie when it comes to js and even more so this jQuery library so would appreciate any help.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div class="four columns browserstats2003"&gt;
              &lt;h3&gt;Browser Stats 2003&lt;/h3&gt;
  
          &lt;/div&gt;        
      &lt;div class="four columns mobilephonestats"&gt;
         &lt;h3&gt;Smartphone Sales 2003&lt;/h3&gt;
         &lt;p&gt;The first smartphone had not been released in 2003.&lt;/p&gt;
                 &lt;div id=""&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>mobile.json</p>
  
  <pre><code>{
   "name": "flare",
   "children": [
    {
     "name": "analytics",
     "children": [
      {
       "name": "cluster",
       "children": [
        {"name": "Smartphone Sales", "size": 11111},
    {"name": "Smartphone Salesa", "size": 2111}
       ]
      }
     ]
    }
   ]
  }
  </code></pre>
  
  <p>js/js.js
  // JavaScript Document</p>
  
  <pre><code>$(document).ready(function () {
  
          //  2003 bubble chart
              var diameter = 360,
                  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(".mobilephonestats").append("svg")
                  .attr("width", diameter)
                  .attr("height", diameter)
                  .attr("class", "bubble");
  
              d3.json("mobile.json", function(error, root) {
                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); });
              });
  
              // Returns a flattened hierarchy containing all leaf nodes under the root.
              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");
  
  // end bubble year 
  
          });
  </code></pre>