A Simple Tree Diagram Explained

Tree diagram code

We are going to work through a simple example of the code that draws a tree diagram. This is more for understanding the process rather than being a good example of code for drawing a tree diagram. It is a very limited example that lacks any real interactivity, which is one of the strengths of D3.js graphics. However, we will outline the operation of an interactive version towards the end of the chapter once we have explored some possible configuration options that we might want to make.

The graphic that we are going to generate will look like this:

You might be asking why; when introducing the topic of tree diagrams, we showed a horizontal tree and why we are now going to draw a vertical tree diagram. That would be a good question that deserves a good answer. When we look at the code for drawing a vertical tree diagram, it will look logical, and we will be able to describe it beautifully. That’s because the default standard when D3 is drawing a tree diagram is to have it going from top to bottom. When we look at a horizontal tree diagram, the diagram and the code has to be rotated by 90 degrees. This means that when we go to move or draw something in the x-direction, we will need to move in the y-direction in the code and vice versa. It has the potential to be quite confusing, so if we consider the vertical diagram first and then rotate everything, it is much easier. Trust me.

The full code for it looks like this:

Explanation

In the course of describing the operation of the file, I will gloss over the aspects of the structure of an HTML file that have already been described at the start of the book. Likewise, aspects of the JavaScript functions that have already been covered will only be briefly explained.

The start of the ...