Radial Tree Improvements

In this example we have taken a basic tree visualization from the official D3 website, a Javascript-Library for web-visualizations, and asked us how we can improve this given instance in the case of typography.

Node Tree from D3js.org

Ensuing you can see the gradually modification in three illustrations:

1. Original


Evidently Problems here are the non-existing typographical hierarchy and the layout in form of distances.

2. Intermediate


Firstly we changed the font to a better readable one and added hierarchy by bolding structural elements. Additionally we optimized the distances between the labels and nodes.

3. Final


Finally several graphic variation in form of link-strength and node size and color.




In conclusion very few and slightly unsophisticated improvements lead to a considerably more readable and aesthetic visualization.