robfaraj/bubble.css

## bubble.css
circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
}

## dorling.js
var r = 960,
    format = d3.format(",d"),
    fill = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([r, r]);

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", r)
    .attr("height", r)
    .attr("class", "bubble");

var data
d3.json( 'sample.json', function(json) {

  data = classes(json);

  var node = vis.selectAll("g.node")
      .data( bubble.nodes(data).filter( function(d) { return !d.children; } ) )
    .enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("svg:title")
      .text(function(d) { return d.className + ": " + format(d.value); });

  node.append("svg:circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return fill(d.packageName); });

  node.append("svg:text")
      .attr("text-anchor", "middle")
      .attr("dy", ".3em")
      .text(function(d) { return d.className.substring(0, d.r / 3); });

  setInterval(function(){

      // simulate new values for existing circles
      delete data.r
      delete data.x
      delete data.y
      var i = 0;
      for (i = 0, len = data.children.length; i < len; i++){
          var c = data.children[i]
          c.value = c.value + Math.floor(Math.random() * (20 - 3 + 1) + 3);
          delete c.r
          delete c.x
          delete c.y
          data.children[i] = c;
      }

      // simulate addition of new circles (one per iteration)
      data.children[ i ] = { value: Math.floor(Math.random() * (40 - 5 + 1) + 5),
                             packageName: 'TestPackage',
                             className: 'TestClassName' };

    var newest = data.children[ i ];

    var nodes = vis.selectAll("g.node").data( bubble.nodes( data ).filter( function(d) { return !d.children; } ) );

    var newNode = nodes.enter().append("svg:g").attr("class", "node");

    newNode.append("svg:title")
            .text(newest.packageName);

    newNode.append("svg:circle")
           .attr("r", 0)
           .style("fill", "#cc0000" );

    newNode.append("svg:text")
           .attr("text-anchor", "middle")
           .attr("dy", ".3em")
           .text( newest.className );

    nodes
      .transition()
        .duration(1000)
        .attr("transform", function(d) { return "translate(" + (d.x) + "," + d.y + ")"; })
        .select("circle")
          .transition()
          .duration(1000)
          .attr("r", function(d) { return d.r; } );

  }, 3000);
});

// 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};
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Dorling Cartogram</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
    <link type="text/css" rel="stylesheet" href="bubble.css"/>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="dorling.js"></script>
  </body>
</html>

## sample.json
{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "good", "size": 30},
      {"name": "riddance", "size": 10},
      {"name": "to", "size": 8},
      {"name": "bad", "size": 13},
      {"name": "rubbish", "size": 4}
     ]
    }
   ]
  }
 ]
}
	circle {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	}
	var r = 960,
	format = d3.format(",d"),
	fill = d3.scale.category20c();

	var bubble = d3.layout.pack()
	.sort(null)
	.size([r, r]);

	var vis = d3.select("#chart").append("svg:svg")
	.attr("width", r)
	.attr("height", r)
	.attr("class", "bubble");

	var data
	d3.json( 'sample.json', function(json) {

	data = classes(json);

	var node = vis.selectAll("g.node")
	.data( bubble.nodes(data).filter( function(d) { return !d.children; } ) )
	.enter().append("svg:g")
	.attr("class", "node")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	node.append("svg:title")
	.text(function(d) { return d.className + ": " + format(d.value); });

	node.append("svg:circle")
	.attr("r", function(d) { return d.r; })
	.style("fill", function(d) { return fill(d.packageName); });

	node.append("svg:text")
	.attr("text-anchor", "middle")
	.attr("dy", ".3em")
	.text(function(d) { return d.className.substring(0, d.r / 3); });

	setInterval(function(){

	// simulate new values for existing circles
	delete data.r
	delete data.x
	delete data.y
	var i = 0;
	for (i = 0, len = data.children.length; i < len; i++){
	var c = data.children[i]
	c.value = c.value + Math.floor(Math.random() * (20 - 3 + 1) + 3);
	delete c.r
	delete c.x
	delete c.y
	data.children[i] = c;
	}

	// simulate addition of new circles (one per iteration)
	data.children[ i ] = { value: Math.floor(Math.random() * (40 - 5 + 1) + 5),
	packageName: 'TestPackage',
	className: 'TestClassName' };

	var newest = data.children[ i ];

	var nodes = vis.selectAll("g.node").data( bubble.nodes( data ).filter( function(d) { return !d.children; } ) );

	var newNode = nodes.enter().append("svg:g").attr("class", "node");

	newNode.append("svg:title")
	.text(newest.packageName);

	newNode.append("svg:circle")
	.attr("r", 0)
	.style("fill", "#cc0000" );

	newNode.append("svg:text")
	.attr("text-anchor", "middle")
	.attr("dy", ".3em")
	.text( newest.className );

	nodes
	.transition()
	.duration(1000)
	.attr("transform", function(d) { return "translate(" + (d.x) + "," + d.y + ")"; })
	.select("circle")
	.transition()
	.duration(1000)
	.attr("r", function(d) { return d.r; } );

	}, 3000);
	});

	// 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};
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Dorling Cartogram</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<link type="text/css" rel="stylesheet" href="bubble.css"/>
	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript" src="dorling.js"></script>
	</body>
	</html>
	{
	"name": "flare",
	"children": [
	{
	"name": "analytics",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "good", "size": 30},
	{"name": "riddance", "size": 10},
	{"name": "to", "size": 8},
	{"name": "bad", "size": 13},
	{"name": "rubbish", "size": 4}
	]
	}
	]
	}
	]
	}