A more engineered example of a space-filling curve layout (see also this random fractal map), using the Gosper curve to displace the leaves of a tree (or a sequence) in a compact, 2D representation. Siblings are placed near to each other, so leaves that are “near” according to the hierarchy are also near to each other in this representation. Please note that internal nodes (non-leaf ones) cannot be represented with this technique. Only the sequence of leaves is shown. Therefore, this layout is particularly suited for datasets in which leaves are “more important” than internal nodes.
Visually, the layout is reminiscent of geographical maps. The color of the hexagonal cells indicates the depth of the corresponding leaf, like a sort of elevation map. As it’s common for digital maps, you can zoom and pan the view.
This example is different from the previous ones about fractal maps: the layout step (i.e. decide where to place each leaf) has been given its own Javascript module. Subsequent process (such as creating a fractal map, a.k.a. jigsaw treemap) can be performed using the coordinates given by this layout module. It is also more easy to modify the layout to use a different space-filling curve (e.g. Hilbert).
The example shows the flare software package: each hexagonal cell represents a class within the package. Classes are displaced according to their position in the pacakage hierarchy (not shown). Class size is also not represented.
We assume the package hierarchy to be an unordered tree. As such, a canonical sorting is performed before feeding the tree into the layout.
Merging of hexagonal regions (to obtain the land boundary) is performed by the powerful clipper.js library (documentation).