d3.js Packed Circle Scatter Plot

Scatter plot that abuses the packed circle layout. Created for this StackOverflow question.

<html>

</head>

<body>

var
     WIDTH = 500,
      HEIGHT = 300,
      DIAMETER = 200;

var vis = d3.select('body')
      .append('svg')
      .attr('width', WIDTH)
      .attr('height', HEIGHT);

vis.append('svg:g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
      .call(xAxis);

vis.append('svg:g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
      .call(yAxis);

// normal packed layout
    var pack = d3.layout.pack()
      .size([DIAMETER - 4, DIAMETER - 4])
      .value(function(d) {
        return d.size;
      });

// classify each level
    var node = vis.datum(flareData).selectAll(".node")
      .data(pack.nodes)
      .enter().append("g")
      .attr("class", function(d) {
        // root level
        if (!d.parent) {
          return "node rootNode";
          // first level children, these are our scatter points
        } else if (d.children && !d.parent.parent) {
          return "node pointNode";
          // an intermediate circle
        } else if (d.children) {
          return "node innerNode";
          // last level packing
        } else {
          return "node innerNode packedNode";
        }
      });

// use calculated radius
    node.append("circle")
      .attr("r", function(d) {
        return d.r;
      });

// we don't care about root circle, move off page
    node.filter(".rootNode")
      .attr("transform", "translate(" + -100 + "," + -100 + ")");

// this is our scatter point
    node.filter(".pointNode")
      .attr("transform", function(d) {
        return "translate(" + xRange(d.scatX) + "," + yRange(d.scatY) + ")";
      });

// any circle in a scatter point
    node.filter(".innerNode")
      .attr("transform", function(d) {
        var iter = d;
        while (!iter.scatX) {
          iter = iter.parent;
        }
        // diff from scatter point...
        var difX = iter.x - d.x,
          difY = iter.y - d.y;
        return "translate(" + (xRange(iter.scatX) + difX) + "," + (yRange(iter.scatY) + difY) + ")";
      })

// finally label our last level
     node.filter(".packedNode")
      .append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.name;
      });
  </script>

</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js