Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Create subplot of annotated heatmap

So I’m trying to create an annotated heatmap comprised of subplots and how can i add the annotations.
The data looks as so:

the code is as below:

fig = make_subplots(rows=n_rows, vertical_spacing=0.0,horizontal_spacing=0.0,shared_yaxes=True,shared_xaxes=True)
for row in range(n_rows):
    fig1 = ff.create_annotated_heatmap(np.array(test.iloc[[row]]),x = test.columns.tolist(), y=[test.iloc[[row]].index[0]], showscale=False,colorscale=colorscale)
    fig.append_trace(fig1.data[0], row=row+1, col=1)

fig.update_xaxes(showticklabels=False)
fig.layout.update(xaxis={'side':'top','showticklabels':True})
  
fig.show()

and the figure looks as so:

when i try to add annotations as so it comes out looking weird:

fig = make_subplots(rows=n_rows, vertical_spacing=0.0,horizontal_spacing=0.0,shared_yaxes=True,shared_xaxes=True)
anno = list()
for row in range(n_rows):
    fig1 = ff.create_annotated_heatmap(np.array(test.iloc[[row]]),x = test.columns.tolist(), y=[test.iloc[[row]].index[0]], showscale=False,colorscale=colorscale)
    fig.append_trace(fig1.data[0], row=row+1, col=1)
    anno +=fig1.layout.annotations
for ann in anno:
    fig.add_annotation(ann)
fig.update_xaxes(showticklabels=False)
fig.layout.update(xaxis={'side':'top','showticklabels':True})
  
fig.show()

resulting figure:

@albint

Please read the comments in this thread:
https://community.plotly.com/t/how-to-create-annotated-heatmaps-in-subplots/36686/25. I

@albint

IMPORTANT UPDATE:
Starting with Plotly v 5.5.0 ff.create_annotated_heatmap() became obsolete. With px.imshow() (print help(px.imshow) for details) it is easier to create both a single annotated heatmap and subplot sof such heatmaps.

This is an example of subplot:

import numpy as np
import plotly.express as px
from plotly.subplots import make_subplots

z1 = (-1+2*np.random.rand(36)).reshape((6,6))
z2 = (-1+2*np.random.rand(36)).reshape((6,6))

fig = make_subplots(rows=1, cols=2, horizontal_spacing=0.05,
                   subplot_titles=("Pearson r  for X and Y", "Pearson r for V and W"))


fig.add_trace(px.imshow(z1, text_auto='.2f').data[0], 1, 1)
fig.add_trace(px.imshow(z2, text_auto='.2f').data[0], 1, 2)

print(fig.data[0].coloraxis, fig.data[1].coloraxis)

#if you want to use different colorscale for each subplot, rename coloraxis as follows:

fig.update_traces(coloraxis='coloraxis1',selector=dict(xaxis='x'))
fig.update_traces(coloraxis='coloraxis2',selector=dict(xaxis='x2'))

fig.update_layout(title_text="Example of  annotated heatmap subplots, created via px.imshow",
                  title_x=0.5,
                  yaxis_autorange="reversed",
                  coloraxis=dict(colorscale='balance', 
                                 colorbar_thickness=25,
                                 colorbar_x=-0.12),
                  yaxis2_autorange="reversed",
                  coloraxis2=dict(colorscale='curl',
                                  colorbar_thickness=25,
                                  ))