How to create a treemap using only squares

Question

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

http://bl.ocks.org/4063582

Now I am wondering if I can make a treemap to render all objects in squares. I can only get rectangles. I tried using .mode("squarify"); , but this does not lead to the required design. It does not matter that he will not use all available space. I just want it to display squares.

Answer 1

Squari fied Treemaps: http://www.win.tue.nl/~vanwijk/stm.pdf . This seems like a thorough analysis of the problem and includes a pseudo code for the solution.

Abstract An extension of the treemap method to visualize hierarchical information, such as directory structures and organizational structures. The standard treemap method often gives thin elongated rectangles. As a result, rectangles are difficult to compare and choose. A new method is presented to generate layouts in which the rectangles approach the squares. To enhance the visualization of the structure, shaded frames around groups of related nodes are used.

---

Additional resources

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

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

Transformations for visualizing a hierarchy with limited space shows the history of various treemap algorithms in order to reduce the ratio of the rectangle to 1. You might find some of the articles useful.

This page also provides a good breakdown of various treemap algorithms.

Depending on the data, the rectangles can have a completely different aspect, which makes it difficult to compare: a thin long rectangle of the same square almost square looks very different. Bruce, Hasing, and therefore Van Wake developed Squarified Treemaps that optimize the placement of nodes within a level to make them as square as possible. While it is a great idea to make static treemaps more readable, it causes problems when treemaps are used to display events over time. The ordered layouts of Treemap cards, developed by Schneiderman and Wattenberg, solve this problem by preserving the order of the elements while striving to keep the nodes as square as possible and thus produce very stable layouts.

Conclusion

The summary on the wikipedia entry provides a good explanation of why it is difficult to maintain a strictly square treemap. Accent added.

To create a treemap, you need to define a tiling algorithm, that is, a way to divide the rectangle into sub-rectangles of the indicated areas. Ideally, the treemap algorithm would create rectangles with aspect ratios next to one, in addition, retain some sense of ordering in input data and changes to reflect changes in the underlying data. Unfortunately, these properties have a feedback. As aspect ratio is optimized, placement order becomes less predictable. When the order becomes more stable, the aspect ratio degrades.

After further study of this topic, I agree with Lars Kottoff that getting a treemap strictly with squares does not seem trivial. At least not based on existing treemap algorithms. The easiest way is to create your own code (JS and CSS) to create nested div or li to achieve your desired final look.

Adding

• http://www.koalastothemax.com/ - this demonstration creates nested circles, but it’s obvious that they all sit in squares. This may require some work, but you can probably achieve the desired results using the Koalas code for Max.

  

Answer 2

Unfortunately, it is not possible for the treemap to display all elements in squares for mathematical reasons.

Here I will just give you a counterexample. Suppose that at the end of your processing you will receive 4 categories (A, B, C, D) with the indicated surface area.

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

Regardless of the position you give them, it is impossible to get the final treemap with a square or even rectangular 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 squares has a surface area = 1.

Thus, it is impossible to have all the squares

From this document , as JSuar is mentioned, we learn that there is an optimized almost square representation that you can have by implementing the algorithm described in the article.

But this is an approximation.

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

• change the visualization using, for example, http://bl.ocks.org/4063530

• hack treemap.js code change line as follows

  ratio = 1;

But in this latter case, you may have empty spaces or other crashes.