How to display nested / hierarchical data?

[Potherca]

The documentation states:

The treemap chart provides a method for displaying hierarchical data using nested rectangles.

Everything works fine with flat / single-depth data, but I am having trouble understanding how to make a hierarchical structure work.

I've studied the examples (sample/ directory) but they've not given me enough insight :disappointed:

Simplified, the data I have is:

• A ^{(50% through children)}
  • C ^{(25% through children)}
    • C1 ^{(12.5% through children)}
      • C1a: 6.25%
      • C1b: 6.25%
    • C2: 12.5%
  • D: 25%
• B: 50%

This should give a Treemap similar to this:

    +-------+------+-------+------+
    |  C1a  |      |              |
    +-------+  C2  |              |
    |  C1b  |      |              |
    +-------+------+      B       +
    |              |              |
    |       D      |              |
    |              |              |
    +-------+------+-------+------+

The only thing I have found is to keep adding groups:

[
  {"name": "A",   "l0": "/", "l1": "A", "l2":  "",  "l3":   "", "l4":    "", "value":  0},
  {"name": "B",   "l0": "/", "l1": "B", "l2":  "",  "l3":   "", "l4":    "", "value": 50},
  {"name": "C",   "l0": "/", "l1": "A", "l2": "C",  "l3":   "", "l4":    "", "value":  0},
  {"name": "C1",  "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4":    "", "value":  0},
  {"name": "C1a", "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4": "C1a", "value":  6.25},
  {"name": "C1b", "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4": "C1b", "value":  6.25},
  {"name": "C2",  "l0": "/", "l1": "A", "l2": "C",  "l3": "C2", "l4":    "", "value": 12.5},
  {"name": "D",   "l0": "/", "l1": "A", "l2": "D",  "l3":   "", "l4":    "", "value": 25}
]

But that looks like a hack to me, which would indicate that there is probably a better way to do this?

I've got a CodePen with what I have thus far: https://codepen.io/potherca/pen/qBVXmRz

Any help would be much appreciated!

[dannypk]

this is actually one of the features missing for me to start using this library. I see no replies are here since Feb :(

[stockiNail]

I have created a codepen https://codepen.io/stockinail/pen/MWGazpr with some function to transform an object (a tree) in an array acceptable by the treemap chart.

Out-of-the-box creates objects with:

{
  g0: '',
  g1: '',
  ...
  g(n-1): ''
  name: [item in the tree where the "key" is set, in the example 'value'] 
}

the g before the level of the tree is hard-coded but could be configurable. In chart config, you should set the groups options using some or all above created keys:

groups: ['g0', 'g1', 'name'],

These function could be included in the treemap controller as feature and activated when the tree is an object instead of an array. Of course test cases must be implemented in order to check if it works with all cases. Probably also additional features could be added.

@kurkle @Potherca @dannypk what do you think?

I have already added the feature in my fork of the project. If make sense, I can try to submit a PR.

[stockiNail]

@kurkle @Potherca @dannypk FYI I have submitted a PR in order to manage tree options as an object. The PR it's slightly different comparing with the published codepen.

[dannypk]

hi @stockiNail ! Great job and thanks for your contribution.

Speaking of functionality, you can achieve something like that using the groups of tree charts.

What I am more interested in is, having regions like ASIA | EUROPE | AMERICAS and then, when clicking on Europe expanding like UK, GERMANY, FRANCE and then when I click on Germany seeing like BAVARIA, BERLIN, etc.

So kind of multi-level tree chart that has the option to click and dive in, right click and dive out.

Play a bit with https://plotly.com/python/treemaps/ ..

Thanks!

[stockiNail]

@dannypk thank you very much for feedback. With the PR, the drill down on the tree is doable . I have prepared a codepen (prototype): https://codepen.io/stockinail/pen/mdLPRmY

[Potherca]

@stockiNail Great stuff! Looks like that solves my usecase. :+1: Great to have the codepen example as well, gives me something to play around with.

[dannypk]

@stockiNail that's great!! Let's see if the PR gets approved, if not I guess we'll all for the PR 😄

[stockiNail]

@Potherca @dannypk thank you very much for feedback. The PR is still in draft because I recognized a possible issue on isObject function in the project. For this reason I have submitted another one (which should approved and merged before) in order to avoid to consider properties of the objects tree as Array like possible subnodes.