How to avoid None when plotting sunburst chart using Plotly?

Question

I am trying to create sunburst chart using Plotly. My data consists of several different types of journeys of varying steps. Some journeys are 10 steps others are 100. But for the purposes of simplicity, let us consider only 3 steps.

Here is the data -

import pandas as pd
import plotly.express as px
import numpy as np


data = {
  'step0' :['home', 'home','product2','product1','home'],
  'step1' : ['product1','product1', None, 'product2',None] ,
  'step2' : ['product2','checkout', None, None,None] ,
  'total_sales' : [50,20,10,0,7]
  }

data_df = pd.DataFrame(data)
data_df.head()

I now try to plot these steps in sunburst chart. Because some journeys can be short, the subsequent steps are marked as None in those cases.

data_df = data_df.fillna('end')

plotting code -

fig = px.sunburst(data_df, path=['step0','step1','step2'], values='total_sales', height = 400)
fig.show()

As you can see above, the None have been filled by end because Plotly does not like NAs. But then I do not want to show the end in the sunburst chart.

I want to re-create something like this -

https://bl.ocks.org/kerryrodden/7090426

How can I make this work in Plotly?

Answer 1

One workaround that uses what you already have would be to instead fillna with an empty string like " " so the word "end" doesn't show on the chart. Then you can loop through the marker colors and marker labels in the fig.data[0] object, changing the marker color to transparent "rgba(0,0,0,0)" for every label that matches the empty string.

The only thing is that the hovertemplate will still show information for the part of the sunburst chart we have used our workaround to hide, but the static image will look correct.

For example:

import pandas as pd
import plotly.express as px
import numpy as np


data = {
  'step0' :['home', 'home','product2','product1','home'],
  'step1' : ['product1','product1', None, 'product2',None] ,
  'step2' : ['product2','checkout', None, None,None] ,
  'total_sales' : [50,20,10,0,7]
  }

data_df = pd.DataFrame(data)
# data_df.head()

data_df = data_df.fillna(" ")
fig = px.sunburst(
  data_df, 
  path=['step0','step1','step2'], 
  values='total_sales', 
  color=["red","orange","yellow","green","blue"], 
  height = 400
)

## set marker colors whose labels are " " to transparent
marker_colors = list(fig.data[0].marker['colors'])
marker_labels = list(fig.data[0]['labels'])
new_marker_colors = ["rgba(0,0,0,0)" if label==" " else color for (color, label) in zip(marker_colors, marker_labels)]
marker_colors = new_marker_colors

fig.data[0].marker['colors'] = marker_colors
fig.show()