Plotly with Pandas dataframe side by side in Jupyter notebook

Question

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?

Yoda · Accepted Answer · 2023-07-05 06:45:36Z

4

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:

edited Jul 5, 2023 at 6:45

answered Jul 3, 2023 at 12:29

Yoda

7101 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wayne · Accepted Answer · 2023-07-03 16:39:09Z

0

I think the original poster here posted an updated answer that does what you are looking for using make_subplots():

Is there a way to use ONE Plotly drop down button to interact with data as well as a plot?

It does more than you need; however, you should be able to adapt it to remove that and build in your code.

edited Jul 3, 2023 at 16:39

answered Jul 3, 2023 at 12:27

Wayne

10.7k13 gold badges79 silver badges239 bronze badges

Collectives™ on Stack Overflow

Plotly with Pandas dataframe side by side in Jupyter notebook

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related