Plotly: Add size proportionate child features in sunburst in continuous color scale

Question

This question is almost like this one but with an important distinction, continuous color scale for which the same solution does not apply.

import pandas as pd
import plotly.express as px

data = {
  'ids':['SA', 'NA', 'Brazil', 'Uruguay', 'USA', 'Canada', 'PFV Brazil', 'PV Brazil', 'PFV Uruguay', 'PV Uruguay', 'PFV USA', 'PV USA', 'PFV Canada', 'PV Canada'],
  'labels': ['SA', 'NA', 'Brazil', 'Uruguay', 'USA', 'Canada', 'PFV', 'PV', 'PFV', 'PV', 'PFV', 'PV', 'PFV', 'PV'],
  'parent': ['', '', 'SA', 'SA', 'NA', 'NA', 'Brazil', 'Brazil', 'Uruguay', 'Uruguay', 'USA', 'USA', 'Canada', 'Canada'],
  'value': [0, 0, 100, 80, 400, 200, 8, 40, 4, 20, 11, 100, 11, 80]
  }

fig =px.sunburst(data, names='labels', parents='parent',  values='value', ids='ids', color='value',
                color_continuous_scale='Blues')
fig.show()

The code above reproduces this figure-

As you can see, the colours for NA and SA are that of the lowest end (as their value is zero) but their division proportion and size proportion to children is correct.

If I input their values the totals of their child classes ie replacing value with 'value': [180, 600, 100, 80, 400, 200, 8, 40, 4, 20, 11, 100, 11, 80] , it produces this plot-

Now, the colours and proportion to each other are correct in this but the proportion to the child classes is not. How can I fix this? (I want the first figure but with root/parent nodes having colour as per size)

Answer 1

It's clear that if the parent classes have values, the child classes will automatically be divided into non-proportionate smaller sectors even if the sum of child classes is equal to the parent class. So, the only way it is possible to have a somewhat desirable solution is for parent classes to have the actual value 0 and then manually assign them colours and hoverlabels . So, here comes the (almost ridiculous) workaround I have implemented.

Colours

The idea is to have a very large sequential colorscale that has hundreds of elements (or more, depending on the range you want). And then insert a desired color (I picked the midpoint of colorscale) to the start (minpoint) of the colorscale. This way, the 0 values will have a colour and the extremely large size of the colorscale will prevent all the other values from diverging much from their original colour.

1. You can generate the colorscale from this website. I didn't see any direct export or copy option so a quick copy into excel and then selecting the desired column from it did the trick for me.

2. Make a list of strings out of it. Add # as a prefix to each element.

3. Select the colour you want and add it to the front of the list. I selected the midpoint.

4. Pass the list to the colorscale argument of the plotting function.

# px.colors.sequential.Blues #Get first and last colour from this
my_colorscale = ["F7FBFF","F6FAFE","F5F9FD","F4F8FD","F3F7FC","F2F7FC","F1F6FB","F0F5FA","EFF4FA","EEF3F9","EDF3F9","ECF2F8","EBF1F8","EAF0F7","E9EFF6","E8EFF6","E8EEF5","E7EDF5","E6ECF4","E5EBF3","E4EBF3","E3EAF2","E2E9F2","E1E8F1","E0E7F1","DFE7F0","DEE6EF","DDE5EF","DCE4EE","DBE3EE","DAE3ED","D9E2ED","D9E1EC","D8E0EB","D7DFEB","D6DFEA","D5DEEA","D4DDE9","D3DCE8","D2DBE8","D1DBE7","D0DAE7","CFD9E6","CED8E6","CDD7E5","CCD7E4","CBD6E4","CAD5E3","CAD4E3","C9D3E2","C8D3E1","C7D2E1","C6D1E0","C5D0E0","C4D0DF","C3CFDF","C2CEDE","C1CDDD","C0CCDD","BFCCDC","BECBDC","BDCADB","BCC9DB","BBC8DA","BBC8D9","BAC7D9","B9C6D8","B8C5D8","B7C4D7","B6C4D6","B5C3D6","B4C2D5","B3C1D5","B2C0D4","B1C0D4","B0BFD3","AFBED2","AEBDD2","ADBCD1","ACBCD1","ACBBD0","ABBACF","AAB9CF","A9B8CE","A8B8CE","A7B7CD","A6B6CD","A5B5CC","A4B4CB","A3B4CB","A2B3CA","A1B2CA","A0B1C9","9FB0C9","9EB0C8","9DAFC7","9DAEC7","9CADC6","9BACC6","9AACC5","99ABC4","98AAC4","97A9C3","96A9C3","95A8C2","94A7C2","93A6C1","92A5C0","91A5C0","90A4BF","8FA3BF","8EA2BE","8EA1BD","8DA1BD","8CA0BC","8B9FBC","8A9EBB","899DBB","889DBA","879CB9","869BB9","859AB8","8499B8","8399B7","8298B7","8197B6","8096B5","7F95B5","7F95B4","7E94B4","7D93B3","7C92B2","7B91B2","7A91B1","7990B1","788FB0","778EB0","768DAF","758DAE","748CAE","738BAD","728AAD","7189AC","7089AC","7088AB","6F87AA","6E86AA","6D85A9","6C85A9","6B84A8","6A83A7","6982A7","6881A6","6781A6","6680A5","657FA5","647EA4","637EA3","627DA3","617CA2","617BA2","607AA1","5F7AA0","5E79A0","5D789F","5C779F","5B769E","5A769E","59759D","58749C","57739C","56729B","55729B","54719A","53709A","526F99","526E98","516E98","506D97","4F6C97","4E6B96","4D6A95","4C6A95","4B6994","4A6894","496793","486693","476692","466591","456491","446390","436290","43628F","42618E","41608E","405F8D","3F5E8D","3E5E8C","3D5D8C","3C5C8B","3B5B8A","3A5A8A","395A89","385989","375888","365788","355787","345686","345586","335485","325385","315384","305283","2F5183","2E5082","2D4F82","2C4F81","2B4E81","2A4D80","294C7F","284B7F","274B7E","264A7E","25497D","25487C","24477C","23477B","22467B","21457A","20447A","1F4379","1E4378","1D4278","1C4177","1B4077","1A3F76","193F76","183E75","173D74","163C74","163B73","153B73","143A72","133971","123871","113770","103770","0F366F","0E356F","0D346E","0C336D","0B336D","0A326C","09316C","08306B","08306B"]
midpoint = my_colorscale[int(len(my_colorscale)/2)]
my_colorscale.insert(0, midpoint)
my_colorscale = ['#'+x for x in my_colorscale]

Hoverlabels

Create a list that consists of the values of each sector and pass that list to custom_data parameter in the function. Then, call fig.update_traces() and pass %{customdata} to the hovertemplate parameter.

Here is the complete code-

# px.colors.sequential.Blues #Get first and last colour from this
my_colorscale = ["F7FBFF","F6FAFE","F5F9FD","F4F8FD","F3F7FC","F2F7FC","F1F6FB","F0F5FA","EFF4FA","EEF3F9","EDF3F9","ECF2F8","EBF1F8","EAF0F7","E9EFF6","E8EFF6","E8EEF5","E7EDF5","E6ECF4","E5EBF3","E4EBF3","E3EAF2","E2E9F2","E1E8F1","E0E7F1","DFE7F0","DEE6EF","DDE5EF","DCE4EE","DBE3EE","DAE3ED","D9E2ED","D9E1EC","D8E0EB","D7DFEB","D6DFEA","D5DEEA","D4DDE9","D3DCE8","D2DBE8","D1DBE7","D0DAE7","CFD9E6","CED8E6","CDD7E5","CCD7E4","CBD6E4","CAD5E3","CAD4E3","C9D3E2","C8D3E1","C7D2E1","C6D1E0","C5D0E0","C4D0DF","C3CFDF","C2CEDE","C1CDDD","C0CCDD","BFCCDC","BECBDC","BDCADB","BCC9DB","BBC8DA","BBC8D9","BAC7D9","B9C6D8","B8C5D8","B7C4D7","B6C4D6","B5C3D6","B4C2D5","B3C1D5","B2C0D4","B1C0D4","B0BFD3","AFBED2","AEBDD2","ADBCD1","ACBCD1","ACBBD0","ABBACF","AAB9CF","A9B8CE","A8B8CE","A7B7CD","A6B6CD","A5B5CC","A4B4CB","A3B4CB","A2B3CA","A1B2CA","A0B1C9","9FB0C9","9EB0C8","9DAFC7","9DAEC7","9CADC6","9BACC6","9AACC5","99ABC4","98AAC4","97A9C3","96A9C3","95A8C2","94A7C2","93A6C1","92A5C0","91A5C0","90A4BF","8FA3BF","8EA2BE","8EA1BD","8DA1BD","8CA0BC","8B9FBC","8A9EBB","899DBB","889DBA","879CB9","869BB9","859AB8","8499B8","8399B7","8298B7","8197B6","8096B5","7F95B5","7F95B4","7E94B4","7D93B3","7C92B2","7B91B2","7A91B1","7990B1","788FB0","778EB0","768DAF","758DAE","748CAE","738BAD","728AAD","7189AC","7089AC","7088AB","6F87AA","6E86AA","6D85A9","6C85A9","6B84A8","6A83A7","6982A7","6881A6","6781A6","6680A5","657FA5","647EA4","637EA3","627DA3","617CA2","617BA2","607AA1","5F7AA0","5E79A0","5D789F","5C779F","5B769E","5A769E","59759D","58749C","57739C","56729B","55729B","54719A","53709A","526F99","526E98","516E98","506D97","4F6C97","4E6B96","4D6A95","4C6A95","4B6994","4A6894","496793","486693","476692","466591","456491","446390","436290","43628F","42618E","41608E","405F8D","3F5E8D","3E5E8C","3D5D8C","3C5C8B","3B5B8A","3A5A8A","395A89","385989","375888","365788","355787","345686","345586","335485","325385","315384","305283","2F5183","2E5082","2D4F82","2C4F81","2B4E81","2A4D80","294C7F","284B7F","274B7E","264A7E","25497D","25487C","24477C","23477B","22467B","21457A","20447A","1F4379","1E4378","1D4278","1C4177","1B4077","1A3F76","193F76","183E75","173D74","163C74","163B73","153B73","143A72","133971","123871","113770","103770","0F366F","0E356F","0D346E","0C336D","0B336D","0A326C","09316C","08306B","08306B"]
midpoint = my_colorscale[int(len(my_colorscale)/2)]
my_colorscale.insert(0, midpoint)
my_colorscale = ['#'+x for x in my_colorscale]

value2 = [180, 600, 100, 80, 400, 200, 8, 40, 4, 20, 11, 100, 11, 80]

import pandas as pd
import plotly.express as px

data = {
  'ids':['SA', 'NA', 'Brazil', 'Uruguay', 'USA', 'Canada', 'PFV Brazil', 'PV Brazil', 'PFV Uruguay', 'PV Uruguay', 'PFV USA', 'PV USA', 'PFV Canada', 'PV Canada'],
  'labels': ['SA', 'NA', 'Brazil', 'Uruguay', 'USA', 'Canada', 'PFV', 'PV', 'PFV', 'PV', 'PFV', 'PV', 'PFV', 'PV'],
  'parent': ['', '', 'SA', 'SA', 'NA', 'NA', 'Brazil', 'Brazil', 'Uruguay', 'Uruguay', 'USA', 'USA', 'Canada', 'Canada'],
  'value': [0, 0, 100, 80, 400, 200, 8, 40, 4, 20, 11, 100, 11, 80]
  }

fig =px.sunburst(data, names='labels', parents='parent',  values='value', ids='ids', color='value',
                color_continuous_scale=my_colorscale, custom_data=[value2])
fig.update_traces(hovertemplate='%{label}<br>%{customdata}')
fig.show()

Here is the output (notice the bottom of the colorbar:D)-

This is by no means a perfect solution as the colours for NA and SA are the same. I think this too could be solved though with a large enough colorscale and changing the value of one of those to 1 instead of 0 as that minor change would be unintelligible to the eyes on the graph, and adding a second color shade as the second element on the list my_colorscale .

I'm open to better solutions and I won't mark this as the answer.