Making Tree Diagram from Data (part II)

In the previous we talked about generating tree diagram in the basis of flat data. We have also talked about data that will be provided externally. In this article we will learn how to use externally provided data to generate a tree diagram.

Tree diagram based upon external data:

We have used data that we have declared from within the file itself. Being able to import data from an external file is an important feature that we need to know how to implement.

The first change that we need to make is to remove the section of code that declares our data. But don’t throw it away since we will use it to create a separate file called treeData.json. It’s contents will be:

[
  {
    "name": "Parent Level",
    "parent": "null",
    "chi#ldren": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Level 2: B",
        "children":[{
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        {
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        {
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        ]
      }
    ]
  }
]

As we can see in the above we did not used the var treedata. Because in time of creating json file,we only use the data format. In many cases we could have flat array data as a json file. In those scenario we also have to imply the technique for flat data implementing. As a flat data the above dataset could look like

var data = [
    { "name" : "Level 2: A", "parent":"Top Level" },
    { "name" : "Top Level", "parent":"null" },
    { "name" : "Son of A", "parent":"Level 2: A" },
    { "name" : "Daughter of A", "parent":"Level 2: A" },
    { "name" : "Level 2: B", "parent":"Top Level" },
    {"name" : "Son of B", "parent":"Level 2: B" },
    {"name" : "Son of B", "parent":"Level 2: B" },
    {"name" : "Son of B", "parent":"Level 2: B" }
    ];

Then all we need to do is change the portion of the code that declared the root variable and updates the diagram;

root = treeData[0];
  update(root);

Into a small section that uses the d3.json accessor to load the file treeData.json. We also have to correctly address the file. This one assumes that the treeData,json file is in the same directory as the html file we are opening.

d3.json("treeData.json", function(error, treeData) {
  root = treeData[0];
  update(root);
});

It then declares the variable root in the same way and calls the update function to draw the tree diagram.

In all these articles we have described D3 tree structures many prospects. But there is also a feature we didn’t talk about in these articles.
With the help of that feature we can make the tree not only vertical or horizontal but also diagonal. It needs a little bit complexity to make that diagram. That’s why we are going to discuss it in the next article.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *