back to Scaled Innovation

Representing Trees with Fractal Maps

Many types of data can be represented as trees and are often shown as dendrograms. In particular, when the data consist of objects separated by known distances, many types of clustering will put them in tree form. That's what's going on here: we have city data (where distance has its familiar meaning), random data, and text from Shakespeare where "social distance" is inversely proportional to the number of times that characters have consecutive speeches (and so are probably conversing). See the same data here as dendrograms and as treemaps.

These "fractal maps" are a hybrid of dendrograms and treemaps. Topologically (and algorithmically) these are just dendrograms, folded around on themselves as this Wolfram animation vividly shows. In particular, what you see below is an H-fractal in which the branches grow only as far as the data -- so some branches are short, and some are long (and so fold back on themselves, making a dense clump). Visually these seem more like treemaps: they're rectangular and make efficient use of space. It depends whether you focus on the colored boxes (like a treemap) or the black lines and dots (an H-fractal, thus a dendrogram). This "wrought iron" version emphasizes the fractal tree structure.

Because this is a fractal implemented in a silver rectangle (aspect ratio 1:√2, the same as European A-series paper), it's all self-similar. Every box is the same shape as its parent box. So click away below and the diagram will zoom in and zoom out, letting you traverse the full extent of the data. The 100 Cities and Romeo and Juliet data show how the zooming is necessary to explore deep paths.

Performance Warning: This is all done in HTML5-canvas and won't work in non-compliant browsers (i.e., IE). The animated zooming is fast and smooth in Safari and Chrome but choppy in Firefox.
Show or , or social distances in or
Click any quadrant with branches to zoom in. It's fractal, in principle it could go on forever.
This diagram requires an HTML5 compliant browser like Safari, Firefox, or Chrome. The static image below shows what you're missing.