'plotly python - linked brushing between scatter and parallel coordinates plots

i am trying to build linked brushing between Parallel Coordinates and Scatter plot via plotly.

I have found an example with scatter + parallel categories type of plot here. I was trying to transform this example, which would suite to my purpose, but it does not. With the code i am building, selection for some reason in active on parallel coordinates plot only. Any thoughts what i am doing wrong?

import plotly.graph_objects as go
from ipywidgets import widgets
import pandas as pd
import numpy as np

cars_df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv')




# Build parcats dimensions
categorical_dimensions = ['body-style', 'drive-wheels', 'fuel-type'];

dimensions = [dict(values=cars_df[label], label=label) for label in categorical_dimensions]

# Build colorscale
color = np.zeros(len(cars_df), dtype='uint8')
colorscale = [[0, 'gray'], [1, 'firebrick']]

# Build figure as FigureWidget
fig = go.FigureWidget(
    data=[
        go.Scatter(x=cars_df.horsepower, y=cars_df['highway-mpg'],
                   marker={'color': 'gray'}, mode='markers', selected={'marker': {'color': 'firebrick'}},
                   unselected={'marker': {'opacity': 0.3}}), 
          
        go.Parcats(
              domain={'y': [0, 0.35]}, dimensions=dimensions,
              line={'colorscale': colorscale, 'cmin': 0,
                    'cmax': 1, 'color': color, 'shape': 'hspline'}),
          
          go.Parcoords(
                line = dict(color = cars_df['price']), domain={'y': [0.4, .65]},
              #                    colorscale = [[0,'purple'],[0.5,'lightseagreen'],[1,'gold']]),
                dimensions = list([
                    dict(
#                         range = [2500,4300],
                        label = 'wheel-base', values = cars_df['wheel-base']),
                    dict(
#                                   range = [2500,4300],
                        label = 'engine-size', values = cars_df['engine-size']),
                    dict(
#                                   range = [5,200],
                        label = 'stroke', values = cars_df['stroke']),
                    dict(
#                                   range = [5,200],
                        label = 'compression-ratio', values = cars_df['compression-ratio']),
                    dict(
#                                   range = [0,4],
                        label = 'price', values = cars_df['price']),
#                 dict(range = [0,1],
#                     label = 'PBU_error', values = df_plot['PBU_error'])
            ]),
#               line={'colorscale': colorscale, 'cmin': 0,
#                     'cmax': 1, 'color': color, 'shape': 'hspline'}
          ),
    ])

fig.update_layout(
        height=1500, xaxis={'title': 'Horsepower'},
        yaxis={'title': 'MPG', 'domain': [0.7, 1]},
        dragmode='lasso', hovermode='closest')

# Update color callback
def update_color(trace, points, state):
    # Update scatter selection
    fig.data[0].selectedpoints = points.point_inds

    # Update parcats colors
    new_color = np.zeros(len(cars_df), dtype='uint8')
    new_color[points.point_inds] = 1
    fig.data[1].line.color = new_color
    
    # Update parcats colors
    new_color = np.zeros(len(cars_df), dtype='uint8')
    new_color[points.point_inds] = 1
    fig.data[2].line.color = new_color
    

# Register callback on scatter selection...
fig.data[0].on_selection(update_color)
# and parcats click
fig.data[1].on_click(update_color)
# and parcats click
fig.data[2].on_selection(update_color)


fig


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source