Legend label Heatmap Plotly

Question

I am trying to build a waffle chart out of a heatmap in Plotly. Code is working well, but now instead of having a legend based on the numerical data, I want to show the text ( ie Moderate distance to target" instead of 2). Any idea how to move forward? Thanks!

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

#dictionary that maps the heatmap z-values to strings
d = {1: "Insufficient data",
    2: "Moderate distance to target",
    3: "Close to target",
    4: "Far from target",
    5: "Very far from target",
    6: "Target met or almost met",
    }

M = max([len(s) for s in d.values()])
customdata= np.empty((m,n), dtype=f'<U{M}')  #supplementary information on each waffle cell

colorscale = [[0, "#adb5bd"],
              [0.16, "#adb5bd"],
              [0.16, "#ffc107"],
              [0.33,  "#ffc107"],
              [0.33,  "#28a745"],
              [0.5,  "#28a745"],
              [0.5,  "#d76406"],
              [0.66,  "#d76406"],
              [0.66,  "#dc3545"],
              [0.83, "#dc3545" ],
              [0.83, "#007bff" ],
              [1, "#007bff"]]

ticktext = ["Insufficient data", "Moderate distance to target", "Close to target", "Far from target", "Very far from target","Target met or almost met"]
xlabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
ylabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']

fig = go.Figure(go.Heatmap(x=xlabels, y = ylabels, z=z,
                           customdata=customdata, xgap=3, ygap=3,
                           colorscale=colorscale, showscale=True,
                           hovertemplate="(%{y}, %{x}): %{customdata})<extra></extra>"))
fig.update_layout(margin=dict(l=40, r=20, t=20, b=40),yaxis_autorange='reversed')
fig.update_yaxes(showticklabels=False)
fig.update_xaxes(showticklabels=False)
[enter image description here][1]fig.update_traces(colorbar_orientation='h', selector=dict(type='heatmap'))

Answer 1

Based on the code that you provided, it looks like you are creating a heatmap using the go.Heatmap chart type from the Plotly library. You have defined the data for the heatmap using the z parameter, which is a 2D array of values, and the customdata parameter, which is an array of strings that contain supplementary information for each cell in the heatmap.

To display the text labels from the d dictionary instead of the numerical values in z, you can use the text parameter of the go.Heatmap chart type to specify the text labels for each cell.

Here is an example of how you can modify your code to achieve this:

import plotly.graph_objects as go

# Map the values in z to the corresponding text labels from the d dictionary
text = [[d[z[i][j]] for j in range(n)] for i in range(m)]

fig = go.Figure(go.Heatmap(x=xlabels, y = ylabels, z=z, text=text,
                           customdata=customdata, xgap=3, ygap=3,
                           colorscale=colorscale, showscale=True,
                           hovertemplate="(%{y}, %{x}): %{customdata})<extra></extra>"))
fig.update_layout(margin=dict(l=40, r=20, t=20, b=40),yaxis_autorange='reversed')
fig.update_yaxes(showticklabels=False)
fig.update_xaxes(showticklabels=False)
fig.update_traces(colorbar_orientation='h', selector=dict(type='heatmap'))

In this modified code, the text parameter is set to a 2D array that contains the text labels from the d dictionary, mapped to the corresponding values in z. This will cause the text labels to be displayed instead of the numerical values in the heatmap.

I hope this helps. Let me know if you have any questions.

Answer 2

This is accomplished by setting the string you wish to set and the value of the color bar (the position you wish to display). Just understand that the scale values you set here are for your graph and string length, so you will need to manually modify them if you change the graph size or string.

fig = go.Figure(go.Heatmap(x=xlabels, 
                           y=ylabels,
                           z=z,
                           customdata=customdata,
                           xgap=2,
                           ygap=2,
                           colorscale=colorscale,
                           showscale=True,
                           hovertemplate="(%{y}, %{x}): %{customdata})<extra></extra>",
                          )
               )
fig.update_traces(colorbar_orientation='h',
                  colorbar_tickmode='array',
                  colorbar_ticktext=ticktext,
                  colorbar_tickvals=[1.30, 2.25, 3.0, 3.8, 4.75, 5.65],
                  colorbar_tickangle=0,
                  selector=dict(type='heatmap')
                 )
fig.update_yaxes(showticklabels=False)
fig.update_xaxes(showticklabels=False)

fig.show()