Scatter plot derived from two pandas dataframes with multiple columns in plotly [express]

Question

I want to create a scatter plot that drives its x values from one dataframe and y values from another dataframe having multiple columns.

x_df :

   red  blue
0  1    2
1  2    3
2  3    4

y_df:

   red  blue
0  1    2
1  2    3
2  3    4

I want to plot a scatter plot like

I would like to have two red and blue traces such that x values should come from x_df and y values are derived from y_df.

Answer 1

• at some layer you need to do data integration. IMHO better to be done at data layer i.e. pandas
• have modified your sample data so two traces do not overlap
• used join() assuming that index of data frames is the join key
• could have further structured dataframe, however I generated multiple traces using plotly express modifying as required to ensure colors and legends are created
• have not considered axis labels...

x_df = pd.read_csv(io.StringIO("""   red  blue
0  1    2
1  2    3
2  3    4"""), sep="\s+")

y_df = pd.read_csv(io.StringIO("""   red  blue
0  1.1    2.2
1  2.1    3.2
2  3.1    4.2"""), sep="\s+")

df = x_df.join(y_df, lsuffix="_x", rsuffix="_y")

px.scatter(df, x="red_x", y="red_y").update_traces(
    marker={"color": "red"}, name="red", showlegend=True
).add_traces(
    px.scatter(df, x="blue_x", y="blue_y")
    .update_traces(marker={"color": "blue"}, name="blue", showlegend=True)
    .data
)