How to generate a treemap using only squares

Question

I am currently experimenting with the gallery treemap of d3.js.

http://bl.ocks.org/4063582

Now I am wondering if I can make the treemap render all items in squares. I can only get it to render rectangles. I tried to use .mode("squarify"); but that doesn't result in the required layout. It doesn't matter that it won't use all the available space. I just want it to render squares.

Answer 1

Squarified Treemaps: http://www.win.tue.nl/~vanwijk/stm.pdf. It looks like a thorough look at the problem and includes solution pseudocode.

Abstract. An extension to the treemap method for the visualization of hierarchical information, such as directory structures and organization structures, is presented. The standard treemap method often gives thin, elongated rectangles. As a result, rectangles are difficult to compare and to select. A new method is presented to generate lay-outs in which the rectangles approximate squares. To strenghten the visualization of the structure, shaded frames are used around groups of related nodes

---

Additional Resources

Alternatively, you could create your own output based on the data as suggested here: How to use jQuery to render a JSON tree as nested HTML using divs?

Some improvements on the squarified algorithm: http://incise.org/d3-binary-tree-treemap.html

Treemaps for space-constrained visualization of hierarchies shows a history of various treemap algorithms most with the goal of reducing the rectangle ratio to 1. You might find some of the papers helpful.

This page also provides a nice break down of the various treemap algorithms.

Depending on the data, the rectangles can have very different aspect ratios, making them hard to compare: a thin long rectangle of the same area as an almost square one looks very different. Bruls, Huizing, and van Wijk therefore developed Squarified Treemaps, which optimize the placement of nodes within a level to make them as square as possible. While that is a great idea to make static treemaps more readable, it causes problems when treemaps are used to show developments over time. Ordered Treemap Layouts, developed by Shneiderman and Wattenberg, solve this problem by conserving the ordering of elements while seeking to keep nodes as square as possible, and thus produce very stable layouts.

Conclusion

The brief read at the wikipedia entry provides a good explanation on why a strictly square treemap remains difficult to achieve. Emphasis added.

To create a treemap, one must define a tiling algorithm, that is, a way to divide a rectangle into sub-rectangles of specified areas. Ideally, a treemap algorithm would create rectangles of aspect ratio close to one, furthermore preserve some sense of the ordering in the input data, and change to reflect changes in the underlying data. Unfortunately, these properties have an inverse relationship. As the aspect ratio is optimized, the order of placement becomes less predictable. As the order becomes more stable, the aspect ratio is degraded.

After researching this topic further, I agree with Lars Kotthoff that obtaining a treemap strictly with squares does not appear trivial. At least not based on existing implemented treemap algorithms. The easiest way around this might be to create your own code (JS and CSS) to generate nested divs or lis to achieve the desired final treemap look.

Addendum

• http://www.koalastothemax.com/ - this demo renders nested circles but it's obvious they all sit within squares. It might take some work but you probably could achieve the desired results using the Koalas to the Max code.

  

Answer 2

Unfortunately it is not possible to have the treemap render all items in squares, for mathematical reasons.

Here i just give you a counter-example. Suppose that, at the end of your processing, you end up with 4 categories (A, B, C, D) with the folowing surface area.

A=2
B=2
C=2
D=1

Independently of the position you give to them, it is impossible to have the final treemap with a square or even rectangle shape.

Think: in each of the following patterns you always have a missing corner

AB     AC    AD    BA    BC   BD   CA   CB   CD   DA  DB  DC 
CD     BD    BC    CD    AD   AC   BD   AD   AB   CB  AC  AB  ..there are more

because one of the square has surface area = 1.

So this is not possible to have all squares

From that paper , as mentioned by JSuar we learn that there is an optimized almost-squared representation you can have, implementing the algorithm described in the paper.

But this is an approximation.

I think that all you can do, if you really need ONLY squares, is:

1. change visualization, using for instance http://bl.ocks.org/4063530

2. hack the treemap.js code modifying line 12 as follows

   ratio = 1;

But in this latter case you could have some empty white spaces or other malfunctioning.