title: D3.js can't load json file
body: <p>I am trying to create a D3.js <a href="http://bl.ocks.org/seliopou/4127259" rel="nofollow">packed circle diagram</a>. </p>
  
  <p>When I embed the data in the HTML file, it works fine. When I put the data in an external file, I get nothing (blank DOM, no console msgs).  </p>
  
  <p>If you uncomment the var data declaration and comment out the d3.json (and the corresponding closing parentheses) it works fine.</p>
  
  <p>I can see the "2013 Inf-2.json" file in the browser and it appears well formed (it passes jsonlint validation). It  includes everything from the first "{" through/including the last "}". Much as the embedded example.</p>
  
  <p>I'm running this through httpd (:80) on OSX Mavericks and trying to render the chart in Chrome or Safari.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script type="text/javascript" src="./d3.v3.min.js"&gt;&lt;/script&gt; 
      &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chart2"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  var w = 640, h = 480;
  /*
  var data ={ 
  "name" : "root",
       "children" : [
    {
      "name":"URIN TRACT INFECTION NOS",
      "size":12196
    },
    {
      "name":"ACUTE PHARYNGITIS",
      "size":6679
    },
    {
      "name":"PNEUMONIA ORGANISM NOS",
      "size":6452
    },
    {
      "name":"BRONCHITIS NOS",
      "size":2636
    },
    {
      "name":"CELLULITIS OF LEG",
      "size":2348
    },
    {
      "name":"OBSTR CHRONIC BRONCHITIS W (ACUTE) EXACERBATION",
      "size":2203
    } 
  ]
  }
  */
  var data = d3.json("2013 Inf-2.json", function(error, root) {
  
  var canvas = d3.select("#chart2")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
  
  var nodes = d3.layout.pack()
        .value(function(d) { return d.size; })
        .size([w, h])
        .nodes(data);
  
      // Get rid of root node
      nodes.shift();
  
      canvas.selectAll("circles")
          .data(nodes)
        .enter().append("svg:circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", function(d) { return d.r; })
          .attr("fill", "green")
          .attr("stroke", "grey");
  
   });
  &lt;/script&gt; 
  &lt;/html&gt;
  </code></pre>