Plotly - "grouped" scatter plot

Question

Suppose I have the following pandas data frame:

import pandas as pd
d = {'Person': ['Bob']*9 + ['Alice']*9,
    'Time': ['Morining']*3 + ['Noon']*3 + ['Evening']*3 + ['Morining']*3 + ['Noon']*3 + ['Evening']*3,
    'Color': ['Red','Blue','Green']*6,
    'Energy': [1,5,4,7,3,6,8,4,2,9,8,5,2,6,7,3,8,1]}
df = pd.DataFrame(d)

How can I create a plot like this? (Excuse the crude plotting)

I've tried tricking scatter, strip and box plots into this, but with no success.

Thank you!

Answer 1

• generate a scatter trace per Person
• a bit of logic on x so that each person is offset. Hence hovertext and xaxis ticks

import plotly.graph_objects as go

xbase = pd.Series(df["Time"].unique()).reset_index().rename(columns={"index":"x",0:"Time"})
dfp = df.merge(xbase, on="Time").set_index("Person")

go.Figure(
    [
        go.Scatter(
            name=p,
            x=dfp.loc[p, "x"] + i/10,
            y=dfp.loc[p, "Energy"],
            text=dfp.loc[p, "Time"],
            mode="markers",
            marker={"color": dfp.loc[p, "Color"], "symbol":i, "size":10},
            hovertemplate="(%{text},%{y})"
        )
        for i, p in enumerate(dfp.index.get_level_values("Person").unique())
    ]
).update_layout(xaxis={"tickmode":"array", "tickvals":xbase["x"], "ticktext":xbase["Time"]})

Answer 2

You've already received some great suggestions, but since you're still wondering about:

What if I also want the colors to show in the legend?

I'd just like to chip in that px.scatter comes really close to being an optimal approach right out of the box. The only thing that's missing is jitter. Still, the plot below can be produced by these few lines of code:

fig = px.scatter(df, x = 'Time', y = 'Energy', color = 'Color', symbol = 'Person')

fig.for_each_trace(lambda t: t.update(marker_color = t.name.split(',')[0],
                                      name = t.name.split(',')[1], x = [1,2,3]))

fig.for_each_trace(lambda t: t.update(x=tuple([x + 0.2 for x in list(t.x)])) if t.name == ' Alice' else ())

Complete code:

import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

# data
d = {'Person': ['Bob']*9 + ['Alice']*9,
    'Time': ['Morining']*3 + ['Noon']*3 + ['Evening']*3 + ['Morning']*3 + ['Noon']*3 + ['Evening']*3,
    'Color': ['Red','Blue','Green']*6,
    'Energy': [1,5,4,7,3,6,8,4,2,9,8,5,2,6,7,3,8,1]}
df = pd.DataFrame(d)

# figure setup
fig = px.scatter(df, x = 'Time', y = 'Energy', color = 'Color', symbol = 'Person')

# some customizations in order to get to the desired result:
fig.for_each_trace(lambda t: t.update(marker_color = t.name.split(',')[0],
                                      name = t.name.split(',')[1],
                                     x = [1,2,3]))
# jitter
fig.for_each_trace(lambda t: t.update(x=tuple([x + 0.2 for x in list(t.x)])) if t.name == ' Alice' else ())


# layout
fig.update_layout(xaxis={"tickmode":"array","tickvals":[1,2,3],"ticktext":df.Time.unique()})
    
fig.show()

Room for improvement:

Some elements of the snippet above could undoubtedly be made more dynamic, like x = [1,2,3] which should take into account a varying number of elements on the x-axis. The same goes for the number of people and the arguments used for jitter. But I can look into that too if this is something you can use.