An example that uses the SVG DOM function getBBox() to highlight a text element.
Matteo Abrate nitaku
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) ha
bu
A Gosper treemap of the flare software package hierarchy. Imports, that define links between software classes, are represented using Danny Holten's hierarchical edge bundling (see Holten et al. - 2006).
The tension of the bundling is set to a very high value, to try to give bundles a river-like appearance. Other bundling methods are likely to provide better results at that, like skeleton-based ones (Ersoy et al. 2011).
Same as this example, but using a Gosper curve.
This example combines a Hilbert jigsaw treemap with an area encoding: Each cell (a class of the flare software package) is scaled accordingly to its size property. This is different from the standard approach of treemaps, that either uses the leaves' size to affect the whole map, or chooses not to display size information at all (all leaves have a unit area).
Another jigsaw treemap that uses a Hilbert space-filling curve layout to represent the flare software package hierarchy. Use the mouse to zoom and pan.
See also the Gosper version.
A jigsaw treemap that uses a Gosper space-filling curve layout to represent the flare software package hierarchy. Use the mouse to zoom and pan.
Only the first level of the tree is displayed, to avoid cluttering the map. Label placement is naively performed by placing text at the region's centroid, so the results are far from ideal. Labels are scaled according to the region area.
fixed random seed as in this force layout example random pronounceable strings random fractal treemap of Konanopii
some other improvements, such as using SVG Tiny 1.2 non-scaling strokes (see this StackOverflow question)
OlderNewer