Interactive crossfiltering (discrete and continuous color sequence)

Dash Python
1

Hello everyone,

I’m facing an issue by interactive crossfiltering in Dash.
The task of the code is to show (by click) for each point on the scatterbox the corresponing profile.
This works if the color scale is continuous. If the color scale is discrete it does not work anymore.
The only change in the code is:
fig = px.scatter(df, x = ‘x1_list’, y = ‘y1_list’, color = ‘num_list’,hover_name=df.index) # THIS IS WORKING
fig = px.scatter(df, x = ‘x1_list’, y = ‘y1_list’, color = ‘cat_list’,hover_name=df.index) # THIS IS NOT WORKING

Attached you find the code.

Thank-you for your support!
Best Regards.

‘’’
import numpy as np
import pandas as pd
import plotly_express as px
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

n = 10
x1= np.arange(n)

alfa = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘L’]
y1 =
a_list =

y1 =
x2 =

x1_list =
y1_list =
j = 0
id_list =

cat_list =
num_list =

for i in alfa:
if j in range(0,5):
cat_list.append(‘A’)
num_list.append(1)
else:
cat_list.append(‘B’)
num_list.append(2)

y1.append(x1**j)
x2.append(x1)
a_list.append(alfa[j])
x1_list.append(np.random.randint(0, 10))
y1_list.append(np.random.randint(5, 20))
id_list.append(j)
j = j + 1

df = pd.DataFrame({‘id_list’: id_list, ‘x1_list’: x1_list, ‘y1_list’: y1_list, ‘a_list’: a_list, ‘x1’: x2, ‘y1’: y1, ‘cat_list’: cat_list, ‘num_list’: num_list})
#################################################################################################################################
#################################################################################################################################
fig = px.scatter(df, x = ‘x1_list’, y = ‘y1_list’, color = ‘num_list’,hover_name=df.index) # THIS IS WORKING
fig = px.scatter(df, x = ‘x1_list’, y = ‘y1_list’, color = ‘cat_list’,hover_name=df.index) # THIS IS NOT WORKING
#################################################################################################################################
#################################################################################################################################

fig.update_traces(customdata=df.index)

fig.update_traces(marker=dict(size=28,
line=dict(width=2,
color=‘black’)))

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div([
dcc.Graph(
id=‘scatter_graph’,
figure = fig,
clickData={‘points’: [{‘customdata’: 2}]}),
dcc.Graph(
id=‘graph_profile’)
])
])

@app.callback(
Output(‘graph_profile’, ‘figure’),
[Input(‘scatter_graph’, ‘clickData’)
])
def update_figure(clickData):

start_value = clickData['points'][0]['customdata']
id_1 = df[df.index == start_value].index.values[0]

x = df[df.index == start_value]['x1'].values[0]
y = df[df.index == start_value]['y1'].values[0]
title = 'index is: ' + str(id_1)

fig_1 = px.line(x = x, y = y, title = title, range_x=[0, 10], range_y=[0, 600])
return fig_1

if name == ‘main’:
app.run_server()
‘’’