title: How to load external JSON files into D3?
body: <p>I'm having a problem with loading an external JSON file, <code>data.json</code> into this D3.js script. I don't know if this is important, but I'm running a server with Python 3 and on <code>0.0.0.0:8888</code>. Here's the issue that is troubling me:</p>
  
  <ul>
  <li>When I explicitly define a variable with JSON data and use <code>console.log</code>, then the Chrome Developer console shows that an object is being outputted by the script.</li>
  <li>When I use <code>d3.json</code> to load an external JSON file with an array of objects, then the Chrome Developer console outputs <code>undefined</code>.</li>
  </ul>
  
  <p>JSON file - <code>data.json</code></p>
  
  <pre><code>[{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]
  </code></pre>
  
  <p>Website - <code>index.html</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script src="//d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script&gt;
  var data;
  d3.json("data.json", function(d) {
      data = d;
  });
  console.log(data);
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When run, the console outputs <code>undefined</code> instead of outputting the contents of the JSON object that is inside of the array sotred in the <code>data.json</code> file. </p>
  
  <p>However, the second method works perfectly fine and the console outputs <code>[Object]</code>, indicating that the JSON was successfully detected. </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script src="//d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script&gt;
  var data = [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},];
  console.log(data);
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong here? I've tried adjusting the JSON object, putting <code>console.log</code> inside of the D3 function, but nothing seems to work.</p>
  
  <p><strong>Edit:</strong> The weird part is that when I change the JSON file to this, it works perfectly:</p>
  
  <pre><code>{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}
  </code></pre>