Draw multiple CSV files in a HTML page using Plotly

Question

I want to draw multiple CSV files on an HTML page with fig = make_subplots(rows=.., cols=..).

df1 = pd.read_csv('first_input.csv')
fig1 = px.scatter(df, x="...", y="...", color="..")

df2 = pd.read_csv('first_input.csv')
fig2 = px.scatter(df, x="...", y="...", color="..")

Answer 1

Unfortunately plotly subplots do not directly support plotly.express figures as explained in the documentation here.

However, when you create a plotly.express figure using fig1 = px.scatter(df, x="...", y="...", color=".."), you are actually creating a figure where fig1.data is a tuple of go.Scatter traces. You can access each trace in fig1.data and add it to your subplots object.

If you have multiple px.scatter figures, you can iterate through them, and add each trace from px.scatter figure to your subplots object at the appropriate row and column. Then we can add the axes titles from each px.scatter figure to the subplots object layout.

I'll use the tips sample dataset to demonstrate:

import plotly.express as px
from plotly.subplots import make_subplots
df = px.data.tips()

fig1 = px.scatter(df, x="total_bill", y="tip", color="smoker")
fig2 = px.scatter(df, x="total_bill", y="tip", color="day")

fig_subplots = make_subplots(rows=2, cols=1)

for trace in fig1.data:
    fig_subplots.add_trace(
        trace,
        row=1, col=1
    )
for trace in fig2.data:
    fig_subplots.add_trace(
        trace,
        row=2, col=1
    )

## x and y axies in fig_subplots["layout"] are called xaxis, xaxis2, ..., yaxis, yaxis2, ...
## here we are making the assumption you are stacking your plots vertically
def modify_axis_titles(fig_subplots, px_fig, nrow):
    xaxis_name, yaxis_name = f"xaxis{nrow}", f"yaxis{nrow}"
    fig_subplots['layout'][xaxis_name]['title'] = px_fig.layout['xaxis']['title']
    fig_subplots['layout'][yaxis_name]['title'] = px_fig.layout['yaxis']['title']
        
for px_fig, nrow in zip([fig1, fig2],[1,2]):
    modify_axis_titles(fig_subplots, px_fig, nrow)

fig_subplots.show()