# How to create a nested Tree Map with plotly

Dear Community,
I have found a lot of great solutions in this forum and Iâ€™m very thankful for all your contributions. I invested quite some time into the plotly tree map solution using a scatter plot with shapes. I would kindly ask you for some help in generating a nested tree map from a dataframe with this structure (random data):

``````   SeriesName    SeriesClass  SeriesSize  SeriesChange
0    SeriesName_1  SeriesClass_3         477             1
1    SeriesName_2  SeriesClass_5         377            -9
2    SeriesName_3  SeriesClass_5         117            32
3    SeriesName_4  SeriesClass_2         167            24
. . .
``````

Aim would be to create a treemap of â€śSeriesClassâ€ť with nested â€śSeriesNameâ€ť. Below the code snippet to generate the treemap with â€śSeriesClassâ€ť . Thank you very much for your help.

``````import pandas as pd
import numpy as np

def query_data():

# create dataframe
df = pd.DataFrame(index=range(20))

SeriesName, df['SeriesName'] = [], ''
for x in range(len(df)):
SeriesName.append('SeriesName' + '_' + str(x+1))
df['SeriesName'] = SeriesName

SeriesClass, df['SeriesClass'] = [], ''
RandomClass = np.random.randint(1,6,20)
for x in range(len(df)):
SeriesClass.append('SeriesClass' + '_' + str(RandomClass[x]))
df['SeriesClass'] = SeriesClass

df['SeriesSize'] = np.random.randint(10,1000,20)
df['SeriesChange'] = np.random.randint(-50,50,20)

return df.to_json(date_format='iso', orient='split')

def dataframe():

import plotly as py
import plotly.graph_objs as go
import squarify

import matplotlib.cm as cm
from matplotlib import colors
from matplotlib.colors import LinearSegmentedColormap

# http://nbviewer.jupyter.org/github/empet/Plotly-plots/blob/master/Plotly-asymmetric-colorscales.ipynb
def colormap_to_colorscale(cmap):
return [ [k*0.1, colors.rgb2hex(cmap(k*0.1))] for k in range(11)]

def colorscale_from_list(alist, name):
cmap = LinearSegmentedColormap.from_list(name, alist)
colorscale=colormap_to_colorscale(cmap)
return cmap, colorscale

RedWhiteBlue=['#FF0D00','#FFFFFF','#0716FF']
fin_cmap, fin_cs = colorscale_from_list(RedWhiteBlue, 'fin_cmap')

# https://matplotlib.org/gallery/userdemo/colormap_normalizations.html
class MidpointNormalize(colors.Normalize):
def __init__(self, vmin=None, vmax=None, midpoint=None, clip=False):
self.midpoint = midpoint
colors.Normalize.__init__(self, vmin, vmax, clip)
def __call__(self, value, clip=None):
x, y = [self.vmin, self.midpoint, self.vmax], [0, 0.5, 1]

def update_graph_treemap():

dff = dataframe()
dff = dff.groupby(['SeriesClass'], as_index=False)['SeriesSize','SeriesChange'].sum()

# sort values according to squarify specifications
dff = dff.sort_values(['SeriesSize'], ascending=False)
dff = dff.reset_index(drop = True)

# code for handling the color bar in a symmetric way
vmax = -min(dff['SeriesChange'])
vmin = min(dff['SeriesChange'])
if max(dff['SeriesChange']) >= 0:
if max(dff['SeriesChange']) >= -min(dff['SeriesChange']):
vmax = max(dff['SeriesChange'])
vmin = -max(dff['SeriesChange'])

norm = MidpointNormalize(midpoint=0., vmin=vmin, vmax=vmax)
colorscale = cm.ScalarMappable(norm=norm, cmap=fin_cmap)

# create fillcolors
fillcolors=[]
for x in dff['SeriesChange']:
fillcolors.append(colors.to_hex(colorscale.to_rgba(x)))

values = []
values = dff['SeriesClass'] + '<br>' + \
'SeriesSize: ' + dff['SeriesSize'].apply(str) + '<br>' + \
'SeriesChange: ' + dff['SeriesChange'].apply(str)

# create rectangles
x = 0.
y = 0.
width = 100.
height = 100.

normed = squarify.normalize_sizes(dff['SeriesSize'], width, height)
rects = squarify.squarify(normed, x, y, width, height)

shapes = []
annotations =[]
counter = 0

for r in rects:
shapes.append(
dict(
type = 'rect',
x0 = r['x'],
y0 = r['y'],
x1 = r['x']+r['dx'],
y1 = r['y']+r['dy'],
line = dict(width = 0.1, color = 'grey'),
fillcolor = fillcolors[counter],
)
)
if counter < 14:
annotations.append(
dict(
x = r['x'],
y = r['y'] + (r['dy']),
text = dff['SeriesClass'][counter],
showarrow = False,
xanchor = 'left',
yanchor = 'top',
)
)
counter = counter + 1

figure = {
'data': [
go.Scatter(
x = [ r['x']+(r['dx']/2) for r in rects ],
y = [ r['y']+(r['dy']/2) for r in rects ],
text = values,
hoverinfo = 'text',
mode = 'markers',
marker=dict(
size=0.1,
colorscale=fin_cs,
cmin = vmin,
cmax = vmax,
showscale = True,
colorbar = dict(
len = 0.8,
yanchor = 'middle',
outlinecolor = 'white',
thickness = 15,
ticklen=4
)
)
)
],
'layout': go.Layout(
autosize = True,
xaxis={'showgrid':False, 'zeroline':False, 'showticklabels': False, 'ticks':''},
yaxis={'showgrid':False, 'zeroline':False, 'showticklabels': False, 'ticks':''},
shapes=shapes,
annotations=annotations,
hovermode='closest',
)
}

return figure

py.offline.plot(update_graph_treemap(), filename='squarify-treemap')``````

I have the same question.I wonder if you have got the answer. Could you share it?

Unfortunately not, and I havenâ€™t explored the issue any further since my post. I quickly arrived to a bottleneck with Plotly when having to process large amounts of data, so I switched to R Shiny. The library in R is treemapify and it can handle nested tree maps out of the box. However, it cannot handle large data sets efficiently either.