JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <style type="text/css">

text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  stroke: #999;
  pointer-events: all;
}

circle.parent {

  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

circle.child {
  pointer-events: none;
}

    </style>
  </head>
  <body>
    <h2>
      Flare code size<br>
      circle packing</h2>
      <select>
          <option value="size">2012-13</option>
          <option value="area">2013-14</option>
        </select>
        <div id="main"></div>
        <div id="footer">Some text</div>
    <script type="text/javascript" src="https://dl.dropbox.com/u/2225384/d3/d3.js"></script>
    <script type="text/javascript" src="https://dl.dropbox.com/u/2225384/d3/d3layout.js"></script>

CSS

body {
  font: 300 36px "Helvetica Neue";
  position: relative;
  width: 960px;
}

a:link, a:visited {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #666;
}

blockquote {
  margin: 0;
}

blockquote:before {
  content: "“";
  position: absolute;
  left: -.4em;
}

blockquote:after {
  content: "”";
  position: absolute;
}

body > ul {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 64px;
}

h1, h2, h3 {
  font-weight: inherit;
  margin: 0;
}

h2, h3 {
  text-align: right;
  font-size: inherit;
  position: absolute;
  bottom: 0;
  right: 0;
}

h2 {
  font-size: 24px;
  position: absolute;
}

h3 {
  bottom: -20px;
  font-size: 18px;
}

.invert {
  background: #1f1f1f;
  color: #dcdccc;
}

.invert h2, .invert h3 {
  color: #7f9f7f;
}

.string, .regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

.number {
  color: #369;
}

.class, .special {
  color: #1181B8;
}

body > svg {
  position: absolute;
  top: -80px;
  left: -160px;
}

JavaScript

var w = 900,
    h = 800,
    r = 720,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root;

var cola = (d3.select("select").node().value == "size")

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size; })

var vis = d3.select("#main").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

var jsonl = {"name": "","children": [{"name": "A","children": [{"name": "AA","children": [{"name": "AAB", "size": "10", "area": "10"}]},{"name": "AB","children": [{"name": "ABB", "size": "20", "area": "20"}]}]}]};

//d3.json(jsonl, function(data) {
json = JSON.parse( jsonl );
  node = root = data;

  var nodes = pack.nodes(root);

  vis.selectAll("circle")
      .data(nodes)
      .enter().append("svg:circle")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return cola ? d.cola : d.colb; })
      .on("click", function(d) { return zoom(node == d ? root : d); });

  vis.selectAll("text")
      .data(nodes)
    .enter().append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .style("opacity", function(d) { return d.r > 100 ? 1 : 0; })
      .text(function(d) { return d.name; });

  d3.select(window).on("click", function() { zoom(root); });

  d3.select("select").on("change", function() {
  pack.value(this.value == "size" ? function(d) { return d.size; } : function(d) { return d.area; }).nodes(root);
  cola = (this.value == "size");
  zoom(root);


});

function zoom(d, i) {
  var k = r /...