block by nitaku 7023794

Gosper regions

Full Screen

A set of elements that have been classified is sorted by class to produce a sequence. This sequence is fed into a layout determined by a Gosper space-filling curve, that produces a region of contiguous hexagonal cells for each class. Reload the page to create a new random sequence.

See this example for an explanation of the layout.

This technique can be used to create a special type of treemaps, that takes advantage of users’ familiarity with cartographical representations (Auber et al. 2011). Regions are fairly recognizable in shape, thus helping users’ orientation and graph revisitation (Ghani et al. 2011).

The use of space-filling curves for drawing treemaps is introduced in Wattenberg 2005. The paper also highlights some interesting properties of these layouts, namely the good aspect ratio of the obtained regions and their ability to preserve the ordering of the input sequence. This last property makes the technique a good choice in cases where the ordering is meaningful, but it also gives the layout the ability to represent slight changes in the input with similar diagrams without “mixing” too much the regions (stability). Reload this example to see how the layout changes. Typical treemaps do not behave like that, making them a less-than-optimal choice for realizing multiple diagrams that show the evolution of a hierarchy (Auber et al. 2011).

These properties come at the expense of another feature of treemaps: the evaluation and comparison of the area of regions. This characteristic is not completely lost, but only made more difficult for the user to see. Please note that in some cases it could actually be better, for example when a typical, rectangular treemap produces a region with a very big aspect ratio (in some corner cases the region could actually be invisible).

This layout, like the classical treempas, uses area encoding (i.e. the area of a specific region is determined by input data), but in a different, “discretized” way: Each cell represents a unit, like a unit chart (Robert L. Harris 2000 - Information Graphics: A Comprehensive Illustrated Reference), so that the size of the biggest region is proportional to the length of the input sequence (this is not true for classical treemaps, where the size of the diagram is fixed). Also, the smallest possible region (a cell) has an optimal aspect ratio, and the level of detail that’s needed to see tiny regions directly depends from the size of a cell’s representation.

index.js

index.html

index.coffee

index.css

index.sass