Waffle Chart in plotly dash

📊 Plotly Python
1

Hi,

I am looking to embed a waffle chart into my dash app, but I cannot work out how to do this.

It seems you can only create these in matplotlib and transfer it over? but I also would like it to be interactive.

I am close to giving up on this, does anybody know how to do this? thanks

2

Hi @Emily24,

Define plotly waffle as a go.Heatmap trace with xgap, and ygap.
Here is an example with synthetic data:

import plotly.graph_objects as go
import numpy as np

m= 6
n= 10
z = np.ones((m, n))
z[2:, 7] = 2
z[:4, 8] = 2
z[0, 9] = 2
z[1:, 9] = 3

#dictionary that maps the heatmap z-values to strings
d = {1: "Liberal",
    2: "Conservative",
    3: "New Wave",
    }
M = max([len(s) for s in d.values()])
customdata= np.empty((m,n), dtype=f'<U{M}')  #supplementary information on each waffle cell

for i in range(m):
    for j in range(n):           
        customdata[i,j] = d[z[i, j]] 

#Normalizing the three possible z-values we get 1/3, 2/3, 1;
# define a discrete colorscale that maps 1/3, 2/3, 1 to distinct colors:
colorscale = [[0, "#00cc96"],
              [0.33, "#00cc96"],
              [0.33, "#636efa"],
              [0.66,  "#636efa"],
              [0.66, "#e763fa" ],
              [1, "#e763fa"]]

xlabels = ['Acu', 'Hku', 'Hga', 'Aeo', 'Rlw', 'Eqh', 'Qrx', 'Twu', 'Mvq', 'Xnl']
ylabels = ['Cqu', 'Hcv', 'Ijp', 'Vio', 'Wmt', 'Ljf']


fig = go.Figure(go.Heatmap(x=xlabels, y = ylabels, z=z,
                           customdata=customdata, xgap=3, ygap=3,
                           colorscale=colorscale, showscale=False,
                           hovertemplate="(%{y}, %{x}): %{customdata})<extra></extra>"))
fig.update_layout(width=600, height=450, yaxis_autorange='reversed')

waffle

3 Likes
4

thank you so much, this really helped me out :slight_smile: