Zoomable Circle Packing II

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body {
        font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
      }
      
      rect {
      	pointer-events: all;
      }
      
      circle {
      	stroke: #ddd;
      	fill: #eee;
      }
      
      circle.parent {
      	fill-opacity: 0;
      }
      
      text {
      	text-anchor: middle;
      	font-size: 11px;
      	font-weight: 300;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    
    <script>

var margin = 10,
          outerDiameter = 500,
          innerDiameter = outerDiameter - margin - margin;
          index = 1;

var x = d3.scale.linear()
          .domain([0,innerDiameter])
          .range([0, innerDiameter]);

var y = d3.scale.linear()
          .domain([0,innerDiameter])
          .range([innerDiameter,0]);

var zoom = d3.behavior.zoom()
          .x(x)
          .y(y)

var pack = d3.layout.pack()
          .size([960, innerDiameter])
          .padding(2)
          .sort(null)
          .value(function(d){ return d.size; });

var svg = d3.select('#chart')
          .append("svg")
          .attr("width", 960)
          .attr("height", outerDiameter)
        .append("g")
          .attr("transform", "translate(" + margin + "," + margin + ")")
          .call(zoom)

svg.append('rect')
          .attr("width", 960)
          .attr("height", outerDiameter)
          .attr("fill","none");

d3.json("flare.json", function(error, data) {

indexing(data,index);

var nodes = pack.nodes(data);
          
          zoom.scaleExtent([1, d3.max(nodes, function(d){ return d.index; })-1])
              .on('zoom', update)

function update() {

index = Math.floor(zoom.scale());

parent.enter().append("circle")
                .attr("class", 'parent')
                .attr("cx", function(d) { return x(d.x); })
                .attr("cy", function(d) { return y(d.y); })
                .attr("r",function(d){ return d.r * zoom.scale(); })

parent.exit().remove();

child.enter().append("circle")
                .attr("class", 'child')
                .attr("cx", function(d) { return x(d.x); })
                .attr("cy", function(d) { return y(d.y); })
                .attr("r",function(d){ return d.r * zoom.scale(); })

child.exit().remove();

svg.selectAll("text").remove();

svg.selectAll("text")
                .data(nodes.filter(function(d){ return d.index == index + 1; }))
              .enter().append('text')
                .text(function(d){ return d.name; })
                .attr("x", function(d) { return x(d.x); })
                .attr("y", function(d) { return y(d.y); })
          }

update();

// Adding an index for each nested level
          function indexing(d,i){
            d.index = i;
            if (!d.children) return;
            d.children.forEach(function(child){ indexing(child, i+1); })
          }
      })
      
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js