Adding colorbar to a scatterplot (>1 panels) generated through add.scatter

Viewed 22

Is there a way to add a colorbar to a figure that consists of two scatterplots generated through add.scatter? As an example, below I'm showing a simple dataframe where there are two Items (to be plotted along X and Y) and two Properties of those Items: Property1 distinguishes the two Items, so that they need different panels (and I want that; real-life data are much bulkier than this example and require separation), while Property2 is reflected in the color of the markers. I would like to have a colorbar showing the correspondence between the values of Property2 and the color of the markers. Now, for the sake of this example it does not really matter whether the bar describes each panel or there is one bar for both (e.g. both datasets have the lowest and the highest values of Property2), but I can imagine a scenario where it matters. Please find the code and the result below. Thank you.

from plotly.subplots import make_subplots
import pandas as pd


dataset= {'Item1': ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"],
        'Item2': ["Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF"],
       'Property1': [1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, ], 
       'Property2': [150, 300, 400, 100, 200, 200, 300, 100, 400, 150, 200, 100, 300, 350, 250, 100 ]}
df = pd.DataFrame(data=dataset)

df_1 = df[df['Property1'] ==1]
df_0 = df[df['Property1'] ==0]

MyPlot = make_subplots(rows=1, cols=2)


MyPlot.add_scatter(x = df_1['Item1'], y = df_1['Item2'], mode = "markers", row = 1, col = 1, marker_color = df_1['Property2'], marker_size = 10, name = 'Property1 = 1')
MyPlot.add_scatter(x = df_0['Item1'], y = df_0['Item2'], mode = "markers", row = 1, col = 2, marker_color = df_0['Property2'], marker_size = 10, name = 'Property1 = 0')

MyPlot.update_layout(height=400, width=800, xaxis_gridcolor = 'beige', yaxis_gridcolor = 'beige', plot_bgcolor = 'white')
MyPlot.show()

Result

1 Answers

If color bars are needed for each scatter plot, add a color scale setting to the graph settings. Adding a color bar will adjust the graph spacing so that the graph and color bar overlap. The legend is intentionally hidden, but enable this line if needed. (with the legend hidden disabled)

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd

dataset= {'Item1': ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"],
        'Item2': ["Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF"],
       'Property1': [1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, ], 
       'Property2': [150, 300, 400, 100, 200, 200, 300, 100, 400, 150, 200, 100, 300, 350, 250, 100 ]}
df = pd.DataFrame(data=dataset)

df_1 = df[df['Property1'] ==1]
df_0 = df[df['Property1'] ==0]

MyPlot = make_subplots(rows=1, cols=2, horizontal_spacing=0.3)

MyPlot.add_scatter(x = df_1['Item1'],
                   y = df_1['Item2'],
                   mode = "markers",
                   row = 1,
                   col = 1,
                   marker_color = df_1['Property2'],
                   marker_colorscale='Plasma',
                   marker_showscale=True,
                   marker_colorbar_x=0.45,
                   marker_size = 10,
                   name = 'Property1 = 1'
                  )
MyPlot.add_scatter(x = df_0['Item1'],
                   y = df_0['Item2'],
                   mode = "markers",
                   row = 1,
                   col = 2,
                   marker_color = df_0['Property2'],
                   marker_colorscale='Plasma',
                   marker_showscale=True,
                   marker_size = 10,
                   name = 'Property1 = 0'
                  )

MyPlot.update_layout(height=400, width=800, xaxis_gridcolor = 'beige', yaxis_gridcolor = 'beige', plot_bgcolor = 'white')
MyPlot.update_layout(showlegend=False)
#MyPlot.update_layout(legend=dict(yanchor="top", y=0.99, xanchor="left", x=1.15))
MyPlot.show()

enter image description here

Related