How to make a dendrogram with the D3 Library (Part 4)

This is the fourth of a series of articles illustrating how to develop a dendrogram, using the D3 JavaScript Library, built on the basis of a particular data structure contained within a JSON file.

Read the article:

In the previous article we created a dendrogram in which the ultrametric distances were taken into account.

Fig. 1: Dendrogram

In This article we will see how it is possible to manage an additional distance between the various nodes, distance that is expressed within the Dendrogram through the vertical position of the various knots.

Fig. 2: The Dendrogram with a further distance

We have seen in previous articles that the position of the various nodes of the Dendrogram is expressible in the JSON structure by attributing the values (x, y) to the corresponding x and Y attributes of each node.

So to get the dendrogram expressed in Figure 2, let’s edit the following JSON structure, saving it as dendrogram03.json.

As we can see, this time all nodes have an X-value and a Y-value defined within it.

Now we implement the Web page with which we will represent our dendrogram.

Now let’s look at all the code changes from the previous article together. Since we need to define an additional scale (Y-axis) that manages the extension of X-values within the JSON structure, we also define Xmax and xmin for X-values.

Within the iteration for the search for the maximum and minimum values must include, in addition to the attribute Y, also the attribute x.

We define the new distance on the y-axis, defining a Y-scale, appropriately sending the domain and the range.

Now also the values x and y must be represented in scale and then make the appropriate modifications to the code:

Finally we add an additional axis to our Dendrogram, taking care to place it at the right edge of the figure. We also draw within it (as we did for the x-axis) the ticks and the corresponding numeric values:

That’s where we got a dendrogram at two distances.

With this is finished the fourth article on Dendrograms.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.