Visualizer: Add Treemap layout

[JurajKubelka]

It is possible to inspect each squarifed treemap layout step:

On the left side, we see seven placed elements (widgets). On the right side, we a third area where two elements are places. You can compare the previews to see the two elements.

The next figure shows all areas that split the assigned space (extent). Landscape areas slice their spaces vertically. All elements in landscape areas have same width. Portrait areas slice their spaces horizontally. All element in portrait areas have same height.

It helps us to understand why elements are situated in particular positions.

For example, in the given example, the display area (on the right) has two elements. We know that those elements should be next to each other, instead of one over the another. We know it because if implement an algorithm published by Mark Bruls, Kees Huizing, and Jarke J. van Wij, "Squarified Treemaps" [PDF]. The following figure shows how the algorithm step by step collocates all elements.

The only difference in our implementation is, that they consider as bottom-left screen part as a 0@0, growing to the right and top. We have 0@0 coordinates in the top-left corner and our area grows to the right and down.

As we can see, your algorithm collocates 2 nodes place above each other. Which is a failing step 8 in the paper. We should decide for the step 9 and then add the node 1.

Thanks to our moldable development environment, we can spot the issue easily, without looking at the algorithm implementation, dealing with coordinate numbers.

[JurajKubelka]

To find the squarified treemap layout issue, we exemplified a worst function. This is a function that returns a worst ratio for a given nodes:

And the previous step shows us that the ratio is better:

Which is an expected result and the squarified algorithm therefore choose the step 9 instead of the step 8. Which means, that we obtain the desired final result (step 10):

[JurajKubelka]

We want better step tracking, including rejected steps.

[JurajKubelka]

The squarified treemap algorithm is exemplified and shows how each node position is computed:

On the left side, we can see a result. On the left side, we see all steps that were involved in the treemap computation. Each step shows nodes that were involved in an occupied area computation. Green border means that the result is accepted. Red border means that the result is rejected.

[JurajKubelka]

Documented algorithm: