title: How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
body: <p>I wish to load a JSON data array from within a file to generate a collapsible tree diagram per the <a href="http://bl.ocks.org/mbostock/4339083" rel="nofollow noreferrer">Mike Bostock example here</a>. The example uses a correctly formatted external JSON file and loads it using the d3.json function.</p>
  
  <p>I wish to be able to load a json array from within the file, which is the result of the generation of a multi-level array from a flay array (per the <a href="https://stackoverflow.com/questions/17847131/generate-multilevel-flare-json-data-format-from-flat-json">example question here</a>). </p>
  
  <p>A <a href="http://bl.ocks.org/d3noob/raw/8273682/" rel="nofollow noreferrer">sample file I have stood up on bl.ocks.org / GitHub</a> shows both parts of what I am trying to achieve without the crucial part of taking the multi-level JSON data and joining it to the collapsible tree diagram</p>
  
  <p>In short. I declare the following data inside the file;</p>
  
  <pre><code>var data = [
       { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
       { "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
       { "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 },
       { "name" : "new_name2", "parent":"ABC", "relation": "foo", "depth": 2 },
       { "name" : "Foo", "parent":"DEF", "relation": "rel", "depth": 2 }
      ];
  </code></pre>
  
  <p>Which is then run through this portion of code...</p>
  
  <pre><code>var dataMap = data.reduce(function(map, node) {
      map[node.name] = node;
      return map;
  }, {});
  
  // create the tree array
  var treeData = [];
  data.forEach(function(node) {
      // add to parent
      var parent = dataMap[node.parent];
      if (parent) {
          // create child array if it doesn't exist
          (parent.children || (parent.children = []))
              // add node to child array
              .push(node);
      } else {
          // parent is null or missing
          treeData.push(node);
      }
  });
  </code></pre>
  
  <p>Which converts the array into multi-level json as follows (it is also pushed to the screen for reference);</p>
  
  <pre><code>[
    {
      "name": "DEF",
      "parent": "null",
      "relation": "null",
      "depth": 0,
      "children": [
        {
          "name": "ABC",
          "parent": "DEF",
          "relation": "ghi",
          "depth": 1,
          "children": [
            {
              "name": "new_name",
              "parent": "ABC",
              "relation": "rel",
              "depth": 2
            },
            {
              "name": "new_name2",
              "parent": "ABC",
              "relation": "foo",
              "depth": 2
            }
          ]
        },
        {
          "name": "Foo",
          "parent": "DEF",
          "relation": "rel",
          "depth": 2
        }
      ]
    }
  ]
  </code></pre>
  
  <p>But then I have to load the same data from an external file in order to get it into the collapsible tree diagram. The code that does this is as follows;</p>
  
  <pre><code>d3.json("example.json", function(error, DEF) {
    root = DEF;
    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);
  });
  </code></pre>
  
  <p>With the diagram looking like this...</p>
  
  <p><img src="https://i.stack.imgur.com/27YSm.png" alt="enter image description here"></p>
  
  <p>I'm pretty sure I've just had some sort of mental block that is doing my head in and that this is a simple answer, but it has defeated me for a few hours now.</p>
  
  <p>How do I pass the correctly formatted JSON data from the formatting portion of the code to the diagram part?</p>
  
  <p>Thanks for your help.</p>
  
  <p>EDIT: I've added a <a href="http://jsfiddle.net/LGvha/" rel="nofollow noreferrer">JSFiddle with the suggested edits from Jesus here (http://jsfiddle.net/LGvha/)</a>.</p>