How to add grouping color and labels to rows in in heatmap dendrogram?

📊 Plotly Python
1

Dear Developers,

I have created a heatmap with dendrogram using Plotly bases on the example code. My example data called dataHeat_arr is numpy.ndarray, which has 75 rows (samples called S0 till S74) and 100 columns (Metabolites called M0 till M99) and available in the link.
The 75 samples include 3 types classes: Before, after, and QC.

I want to visualize by color and text (besides the S0, S1,…till S75) to which class belongs every sample.

my code looks like that :

import plotly.figure_factory as ff
import numpy as np
np.random.seed(1)
import pandas as pd
import numpy as np
import string 
from itables import init_notebook_mode
from itables import show
import cimcb_lite as cb
import plotly.graph_objects as go
init_notebook_mode(all_interactive=True)


dataHeat= dataTable.drop(dataTable.loc[:, ('SampleID', 'SampleType', 'Class')].columns, axis = 1)
dataHeat = dataHeat.iloc[:, 1:100]
dataHeat_arr = dataHeat.to_numpy()
# dataHeat_arr = np.log10(dataHeat_arr) 
dataHeat_arr = cb.utils.scale(dataHeat_arr, method='auto') 


classsamplen= dataTable[[ 'Class']]
# name the samples S0 till S74
Samplenum = ["S" + str(x) for x in idx]
labels = Samplenum
dataHeat_arr_t= np.transpose(dataHeat_arr)
# Initialize figure by creating upper dendrogram
# fig = ff.create_dendrogram(dataHeat_arr, orientation='bottom', labels=labels)
fig = ff.create_dendrogram(dataHeat_arr_t, orientation='bottom', labels=name_molec[:99] )


for i in range(len(fig['data'])):
    fig['data'][i]['yaxis'] = 'y2'

# Create Side Dendrogram

# dendro_side = ff.create_dendrogram(dataHeat_arr_t, orientation='right' ,labels=name_molec[:100])
dendro_side = ff.create_dendrogram(dataHeat_arr, orientation='right', labels=["S" + str(x) for x in idx])
for i in range(len(dendro_side['data'])):
    dendro_side['data'][i]['xaxis'] = 'x2'
    
    
# Add Side Dendrogram Data to Figure
for data in dendro_side['data']:
    fig.add_trace(data)

heatmap = [
    go.Heatmap(
        x = name_molec[:99],
        y =labels ,
        z = dataHeat_arr,
        colorscale = 'Cividis'
    )
]

heatmap[0]['x'] = fig['layout']['xaxis']['tickvals']
heatmap[0]['y'] = dendro_side['layout']['yaxis']['tickvals']

# Add Heatmap Data to Figure
for data in heatmap:
    fig.add_trace(data)

fig['layout']['yaxis']['ticktext'] = np.asarray(labels)
fig['layout']['yaxis']['tickvals'] = np.asarray(dendro_side['layout']['yaxis']['tickvals'])

# Edit Layout
fig.update_layout({'width':1000, 'height':750,
                         'showlegend':False, 'hovermode': 'closest',
                         })

# Edit xaxis
fig.update_layout(xaxis={'domain': [.2, 1],
                                  'mirror': False,
                                  'showgrid': False,
                                  'showline': False,
                                  'zeroline': False,
                                  'ticks':""})

# Edit xaxis2
fig.update_layout(xaxis2={'domain': [0, .17],
                                   'mirror': False,
                                   'showgrid': False,
                                   'showline': False,
                                   'zeroline': False,
                                   'showticklabels': False,
                                   'ticks':""})
# Edit yaxis
fig.update_layout(yaxis={'domain': [0, .7],
                                  'mirror': False,
                                  'showgrid': False,
                                  'showline': False,
                                  'zeroline': False,
                                  'showticklabels': True,
                                  'ticks': ""
                        })

# Edit yaxis2
fig.update_layout(yaxis2={'domain':[0.725, 0.975],
                                   'mirror': False,
                                   'showgrid': False,
                                   'showline': False,
                                   'zeroline': False,
                                   'showticklabels': False,
                                   'ticks':""})
fig.show()

and the plot looks like that:

image
image989×698 92.4 KB

I’d like to ask if there is a way to add, next to the left side between the dendrogram and the samples ticks text,
a grouping so I’ll visualize sample class, i.e if belong to QC, After, or Before.

there is this question but could not understand how to apply the answer to my code.

Can output look similar to this?

image
image693×554 136 KB

Any hint \ idea is appreciated

Many thanks !!!