block by nitaku 833632f23c308ae2d58b

Isometric treemap (flare)

Full Screen

A first attempt at making a real isometric treemap. Unlike previous attempts, this experiment uses the treemap layout to actually represent a tree (in this example, the flare package hierarchy).

Treemaps are very good to show hierarchies in a compact way, and excel in the case of attributed hierarchies with a quantitative attribute (a classical example would be a file system hierarchy, in which size is given by the number of bytes of each file). However, they are not very good in representing internal nodes, parent-child relations and depth.

Nested treemaps introduce some padding between a parent and its children to better represent this aspect, losing accuracy in area encoding. Despite this improvement, hierarchy depth is still not represented.

An isometric treemap loses some clarity and compactness to introduce an intuitive representation of depth as 2.5D elevation. By controlling both the padding used by the nesting algorithm and the height of the solids, occlusion (one of the worst problems of 3D and 2.5D solutions) can be fairly limited.

index.js

index.html

index.coffee

index.css