Update annotated heatmap

Dash Python
1

Hello :slight_smile:,
I need to draw annotated heatmap which changes features (rows/columns) shown dynamically. When I draw for first time specific features lets say 9x9 matrix I got normal annotations.
image
But when added additional feature (matrix 10x10) I have issue with annotations are not shown at the right place. Has someone idea what can be the problem ?

image

I am using following code:

corr_text = np.around(corr_sw.values, decimals=2) 

font_colors = ['white', 'black'] 

x = y = corr_sw.columns.tolist()   

corr_matrix_fig = ff.create_annotated_heatmap(corr_sw.values, x=x, y=y, annotation_text=corr_text, colorscale='rdylbu', font_colors=font_colors, showscale = True)

#set xaxis to bottom
corr_matrix_fig['layout']['xaxis']['side'] = 'bottom'

tnx!

2

Hi @anitsay,

The method of updating annotations is a bit unusual. Please read this answer to a similar question, here: https://community.plotly.com/t/how-to-create-annotated-heatmaps-in-subplots/36686/24.

3

Hi @empet,
thank you for your reply, but I am not sure if I understand how can I solve my issue based on provided link. Maybe some additional information: currently I have callback something like below:

@app.callback([Output("corr-matrix", "figure"),
                Output("annotated-corr-matrix", "figure")
                ],
               Input("datatable", "selected_columns")
               )
def update_corr_matrix(selected_col):
     ...calculate correlation matrix values...

        corr_matrix_fig = go.Figure(data=go.Heatmap(
            z=corr, x=corr.columns, y=corr.columns,  colorscale='rdylbu'))
        
        #only show rounded value (full value on hover)
        corr_text = np.around(corr.values, decimals=2) 
        font_colors = ['white', 'black'] 
        x = y = corr.columns.tolist()   
        
        annot_corr_matrix_fig = go.Figure(data = ff.create_annotated_heatmap(corr.values, x=x, y=y, annotation_text=corr_text, colorscale='rdylbu',
                                                     font_colors=font_colors, showscale = False))
        #set xaxis to bottom
        corr_matrix_fig['layout']['xaxis']['side'] = 'bottom'    

        return corr_matrix, annot_corr_matrix_fig
    else:
        return {}, {}

and at every input I have different columns ie diff matrix 9x9 or 10x10. Before I thought that update to higher matrix is an issue but I set in Input of callback matrix 10x10 and I was not able to produce annotated heatmap. I am trying to return annotated heatmap figure to dcc.Graph element.
tnx!

image
image1303×550 34.7 KB

4

@anitsay

Your issue is generated by this line of code:

annot_corr_matrix_fig = go.Figure(data = ff.create_annotated_heatmap(corr.values, x=x, y=y, annotation_text=corr_text, colorscale='rdylbu',
                                                     font_colors=font_colors, showscale = False))

ff.create_annotated_heatmap()

returns a figure or data must be a list of traces.
Hence you should remove data= from the above code.

5

Hi @empet,
I have tried with and without "data = "but with no success, result is the same as before. First I was using ff.create_annotated_heatmap then I decided to try go.Figure but it did not solve my issue.

annot_corr_matrix_fig = ff.create_annotated_heatmap(corr.values, x=x, y=y, 
annotation_text=corr_text, colorscale='rdylbu', font_colors=font_colors, showscale = False)

annot_corr_matrix_fig = go.Figure(ff.create_annotated_heatmap(corr.values, x=x, y=y,
annotation_text=corr_text, colorscale='rdylbu',font_colors=font_colors, showscale = False))
6

@anitsay

In this case I have to create synthetic data and wirte down a code to reproduce your experiment. Could you please please, write down the steps of your code: how many heatmaps do you intend to plot, and whether from one to another, the size is changing.

7

Hi @empet,
thank you for your time and effort. My problem is following: I have some dataframe for example (5, 15) - datatable in dash, on every input in the callback I have different selected number of columns/features for which I produce corr matrix and want to plot annotated heatmap. If 3 columns are selected I need annotated heatmap 3x3, if 10 are selected I need 10x10, so size is changing, on every output graph should be updated accordingly to selected data on input. I need to plot one annotated heatmap.