Sunburst Hovertemplate additional info

📊 Plotly Python
1

Hi there,
my question is basially the same that can be found here: https://community.plotly.com/t/sunburst-hover-data/64418 (creating new topic as the other seems outdated or is not creating any attention)

I want to display data of a column in the hovertemplate that i am not using in the path or the value. If it is only one line that need to be ‘summed’ for the value it can work. However only adding a second line so that the additional info needs to be summed up as the alue sunburst only gives (?) as shown in the image of the other topic.

Please refer to the example of the other topic. More simple it wont get.

Thank you in advance

2

Hello @korzi,

That is due to multiple values. What you can do, if these are numerical, is group your data by the level and sum the remaining points.

This however will alter some of the data, so you’d need to merge this data with the original in order to maintain the values and functionality. You’d also need to establish click events to adjust the dataset data as you navigate up and down the sunburst.

3

@jinnyzor Thanks for the solution approach. I will have a look at it.

What i do not understand is what you mean with multiple values. If my df looks like this

a b c d
o x 1 4
o y 2 3
o y 3 2
o x 4 1

and i set [a,b] as my path and c as a value. In the Sunburst i get the part of the circle with o,x and according to the summed number of c (5). Why does it have such problems to sum up the according rows of d then? it seems like such a simple task/problem.

4

Can you set d up to be the values?

It can’t assume that the values of a column are numerical.

5

The behavior of sunburst with multiple values is unclear to me sadly. I do not get it running if i add d to the values. He gets problems with the length for some reasons.

6

Can you post the code for showing the figure?

7

Cant share the original code/data. But some trys explained i this example code
Data generation: (sorry i am new to python)

df = pd.DataFrame(columns=['A', 'B','C', 'D', 'E'])
add_row = ['x','a', 'b',1,3]
df.loc[len(df)] = add_row
add_row = ['x','a', 'b',2,4]
df.loc[len(df)] = add_row
add_row = ['o','a', 'b',3,5]
df.loc[len(df)] = add_row
add_row = ['o','a', 'b',4,6]
df.loc[len(df)] = add_row
add_row = ['y','a', 'b',1,7]
df.loc[len(df)] = add_row

First try, this wouldve been the easiest way:

sunb = px.sunburst(df, path=['A', 'B'], values='D',hover_data={"E":True},)

However, this does not work if more than one line is added.

Second try:

sunb = px.sunburst(df, path=['A', 'B'], values=['D', 'E'])

produces an error i do not understand right now which lengths are a problem.

Try 3 does not work right now. However, i am trying it like this in the original code. Also dont know why the length here is a problem.

sunb = px.sunburst(df, path=['A', 'B'], values='D', custom_data=np.stack((df['E']),axis = -1),hover_data={"E":True},)
sunb.update_traces(hovertemplate=' %{value:.2f}h<br>'+\
                     '%{custom_data[1]}')

Thanks for your help. Dont waste to much time on this problem. I guess there are workarounds how i get the data displayed elsewhere.

8

Great. This will work.

Values can only have 1 column, but you are already using it for D.

9

Here, give this a shot, I think it works.

import plotly.express as px
import pandas as pd

data = [['x','a', 'b', 1, 3],
        ['x','b', 'b', 1, 3],
        ['x','a', 'b', 2, 4],
        ['o','a', 'b', 3, 5],
        ['o','a', 'b', 4, 6],
        ['y','a', 'b', 1, 7],
        ['z','c', 'b', 1, 7],
        ]

df = pd.DataFrame(data, columns=['A', 'B' ,'C', 'D', 'E'])

custom_text = df.groupby(['B', 'A'])['E'].sum().tolist() + df.groupby('A')['E'].sum().tolist()
sunb = px.sunburst(df, path=['A', 'B'], values='D')
sunb.update_traces(hovertemplate='%{label}-D: %{value:.2f}h<br>E: %{hovertext}',
                   hovertext=custom_text)

sunb.show()
10

Sorry for the late reply. This looks very promising, indeed. Ill need to give it a try with a longer path.

1 Like
11

I marked it as a solution as its the approach with the mose hope. It does work for me in some cases (Path 3 long, inner circle is one parent). Althought it does not work in the same sunburst under some circumstances (inner circle = two parents lead to the outer ring to be completely wrong assigned)

12

Something I noticed while working with the data is that it seems to make this, the sunburst chart applies a sorting to it.

I think you’ll need to pre sort your data as well to get it to line up properly.

13

It is a super wicked problem. I realldy had to dig deep. For me using the color and the color_discrete_map property destroys everything. In the standard red and blue colors its working. In the colours of our company its not. super annoying.

14

Can you give me the coloring orders and some sample data? I’d like to see if I can help out.

I’m wondering if the color / hex causes them to order as well.

15 
import plotly.express as px
import pandas as pd

data = [['x' , 'S11'      ,   '023' ,            2.743 ,   201],
        ['x'   ,    'S13',            '302' ,           0.448  ,   55],
        ['x'   ,    'S12' ,          '023'    ,          3.575  ,  389],
        ['x'   ,    'S15'  ,         '023'   ,          0.329   , 378],
        ['x'   ,    'S1'    ,      '023'   ,          0.627    ,167 ],
        ['x'   ,    'S1'     ,     '302'   ,          0.177   ,   7],
        ['x'   ,    'S1'      ,     '304'  ,          0.314   ,  16],
        ['x'   ,    'S3'       ,  '302'   ,          1.474   ,  24   ],
        ['x'   ,   'S3',          '305'   ,          0.327     ,40  ],
        ['x'   ,    'S3',         '308'    ,          0.211    , 25   ],
        ['x'   ,   'S3'  ,     'e18'    ,          0.035     , 1    ],
        ['x'   ,  'S4'    ,      '023'    ,          0.032    , 62   ],
        ['x'   ,    'S4'   ,      '036 '   ,          0.048  ,    5              ],
        ['x'   ,    'S4'    ,     '201 '   ,          0.221  ,  600      ],
        ['x'   ,    'S4'     ,    '302'   ,          0.106  ,   65      ],
        ['x'   ,    'S4'      ,    '305'    ,          0.011  ,   1],
        ['x'   ,    'S4'       ,   '307'    ,          0.068  ,  90],
        ['x'   ,    'S4',         '308'    ,          0.200  ,  70],
        ['y'   ,    'B1' ,        '103 ' ,          4.118    ,310 ],
        ['y'   ,    'B2'  ,         '302' ,           2.802   ,   6],
        ['y'   ,    'B2'   ,       'l08' ,           0.369    ,130 ],
        ['y'   ,   'B2'     ,     'l60 ' ,          0.103    ,  56],
        ['y'   ,    'B3'     ,      '023' ,           0.054   ,  90],
        ['y'   ,    'B3'      ,     '302' ,           0.075   ,  25],
        ['y'   ,    'B3'       ,    '303' ,           0.456   ,  34],
        ['y'   ,    'B3'        ,  '331 ' ,          0.522   ,  18],
        ['y'   ,    'B3'         , 'l05 ' ,          0.230   ,  25],
        ['y'   ,    'B3',           'l08' ,           0.008   ,  1],
        ['y'   ,    'B5' ,          'l08' ,           1.098   , 418],
        ['y'   ,    'B5'  ,        'l09 ' ,          0.425   ,  24],
        ['y'   ,    'B5'   ,       'l24 ' ,          0.214   ,  38],
        ['y'   ,    'B6'    ,       '304' ,          0.395   ,  40],
        ['y'   ,   'B6'      ,    'l08'   ,          1.252    ,309],
        ['y'   ,    'B7'      ,     '023'  ,          2.343   , 295],
        ['y'   ,   'B8'        , 'l08'  ,          0.055     , 37],
        ['y'   ,    'B8'        , 'l09'  ,          0.045    ,  7]
       ]
df = pd.DataFrame(data, columns=['A', 'B' ,'C', 'D', 'E'])
acolor_map = {'x': '#00285F', 'y': '#00A6EB'}
custom_text =df.groupby(['C', 'B', 'A'])['E'].sum().tolist() + df.groupby(['B', 'A'])['E'].sum().tolist() + df.groupby('A')['E'].sum().tolist()
print(df.groupby(['B', 'A'])['E'].sum().tolist() )
print(custom_text)
sunb = px.sunburst(df, path=['A', 'B', 'C'], values='D', color = 'A', color_discrete_map=acolor_map)
sunb.update_traces(hovertemplate='%{label}-D: %{value:.2f}h<br>E: %{hovertext}',
                   hovertext=custom_text)




sunb.show()

If you remove both color properties it works as intended. I often look at the segment B1 and 103 where both should be equal

16

Instead of passing a discrete map, maybe you should look into creating your own template for the color scheme and see if it stays true to form.

It is very strange that it doesnt work right when applying that.

This is with seaborn:

image
image1004×840 84.8 KB

17

Okay thanks for the hint. Ill have a look into it. The whole thing is kinda strange and I expected it to be way easier^^

1 Like