Skip to content

Instantly share code, notes, and snippets.

@o314
o314 / README.md
Created February 18, 2018 19:03 — forked from nitaku/README.md
Isometric treemap (flare)

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 de

@o314
o314 / README.md
Created February 18, 2018 19:02 — forked from nitaku/README.md
Isometric "treemap"

A treemap algorithm is used to area-encode an array of random values, while an isometric projection is used to length-encode a second random value. Occlusion is extremely limited by the ordering of the treemap algorithm, making the diagram fairly readable (compare with a bar chart example that does not exhibit this property). This is possible because parallelepipedons are drawn by following the same ordering used by the treemap (to be honest, we tried and succedeed in using this method, but we are not aware of the internals of the treemap ordering algorithm that makes this possible).

An interaction tecnique is also put into place to let users focus on specific parallelepipedons by making the other ones translucent. This can be used to better evaluate their height. Because there are no fully occluded parallelepipedons, there is always a way to select a specific one.

Implementation note: we formerly used z as the name for the z axis, but this conflicted with