Can I get a simpler explanation of how array hierarchy of items in a treemap using plotly.js works?

I want to use the treemap feature of plotly.js and after reading the documentation I still don't understand how to customize item hierarchies.

In my mind , I imagine a tree hierarchy expressed in code as something like this:

{
   parent:{ "topItem"},
   topItem: {"one","two","three"},   /* children of top-item */
   one:{"something"},   /* child of "one" */
   two: {"thing", "whatever"} /* a couple of children of "two" */

} 

I know there are better ways to do this, but my point is that this style maps to how I think about nested relationships of data.

In the plotly.js treemap example code, the relationship between the data and the rendered output confuses me and I don't understand how to think about it.

The example(s) use a couple of arrays to express nested item relationships and they typically look like this:

data = [{
      type: "treemap",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ]
}]

Plotly.newPlot('myDiv', data)

This example renders the hierarchy displayed here : https://plotly.com/javascript/treemaps/

If I wanted to add three children to the "Cain" block (or any other change for that matter), I have no idea how to do that and I would like to learn.

Thank you.

I'm going to take a JSON hierarchy like yours as an example:

{
	"root": { "topItem" },
	"topItem": { "one", "two", "three" },
   	"one": { "something" },
	"two": { "thing", "whatever" }
}

First you take all of the elements you want to render and put them in the labels array, just listing them one after the other:

labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"]

Then for each of the elements in labels, you have to specify its parent element in the hierarchy. labels[0] is called root and it does not have a parent, so we leave parents[0] = "". labels[1] is topItem and according to the JSON, its parent is root, so parents[1] = "root". labels[2], labels[3] and labels[4] ("one", "two", "three") all have the same parent, so parents[2] = parents[3] = parents [4] = "topItem", and so on.
You end up with

parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]

See the example below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = [{
      type: "treemap",
      labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"],
      parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]
}]

Plotly.newPlot('chart', data)

<!-- language: lang-html -->

<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>

<div id='chart'></div>

<!-- end snippet -->