# Treemap subplot in PlotlyJS

**URL:** <https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759>\
**Category:** Visualization\
**Created:** [July 16, 2021, 3:49pm UTC](https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759 "2021-07-16T15:49:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stej](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stej](https://discourse.julialang.org/u/stej)\
**Post date:** [July 16, 2021, 3:49pm UTC](https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759/1 "2021-07-16T15:49:04Z")

</div>

I wanted to use a treemap in PlotlyJS. There is no method like this, so I create that by hand.

```julia
fieldsa = Dict{Symbol,Any}(:type => "treemap",
   :labels => ["a", "A"],
   :parents => ["", ""],
   :values => [1, 10],
   :textinfo => "label+value+percent entry")
fieldsb = Dict{Symbol,Any}(:type => "treemap",
   :labels => ["b", "B"],
   :parents => ["", ""],
   :values => [5, 3],
   :textinfo => "label+value+percent entry")

```

I would like to have a layout with 2 rows - to plot the 2 treemaps one below the other.  
So I tried this:

```julia
p1 = PlotlyJS.plot([GenericTrace("treemap", fieldsa)], Layout())
p2 = PlotlyJS.plot([GenericTrace("treemap", fieldsb)], Layout())
p = [p1; p2]

```

No luck, only one treemap is displayed.

 ![image](https://global.discourse-cdn.com/julialang/original/3X/6/a/6a667d4f65cfe7883f33c25f280bbc6e8d511ee3.png)

Also this one shows only one treemap. But it looks like there is a empty row…

```julia
layout = Layout(grid=attr(rows=2, columns=1))
plot([GenericTrace("treemap", fieldsa), GenericTrace("treemap", fieldsb)], layout)

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/b/9/b92b8f06ea41aa7eeb62c99f99e25794dad8082c.png)

Any idea why how to make it work? I suspect that it doesn’t work because the treemap is not known to PlotlyJS package…

Thanks a lot!

* * *

Note that it works with e.g. scatter

```julia
p1 = PlotlyJS.plot([scatter(x = [1, 2], y = [10, 20])], Layout())
p2 = PlotlyJS.plot([scatter(x = [1, 2], y = [5, 18])], Layout())
p = [p1; p2] # shows 2 plots in one pane

```

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [July 16, 2021, 10:32pm UTC](https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759/2 "2021-07-16T22:32:32Z")

</div>

> [@stej](#):
>
> ```julia
> fieldsa = Dict{Symbol,Any}(:type => "treemap",
> :labels => ["a", "A"],
> :parents => ["", ""],
> :values => [1, 10],
> :textinfo => "label+value+percent entry")
> fieldsb = Dict{Symbol,Any}(:type => "treemap",
> :labels => ["b", "B"],
> :parents => ["", ""],
> :values => [5, 3],
> :textinfo => "label+value+percent entry")
> 
> ```

Treemaps are special charts, and when you insert them as subplots, you have to  
set `domain_x`, `domain_y` as subintervals in [0,1], to inform plotly.js where to locate  
each treemap window within the unit square [0,1] x[0,1] (the plotting window).  
Here is an example where in each subplot I inserted the same tree (with data from [Treemap charts in Python](https://plotly.com/python/treemaps/)):

```julia
using PlotlyJS
tree1= treemap(
    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
    root_color="lightgrey",
    domain_x = [0,1],
    domain_y = [0,0.48]
   )

tree2= treemap(
    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
    root_color="lightgrey",
    domain_x =[0,1],
    domain_y = [0.52, 1]
   )
data= [tree1, tree2]
layout=Layout(width=700, height=500)
pl = plot(data, layout)

```

 ![treemaps](https://global.discourse-cdn.com/julialang/original/3X/8/b/8b964d4201c7e7647485f0013645efc23c633b6f.png)

---

<div class="post-metadata">

**Author:** ![stej](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stej](https://discourse.julialang.org/u/stej)\
**Post date:** [July 18, 2021, 8:36pm UTC](https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759/3 "2021-07-18T20:36:54Z")

</div>

Thank you @empet, this really solves my problem. The working code looks like this:

```julia
fieldsa = Dict{Symbol,Any}(:type => "treemap",
   :labels => ["a", "A"],
   :parents => ["", ""],
   :values => [1, 10],
   :textinfo => "label+value+percent entry",
   :domain => Dict{Symbol,Any}(:x => [0,1], :y => [0,0.48]))
fieldsb = Dict{Symbol,Any}(:type => "treemap",
   :labels => ["b", "B"],
   :parents => ["", ""],
   :values => [5, 3],
   :textinfo => "label+value+percent entry",
   :domain => Dict{Symbol,Any}(:x => [0,1], :y => [0.52,1]))
p1 = PlotlyJS.plot([GenericTrace("treemap", fieldsa)], Layout())
p2 = PlotlyJS.plot([GenericTrace("treemap", fieldsb)], Layout())
p = [p1; p2]

```

Is there any other chart that is special like treemap?

I was also wondering why I don’t have `treemap` function defined. But I was at version `v0.14.1` and I see, `0.18` is available… Honestly, I did’t succeed in installing this version because `add PlotlyJS` gives me only `0.15`, so I can’t check.

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [July 19, 2021, 5:18pm UTC](https://discourse.julialang.org/t/treemap-subplot-in-plotlyjs/64759/4 "2021-07-19T17:18:06Z")

</div>

Sunburst chart, that also represents a tree, needs setting the attribute domain for x and y , when included in a subplot.