go.Treemap not rendering - Python

📊 Plotly Python
1

Hello all,

Here is a sample of the dataset I am using in Jupyter Notebook, Python 3.8;

d = {"deed_date":{"0":1546473600000,"1":1546560000000,"2":1546819200000,"3":1546992000000,"4":1547078400000},"year":{"0":2019,"1":2019,"2":2019,"3":2019,"4":2019},"month":{"0":1,"1":1,"2":1,"3":1,"4":1},"day":{"0":3,"1":4,"2":7,"3":9,"4":10},"trans_count":{"0":3.0,"1":19.0,"2":1.0,"3":4.0,"4":6.0},"district":{"0":"Barking And Dagenham","1":"Barking And Dagenham","2":"Barking And Dagenham","3":"Barking And Dagenham","4":"Barking And Dagenham"},"month_n":{"0":"January","1":"January","2":"January","3":"January","4":"January"},"day_n":{"0":"Thursday","1":"Friday","2":"Monday","3":"Wednesday","4":"Thursday"}}

Which, whilst I have successfully created what I want in plotly express (see next code)

lr_borough_time = pd.DataFrame(data=d)

data = px.treemap(
    data_frame=lr_borough_time,
    path=['year','month_n', 'day_n'],
    values=lr_borough_time['trans_count'],
    title="Total transactions count by Year, Month, Day. Order and size correspond to number of transactions.",
    hover_data=['trans_count']
    )

fig = go.Figure(data=data)
fig.update_layout(treemapcolorway=['lightgrey', 'lightblue'])

pyo.plot(fig)

However when trying to utilise it in graph_objs.Treemap (I want greater control over the chart and am more familiar with go than px) it simply doesn’t render. Gives no error. Here is my code.

data = go.Treemap(
    branchvalues='total',
    labels=lr_borough_time['month_n'],
    parents=lr_borough_time['day_n'],
    values=lr_borough_time['trans_count']
)

fig = go.Figure(data=data)
fig.show()

I have googled this and saw bug fixes in streamlit but I’m not using it.

Any help would be appreciated!

Thanks.

2

Are you using the latest version of plotly? As of right now it’s 4.8.2

3

Hi @nicolaskruchten, yes I am using 4.8.2. I’ve just ensured so using !pip install plotly --upgrade

Thanks

4

@pw0803 I recreated your example and got the same behaviour using plotly-version 4.14.1

My guess is that this is due to the different data-structures you use to create the treemap. The actual Treemap structure will be based on a binary relation (i.e. (id, parent)). I guess if you give a dataframe to px.treemap the relation will be created from the path you provide. My guess is, that the way you used go.Treemap does not conform to the Treemap datastructure. (You might need to create the ids, parents values and labels from your dataset, which is what is called a ‘rectangular dataframe’ in this article. afaik the go.Treemap function does not handle ‘rectangular dataframes’, only binary relations…?)

Anyhow imho inconsistencies in the given data should be reported instead of just ignored by go.Treemap …

Quick-Fix:

You can check the data created py px.treemap:

 data = px.treemap(
    data_frame=lr_borough_time,
    path=['year','month_n', 'day_n'],
    values=lr_borough_time['trans_count'],
    title="Total transactions count by Year, Month, Day. Order and size correspond to number of transactions.",
    hover_data=['trans_count']
    )

fig_px.data

Which gives me the following tuple with a Treemap object at the first position:

(Treemap({
     'branchvalues': 'total',
     'customdata': array([[19.],
                          [ 1.],
                          [ 9.],
                          [ 4.],
                          [33.],
                          [33.]]),
     'domain': {'x': [0.0, 1.0], 'y': [0.0, 1.0]},
     'hovertemplate': ('labels=%{label}<br>trans_count' ... 'nt}<br>id=%{id}<extra></extra>'),
     'ids': array(['2019/January/Friday', '2019/January/Monday', '2019/January/Thursday',
                   '2019/January/Wednesday', '2019/January', '2019'], dtype=object),
     'labels': array(['Friday', 'Monday', 'Thursday', 'Wednesday', 'January', '2019'],
                     dtype=object),
     'name': '',
     'parents': array(['2019/January', '2019/January', '2019/January', '2019/January', '2019',
                       ''], dtype=object),
     'values': array([19.,  1.,  9.,  4., 33., 33.])
 }),)

In the version of plotly I was using it was possible to set values on this object (i.e. values that I couldn’t set as parameters to px.treemap). E.g.:

fig_px.data[0].tiling = {'pad': 15}

fig = go.Figure(data=fig_px.data)
fig.show()

Which gave me the desired padding in the resulting figure.

So in summary we just use the px.treemap function to create the data and then adjust values as we could do in the go.Treemap function directly by hand. This is possible, because in the background in both cases objects of type plotly.graph_objs._treemap.Treemap are created.

Keep in mind, that this is rather a workaround/quick solution and calcultating the datastructures yourself and then feeding those to go.Treemap is possibly the more sophisticated solution …