Typographic Hierarchy in Tree Maps

Beside the direct usage of hierarchic methods in typography, as described in our introduction post, we also want to consider about the seemingly conceptional counterdraft – how we can improve hierarchical visualizations with typography.

Hierarchies therefore are often represented as tree. There are two major categories of visualization techniques. Firstly a classical node-link diagram, described as visible graphical edges from parents to their children. See the article about our example.

Furthermore we follow up the method of treemapping. Area based visualizations have been there for decades, but the most distinctive property, the ability of mapping hierarchical data with nested rectangles, was invented in the early 90′s by Ben Shneiderman.

treeviz_colorful

As we can see in this aged exemplar as well in many recent visualizations typography is poorly observed.

So now we want so exert a sample, which shows how easily both the visual quality and meaningfulness can be intensified. In our taxonomy it can be assigned to type “with”.  (Example shows the amount of individual words in Goethe’s tragic play “Faust” – original by Generative Design)

131204_183356_03

This is a confessedly slightly exaggerated case without any typographical optimization with equal font sizes to match as many rectangles as possible. The legibility neither in this nor in less exaggerated visualizations is well performed.

131204_183411_03

As we can see, just with the simple method of scaling text to the suitable rectangle size leads to a new quality of the visualization. A further conclusion can be found in our introduction post.

 

Interactive Version:

Sources

Introduction to Tree Maps

History of Tree Maps (Ben Shneiderman)

Example inspired by “Generative Design”