block by nitaku 8272715

Fractal treemap of Konanopii (1,724 leaves)

Full Screen

See this gist for the full code.

An example of an unambiguous fractal treemap. See this example discussing the unambiguous representation of unordered trees, and also this other example from which the random tree Konanopii (1,724 leaves) has been taken from.

ipython
run gosper_regions_depth.py
gosperify('konanopii_1724.json','/data/_workspace/hexes.wkt.csv','regions','depth.json')
Ctrl+D

topojson --cartesian --no-quantization -p depth -p label -o regions_depth.topo.json depth.json regions/0.json regions/1.json regions/2.json regions/3.json regions/4.json regions/5.json regions/6.json regions/7.json

gosper_regions_depth.py produces both the treemap’s regions and depth levels as GeoJSON (then converted into TopoJSON as usual). A python generator is used to enumerate the leaves without creating a copy of them (similar to the code found in this StackOverflow question).

Only the first two levels are shown, to avoid cluttering. Labels are naively placed at the centroid of the corresponding region, leading to unoptimal placement in many cases (e.g. “Sebo”).

The color scale, supporting trees with a maximum of ten levels, is adapted from Gretchen N. Peterson’s Cartographer’s Toolkit (page 40 - the scale have been reversed and blended with white). The font is Lacuna, by Peter Hoffmann, and was chosen because of its good readability at small sizes.

The halo around labels is implemented with a SASS mixin that defines multiple text-shadows. White blending leverages the possibility of leaving the hue of white undefined in d3’s HCL representation, producing a correct HCL interpolation (see this discussion for more info).

index.js

index.html

gosper_regions_depth.py

index.coffee

index.css

index.sass