title: Script does not work locally but does on server
body: <p>I am just starting out with javascript and well, I am stuck and it's quite embarrassing too.</p>
  
  <p>First I tried to load a local json file which would not work. I found out about that quite fast.</p>
  
  <p>But when I fixed this mistake it's still not working.</p>
  
  <p>What I do have is basically a copy of <a href="http://bl.ocks.org/mbostock/4339083" rel="nofollow">http://bl.ocks.org/mbostock/4339083</a> which works in my browser, while my attempt does not.</p>
  
  <p>Now I have two files:</p>
  
  <p>data.js</p>
  
  <pre><code>var json =
  {
      "name":"flare",
      "children":
      [
  ...
  </code></pre>
  
  <p>This is so I have my json ready without the need of a webserver</p>
  
  <p>And I have an html file with the script:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
      .node {
          cursor: pointer;
      }
  
      .node circle {
          fill: #fff;
          stroke: steelblue;
          stroke-width: 1.5px;
      }
  
      .node text {
          font: 10px sans-serif;
      }
  
      .link {
          fill: none;
          stroke: #ccc;
          stroke-width: 1.5px;
      }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script src="data.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      alert("here");
  
      var margin = {top: 20, right: 120, bottom: 20, left: 120},
              width = 960 - margin.right - margin.left,
              height = 800 - margin.top - margin.bottom;
  
      var i = 0,
              duration = 750,
              root;
  
      var tree = d3.layout.tree()
              .size([height, width]);
  
      var diagonal = d3.svg.diagonal()
              .projection(function(d) { return [d.y, d.x]; });
  
      var svg = d3.select("body").append("svg")
              .attr("width", width + margin.right + margin.left)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      alert("there");
  
      d3.json(json, function(error, flare) {
          if (error) throw error;
  
          root = flare;
          root.x0 = height / 2;
          root.y0 = 0;
  
          function collapse(d) {
              if (d.children) {
                  d._children = d.children;
                  d._children.forEach(collapse);
                  d.children = null;
              }
          }
  
          root.children.forEach(collapse);
          update(root);
      });
  
      d3.select(self.frameElement).style("height", "800px");
  
      function update(source) {
  
          // Compute the new tree layout.
          var nodes = tree.nodes(root).reverse(),
                  links = tree.links(nodes);
  
          // Normalize for fixed-depth.
          nodes.forEach(function(d) { d.y = d.depth * 180; });
  
          // Update the nodes…
          var node = svg.selectAll("g.node")
                  .data(nodes, function(d) { return d.id || (d.id = ++i); });
  
          // Enter any new nodes at the parent's previous position.
          var nodeEnter = node.enter().append("g")
                  .attr("class", "node")
                  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
                  .on("click", click);
  
          nodeEnter.append("circle")
                  .attr("r", 1e-6)
                  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
  
          nodeEnter.append("text")
                  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
                  .attr("dy", ".35em")
                  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                  .text(function(d) { return d.name; })
                  .style("fill-opacity", 1e-6);
  
          // Transition nodes to their new position.
          var nodeUpdate = node.transition()
                  .duration(duration)
                  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  
          nodeUpdate.select("circle")
                  .attr("r", 4.5)
                  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
  
          nodeUpdate.select("text")
                  .style("fill-opacity", 1);
  
          // Transition exiting nodes to the parent's new position.
          var nodeExit = node.exit().transition()
                  .duration(duration)
                  .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
                  .remove();
  
          nodeExit.select("circle")
                  .attr("r", 1e-6);
  
          nodeExit.select("text")
                  .style("fill-opacity", 1e-6);
  
          // Update the links…
          var link = svg.selectAll("path.link")
                  .data(links, function(d) { return d.target.id; });
  
          // Enter any new links at the parent's previous position.
          link.enter().insert("path", "g")
                  .attr("class", "link")
                  .attr("d", function(d) {
                      var o = {x: source.x0, y: source.y0};
                      return diagonal({source: o, target: o});
                  });
  
          // Transition links to their new position.
          link.transition()
                  .duration(duration)
                  .attr("d", diagonal);
  
          // Transition exiting nodes to the parent's new position.
          link.exit().transition()
                  .duration(duration)
                  .attr("d", function(d) {
                      var o = {x: source.x, y: source.y};
                      return diagonal({source: o, target: o});
                  })
                  .remove();
  
          // Stash the old positions for transition.
          nodes.forEach(function(d) {
              d.x0 = d.x;
              d.y0 = d.y;
          });
      }
  
      // Toggle children on click.
      function click(d) {
          if (d.children) {
              d._children = d.children;
              d.children = null;
          } else {
              d.children = d._children;
              d._children = null;
          }
          update(d);
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>as you can see it's now basically a 1:1 copy.</p>
  
  <p>When I open that .html file though, my page stays blank.</p>
  
  <p>How can this be? I understand that this would happen if I'd try to load a local .json file via the <code>d3.json</code> as that would try doing a http request, which would fail without a webserver to handle it.</p>
  
  <p>But now that the json data is saved in a variable this behaviour makes no sense to me.</p>
  
  <p>Please enlighten me! I'm trying to figure this out for a while now.</p>