Plotly Express Treemap: color, discreet_color_map, discreet_color_scale

📊 Plotly Python
1

I’ve been using most of the default settings for many of the figures in Plotly Express.

The default colors for plotly.express.treemap show a nice scaling for each level of detail within the tree hierarchy.

image
image1546×833 53.3 KB

When I add the color and color_discrete_map=discrete_colors options, I achieve the intended color, yet lose the scaling for each level-of-detail.

image
image1549×837 44.5 KB

I believe that I need to create a custom scale for each intended color, then somehow apply that in a way that it matches the patters observed in the default.

One topic I found came close, but doesn’t seem to directly relate to the level-of-detail, but the actual values.

import plotly.express as px
import pandas as pd

d = [{'option1': 'A', 'option2': 'January', 'option3': 'Winter', 'option4': '15'},
     {'option1': 'A', 'option2': 'February', 'option3': 'Winter', 'option4': '30'},
     {'option1': 'A', 'option2': 'March', 'option3': 'Spring', 'option4': '35'},
     {'option1': 'A', 'option2': 'April', 'option3': 'Spring', 'option4': '40'},
     {'option1': 'A', 'option2': 'May', 'option3': 'Spring', 'option4': '50'},
     {'option1': 'A', 'option2': 'June', 'option3': 'Summer', 'option4': '70'},
     {'option1': 'B', 'option2': 'July', 'option3': 'Summer', 'option4': '90'},
     {'option1': 'B', 'option2': 'August', 'option3': 'Summer', 'option4': '100'},
     {'option1': 'B', 'option2': 'September', 'option3': 'Fall', 'option4': '80'},
     {'option1': 'B', 'option2': 'October', 'option3': 'Fall', 'option4': '75'},
     {'option1': 'B', 'option2': 'November', 'option3': 'Fall', 'option4': '75'},
     {'option1': 'B', 'option2': 'December', 'option3': 'Winter', 'option4': '25'}]

df = pd.DataFrame(d)

tmap_figure = px.treemap(df, path=['option1', 'option2', 'option3', 'option4'],
                         values='option4')
tmap_figure.data[0]['textinfo'] = str('label+text+value+percent root+percent entry+percent parent')
tmap_figure.data[0]['hovertemplate'] = str('ID: %{id}<br>Parent: %{parent}<br>Label: %{label}<br>Count: %{value}')
tmap_figure.data[0]['textfont']['color'] = str("white")
tmap_figure.update_traces(marker=dict(cornerradius=5), root_color="dimgray")
tmap_figure.update_layout(
    bargap=0.2,
    margin=dict(t=5, b=5, l=5, r=5),
    template='plotly_dark',
    plot_bgcolor='rgba(0, 0, 0, 0)',
    paper_bgcolor='rgba(0, 0, 0, 0)',
    font=dict(
        family="Droid Serif, monospace",
        size=14,
    )
)

# ====== Discrete color theme
discrete_colors = {"A": "#c6d7b9",
                   "B": "#008000"}

tmap_figure = px.treemap(df, path=['option1', 'option2', 'option3', 'option4'],
                         values='option4',
                         color='option1',
                         color_discrete_map=discrete_colors)
tmap_figure.data[0]['textinfo'] = str('label+text+value+percent root+percent entry+percent parent')
tmap_figure.data[0]['hovertemplate'] = str('ID: %{id}<br>Parent: %{parent}<br>Label: %{label}<br>Count: %{value}')
tmap_figure.data[0]['textfont']['color'] = str("white")
tmap_figure.update_traces(marker=dict(cornerradius=5), root_color="dimgray")
tmap_figure.update_layout(
    bargap=0.2,
    margin=dict(t=5, b=5, l=5, r=5),
    template='plotly_dark',
    plot_bgcolor='rgba(0, 0, 0, 0)',
    paper_bgcolor='rgba(0, 0, 0, 0)',
    font=dict(
        family="Droid Serif, monospace",
        size=14,
    )
)

Any insights or direction on the matter is greatly appreciated!

1 Like
2

I have same problem. Did you found solution for this?