block by nitaku e03a1a5c1a4a95f06c3b

Isometric "treemap"

Full Screen

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 the way d3.js handles sticky treemaps, so we renamed it as h.

index.js

index.html

index.coffee

index.css