Plotly with Pandas dataframe side by side in Jupyter notebook

July 3, 2023

There are some questions about how to create two plotly graphs side-by-side in Jupyter notebook or how to show two pandas dataframes side by side. But I would like to display a plotly graph with a pandas dataframe side by side in a Jupyter notebook. Here is some reproducible code for the graph and pandas dataframe:

import pandas as pd
import plotly.express as px

df = px.data.iris() 
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()

# Simple pandas dataframe
df[["sepal_length", "species"]].groupby("species").agg(['mean', 'count', 'median', 'min', 'max'])

Output:

Now the output is below each other, but I would like to have them side by side. So I was wondering if anyone knows how to show a plotly graph side by side with a pandas dataframe?

>Solution :

You can make a subplot and place the table view on the second column. This example should run:

import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots

df = px.data.iris()

specs = [
    [{"type": "xy"}, {"type": "table"}]
]

fig = make_subplots(rows=1, cols=2, specs=specs, subplot_titles=["A Scatter Plot", "A DataFrame"])
fig.add_trace(go.Scatter(
    x=df.index,
    y=df["petal_length"].values
),
row=1, col=1)

fig.add_trace(go.Table(
    header={"values": df.columns},
    cells={"values": df.transpose().values.tolist()}
),
row=1, col=2)
fig.update_layout(template="plotly_dark")
fig.show()

Produces this: