Dendrogram with D3.js

Leave a reply

Dendrogram is a type of hierarchical visualization commonly used in data science with hierarchical clustering. In d3.js, the dendrogram looks slightly different in that the root is in the center and the nodes branch out from there. This idea continues for every parent child relationship in the data.

In this post, we will make a simple dendrogram with d3.js using   a simple json file shown below.

{

  "name": "President",

          "children": [

        { "name": "VP of Academics",

        "children":[

          {"name":"Dean of Psych"},

          {"name":"Dean of Ed"}

        ] },

       { "name": "VP of Finance" },

        { "name": "VP of Students" }

      ]

    }

You will need to save the code above as a json file if you want to make this example. In the code, this json example is called “university.json”

Making the Dendrogram

We will begin by setting up the basic svg limit as found in lines 1-19 below.
1.png

In lines 20-26, the radius of the nodes is set and added to the svg element. The clusters are set with the creation of the cluster variable. Below is the code.

1.png

In lines 27-37, we set the position of the nodes and links as well as diagonals for the path.

1

Lines 49-80, have three main blocks of code.

The first block creates a variable called nodesGroups. This code provides a place to hold the nodes and the text that we are going to create.

The second block of code is adding circles to the nodeGroups with  additional settings for the color and radius size. Lastly, the third block of code adds texts to the nodesGroups.

1.png

When all the steps have been taken, you will see the following when you run the code.

1.png

You can see how things worked. The center is the president with the vp of academics of to the right. The president has three people under him (all VPs) while the VP of academics has two people under him (deans). The colors for the path and the circle are all set in the last block of code that was discussed.

Conclusion

Dendrograms allow you to communicate insights about data in a distinctly creative way. This example was simplistic but serves the purpose of exposing you to another way  of using d3.js

Leave a Reply