Plotly: show dendogram and heatmap side by side in HTML file

Question

I want to show dendrogram and heatmap side by side in a HTML file. Currently, I am able to show them one after another. I tried using subplot but not able to understand what traces need to be added. Below is the code I am using to generate HTML output:

import plotly.graph_objects as go
import plotly.figure_factory as ff
import plotly
import numpy as np
from scipy.spatial.distance import pdist, squareform
import scipy.cluster.hierarchy as sch

# get data
data = np.genfromtxt("http://files.figshare.com/2133304/ExpRawData_E_TABM_84_A_AFFY_44.tab",
                     names=True,usecols=tuple(range(1,30)),dtype=float, delimiter="\t")
data_array = data.view((np.float, len(data.dtype.names)))
data_array = data_array.transpose()
labels = data.dtype.names



fig1 = ff.create_dendrogram(data_array,
                           linkagefun = lambda x: sch.linkage(x, "average"), labels=labels, orientation='bottom')
fig1.update_layout(title = 'Hierarchical Clustering', xaxis_title='Samples', title_font_color="Blue",
                    width=900, height=800)

# Initialize figure by creating upper dendrogram
fig = ff.create_dendrogram(data_array, orientation='bottom', labels=labels)
for i in range(len(fig['data'])):
    fig['data'][i]['yaxis'] = 'y2'

# Create Side Dendrogram
dendro_side = ff.create_dendrogram(data_array, orientation='right')
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)

# Create Heatmap
dendro_leaves = dendro_side['layout']['yaxis']['ticktext']
dendro_leaves = list(map(int, dendro_leaves))
data_dist = pdist(data_array)
heat_data = squareform(data_dist)
heat_data = heat_data[dendro_leaves,:]
heat_data = heat_data[:,dendro_leaves]

heatmap = [
    go.Heatmap(
        x = dendro_leaves,
        y = dendro_leaves,
        z = heat_data,
        colorscale = 'Blues'
    )
]

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)

# Edit Layout
fig.update_layout({'width':800, 'height':800,
                         'showlegend':False, 'hovermode': 'closest',
                         })
# Edit xaxis
fig.update_layout(xaxis={'domain': [.15, 1],
                                  'mirror': False,
                                  'showgrid': False,
                                  'showline': False,
                                  'zeroline': False,
                                  'ticks':""})
# Edit xaxis2
fig.update_layout(xaxis2={'domain': [0, .15],
                                   'mirror': False,
                                   'showgrid': False,
                                   'showline': False,
                                   'zeroline': False,
                                   'showticklabels': False,
                                   'ticks':""})

# Edit yaxis
fig.update_layout(yaxis={'domain': [0, .85],
                                  'mirror': False,
                                  'showgrid': False,
                                  'showline': False,
                                  'zeroline': False,
                                  'showticklabels': False,
                                  'ticks': ""
                        })
# Edit yaxis2
fig.update_layout(yaxis2={'domain':[.825, .975],
                                   'mirror': False,
                                   'showgrid': False,
                                   'showline': False,
                                   'zeroline': False,
                                   'showticklabels': False,
                                   'ticks':""})

# Plot!
with open('p_graph.html', 'a') as f:
    f.write(fig1.to_html(full_html=True, include_plotlyjs='cdn'))
    f.write(fig.to_html(full_html=True, include_plotlyjs='cdn'))
    

I want to show fig and fig1 side by side in output html file.

Answer 1

Since you already have a working solution for your plots, I think the quickest and most flexible way is to edit the HTML rather than creating new subplots. I'll leave it to someone else to tackle a make_subplots solution if they're interested.

Here are the relevant HTML snippets. Note that I had to edit out much of the plotly output in order to meet Stack Overflow's post length limits. If you'd like the full, copy-pastable version, see here . To view what the output looks like rendered in your browser, see here .

Your HTML output file looks like this:

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</body>
</html><html>
<head><meta charset="utf-8" /></head>
<body>
    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>     
</body>
</html>

If you

1. remove the extra <html> , <body> , and <head> tags in the middle of the file,
2. wrap the two plot-containing <div> s with one additional <div style="width: 100%;">... </div> , and finally
3. add style attributes to the plot-containing <div> s to position them appropriately,

the edited HTML looks something like this (again not copy-pastable -- see above):

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div style="width: 100%;">
        <div style="width: 50%; float: left">                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                <div id="fe871eb9-b516-4575-8ce0-6116d52c7229" class="plotly-graph-div" style="height:800px; width:900px;"></div>     
        <div style="margin-left: 50%">                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                <div id="a148bd6e-da2a-4260-b1a5-94f96e8de9f3" class="plotly-graph-div" style="height:800px; width:800px;"></div> 
    </div>
</body>
</html>

Note that there are multiple ways to position the plots on the page using style attributes -- this is just one simple example using style="width: 50%; float: left" for the left plot and style="margin-left: 50%" for the right plot.