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

alt

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

2. Intermediate

neu

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
 

Neu_1

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

 

Comparison

comparison

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