treemap

Introduced by Ben Shneiderman in 1991, a treemap recursively subdivides area into rectangles. As with adjacency diagrams, the size of any node in the tree is quickly revealed. “Squarified” treemaps use approximately-square rectangles, which offer better readability and size estimation than naïve “slice-and-dice” subdivision. - https://github.com/mbostock/d3/wiki/Treemap-Layout - D3.js provides a treemap for data visualization.

Seen below, this treemap shows the whole contents of a directory tree on your Windows hard drive. The treemap represents each file as a colored rectangle, the area of which is proportional to the file's size. The rectangles are arranged in such a way, that directories again make up rectangles, which contain all their files and subdirectories. So their area is proportional to the size of the subtrees. The color of a rectangle indicates the type of the file, as shown in the extension list. The cushion shading additionally brings out the directory structure. - http://windirstat.info/

Back in the late 80s, I read Shneiderman’s book Designing the User Interface, which had a profound effect on me. One rule I still remember is 7 ± 2 because people can generally store 5 – 9 things in their short term memory. In application, this means that menus should have between 5-9 items. More than 9 requires the user to waste extra time sorting through all the options.