How to add legend to plotly graph_objects plot that describes the colors, not traces?

Question

I would like to have a legend on the right side of my plot that has 10 different color points & (representing the 10 different clusters in the graph below). I've provided two lists before, one that contains the color of each point, and the other list contains the label of each point. So, I'd like for each color in the legend to also have the text corresponding to its label.

Color # of each image: 
['#1f77b4', '#1f77b4', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5']
Cluster # of each image: 
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9]

from jupyter_dash import JupyterDash
from dash import Dash, dcc, html, Input, Output, no_update
import plotly.graph_objects as go
import pandas as pd


## create sample random data
df=interactive_df

fig = go.Figure(data=[
    go.Scatter(
        x=df['x_lv'], #x_px and y_px for pixel data
        y=df['y_lv'], 
        mode='markers',
        marker=dict(color=df['color']), showlegend=True
    )
])

fig.update_traces(marker=dict(size=9,
                              line=dict(width=2,
                                        color='DarkSlateGrey')),
                  selector=dict(mode='markers'))

# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)

Answer 1

Creates a dictionary of unique values from a list of colors and labels. The next step is to create a scatter plot by looping through the data extracted from the data frame based on the colors. In the looping process, the labels are obtained for the colors and used as names.

import plotly.graph_objects as go
import pandas as pd
import numpy as np

# of each image:
Color = ['#1f77b4', '#1f77b4', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5']
# of each image:
Cluster = [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9]

names = {k:str(v) for k,v in zip(set(Color),set(Cluster))}

## create sample random data
df= pd.DataFrame({'x_lv': np.random.randint(0,20, 100),
                  'y_lv':np.random.randint(0,20, 100),
                  'color': Color})

fig = go.Figure()

for c in df['color'].unique():
    df_color= df[df['color'] == c]
    fig.add_trace(
        go.Scatter(
            x=df_color['x_lv'], 
            y=df_color['y_lv'],
            name=names[c],
            mode='markers',
            marker=dict(color=df_color['color']), showlegend=True
        )
    )

fig.update_traces(marker=dict(size=9,
                              line=dict(width=2,
                                        color='DarkSlateGrey')),
                  selector=dict(mode='markers'))

# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)

fig.show()