title: Unable to re-create zoomable sunburst using d3js from example
body: <p>I am a d3js rookie and I'm trying to learn by reproducing results from existing solutions. 
  I am trying to recreate this visualization : <a href="https://bl.ocks.org/mbostock/4348373" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4348373</a> but with little success.</p>
  
  <p>I created an index.html file and copy pasted code from above :</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt; 
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  path {
    stroke: #fff;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var width = 960,
      height = 700,
      radius = (Math.min(width, height) / 2) - 10;
  
  var formatNumber = d3.format(",d");
  
  var x = d3.scale.linear()
      .range([0, 2 * Math.PI]);
  
  var y = d3.scale.sqrt()
      .range([0, radius]);
  
  var color = d3.scale.category20c();
  
  var partition = d3.layout.partition()
      .value(function(d) { return d.size; });
  
  var arc = d3.svg.arc()
      .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
      .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
      .innerRadius(function(d) { return Math.max(0, y(d.y)); })
      .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
  
  d3.json("flare.json", function(error, root) {
    if (error) throw error;
  
    svg.selectAll("path")
        .data(partition.nodes(root))
      .enter().append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
        .on("click", click)
      .append("title")
        .text(function(d) { return d.name + "\n" + formatNumber(d.value); });
  });
  
  function click(d) {
    svg.transition()
        .duration(750)
        .tween("scale", function() {
          var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
              yd = d3.interpolate(y.domain(), [d.y, 1]),
              yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
          return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
        })
      .selectAll("path")
        .attrTween("d", function(d) { return function() { return arc(d); }; });
  }
  
  d3.select(self.frameElement).style("height", height + "px");
  
  &lt;/script&gt;  
  </code></pre>
  
  <p>and then I created another file named flare.json and copy pasted the the json data into it. However when I open the index.html in a webbrowser it displays a blank page. 
  Please advise me what is going wrong and how to reproduce the results. </p>
  
  <p>When I tried a simpler example , I was able to make it work.
  the example was from here :<a href="http://christopheviau.com/d3_tutorial/" rel="nofollow noreferrer">http://christopheviau.com/d3_tutorial/</a>  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="viz"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
      var sampleSVG = d3.select("#viz")
          .append("svg")
          .attr("width", 100)
          .attr("height", 100);    
  
      sampleSVG.append("circle")
          .style("stroke", "gray")
          .style("fill", "white")
          .attr("r", 40)
          .attr("cx", 50)
          .attr("cy", 50)
          .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
          .on("mouseout", function(){d3.select(this).style("fill", "white");});
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>