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 ...