Plotly plot with multiple marginal

Question

I am doing some ECDF plots with Plotly. Consider as a MWE the example:

import plotly.express as px
df = px.data.tips()
fig = px.ecdf(df, x="total_bill", color="sex", markers=True, lines=False, marginal="histogram")
fig.show()

Here the marginal plot is a histogram, we can also change it to marginal='rug'. I would like to have the two of them at the same time, something like marginal=['histogram','rug'] to produce this:

Is it possible?

Answer 1

You can start by creating two different figures to hold the histogram marginal plot and the rug marginal plot. However, if you want to combine their traces, the easiest way is probably to use subplots so you can place the traces for the rug plot without overlapping the traces from the histogram plot.

I am not sure how to incorporate the layout of the two figures into subplots, so after placing the traces in the subplots, I also had to manually label the axes.

For example:

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

fig = make_subplots(rows=3, cols=1, row_heights=[0.25, 0.25, 0.5])

fig1 = px.ecdf(df, x="total_bill", color="sex", markers=True, lines=False, marginal="histogram")
fig2 = px.ecdf(df, x="total_bill", color="sex", markers=True, lines=False, marginal="rug")

## rug plot components
fig.add_trace(fig2.data[1],row=1, col=1)
fig.add_trace(fig2.data[3],row=1, col=1)

## histogram components 
fig.add_trace(fig1.data[1], row=2, col=1)
fig.add_trace(fig1.data[3], row=2, col=1)

## cumulative distribution scatter
fig.add_trace(fig1.data[0], row=3, col=1)
fig.add_trace(fig1.data[2], row=3, col=1)

fig['layout']['barmode'] = 'overlay'
fig['layout']['xaxis3']['title'] = 'total_bill'
fig['layout']['yaxis3']['title'] = 'probability'
fig.show()