d3.layout.partition workaround

Workaround for issue described in this example, uses Lodash cloneDeep to make each chart have it's own copy of the data.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 960px;
    }
    path {
      stroke: white;
      fill-rule: evenodd;
    }
  </style>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="//cdn.jsdelivr.net/lodash/2.4.1/lodash.min.js"></script>  
</head>
<body>
  <div id='viz'></div>
  <div>
    <button onclick="larger()">Larger</button><button onclick="smaller()">Smaller</button>
  </div>
  <script>
    var charts = [];

d3.json("flare.json", function(error, root) {
    
      var countAccessorFn = function(d) { return 1; };
      var sizeAccessorFn = function(d) { return d.size; };

charts.push(makeSunburst(_.cloneDeep(root), countAccessorFn));
      charts.push(makeSunburst(_.cloneDeep(root), sizeAccessorFn));

function makeSunburst(dataRoot, valueAccessor) {

var width = 480, height = 480;
        var radius = (Math.min(width, height) / 2) - 60;
        var color = d3.scale.category20c();
        var angleScale = d3.scale.linear().range([0, 2 * Math.PI]);
        var ringRadiusScale = d3.scale.linear().range([0, radius]);

var svg = d3.select("#viz").append("svg")
            .attr({width: width, height: height});
        
        var container = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

var partition = d3.layout.partition().sort(null).value(valueAccessor);
        var nodes = partition.nodes(dataRoot);

var path = container.selectAll("path")
            .data(nodes)
          .enter().append("path")
            .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
            .attr("d", arc)
            .style("fill", function(d) { return color((d.children ? d : d.parent).name); });

return {
          addToRadius: function(radiusChange) {
            radius += radiusChange;
            ringRadiusScale.range([0, radius]);
            // leave all data the same but redraw arcs based on new radius
            path.transition().attr('d', arc);
          }
        }
      }

d3.select(self.frameElement).style("height", "600px");
    });

function larger() {
      charts.forEach(function(chart) {
        chart.addToRadius(20);
      });
    }

function smaller() {
      charts.forEach(function(chart) {
        chart.addToRadius(-20);
      });
    }
  </script>
</body>
</html>

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

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

https://cdn.jsdelivr.net/lodash/2.4.1/lodash.min.js