A Horizontal Tree Diagram Explained
Understand how to transform vertical tree diagrams into horizontal layouts in D3 by swapping axes, rotating elements, and adjusting node and label positions. Learn to manage coordinate changes and margins to clearly present hierarchical data visually.
We'll cover the following...
As we discussed at the start of the previous section, we wanted to start describing tree diagrams with a vertical version because there was an added degree of complexity with the horizontal version that might cause some confusion. If you have worked through and understood the vertical version, the horizontal won’t present any problems other than when you go, “Oh, I see what’s going on.” If you find yourself part way through this description of the changes to the code and can’t see what’s going on, revisit the vertical code, and come back.
Horizontal tree diagram
The graphic that we are going to generate will look like this:
The full code for this is almost identical to the code for ...