How to make TreeMap?

Excuse me, I have a mathematical question.
I want to make Treemap with BabylonJS (treemap wikipedia:Treemapping, But I don’t know how to make it…
(capture from

I know this structure a little better with the medium’s article.
In this article, there is the program to calculate it.

function squarify (children, row, width) {
    if (children.length === 1) {
        layoutLastRow(row, children, width)
    const rowWithChild = [...row, children[0]]
    if (row.length === 0 || worst(row, width) >= worst(rowWithChild, width)) {
        squarify(children, rowWithChild, width)
    } else {
        layoutRow(row, width)
        squarify(children, [], getMinWidth().width)

But I don’t know how to make it with BabylonJS. I don’t know how to reproduce a treemap in 3D space because the calculation of the article is made inside the svg tag.
I want to place grounds with different height/width to match the amount in one rectangle.

Thank you.

What if I told you that luckily, you don’t really need that level of skills to at least start with it :magic_wand:.
Check out this PG example. It probably doesn’t do just all what you want, but I guess it would be a good start.
May be I could advise to get already an understanding of this technique, play around with it a little and next return here with your questions (which will undoubtly happen :wink: and people here will help you finetune this for your needs… What do you say?

My apologies for being so blunt but this is like asking how do I pilot a plane from Beijing to Shanghai. The reason I ask is that I cannot drive a car let alone a plane and I have no hand eye coordination. I do have a flight manual.

In this case it would be better to get a ticket and fly on a commercial aeroplane.

In the same way you would be better asking in the service offers and requests section if someone would do it for you. You never know someone might even do it for free.

However to answer this part

The difference between SVG rectangle and Babylon.js ground is in positioning; in SVG you position the rectange based on the top left corner using x and y with y measured downwards and a ground is positioned based on its center based on x and z both measure positively.

So for a rectangle in SVG <rect x="x" y="y" width="width" height="height"/>

The ground shoud be positioned along the lines of (you need to check)

ground.position.x = x + 0.5 * width
ground.position.y = 0;
ground.position.z = 1200 - y - 0.5 * height

the 1200 is arbitrary and you can play with that number for best fit.

1 Like

Luv it. And in a way, you are right. However, I sometimes fly a plane from Beijing to Shanghai (not a jet just a Dash8 Q400) and then… in MSFS :wink: Probably the plane wouldn’t even leave the ground in real life, luckily for the passengers and my own health :wink:

On the other hand, we don’t know about the project and if all this is really necessary. I believe Babylon.js is safe enough to have people experiment. It won’t harm anyone, will it?