Cannot reproduce 2 tutorials using FigureWidget/plotly express with ipywidgets

[hoangthienan95]

Hi there. I can't seem to reproduce the following two examples:

1. https://plot.ly/python/selection-events/
2. https://plot.ly/python/figurewidget-app/, possible duplicate: https://plot.ly/python/widget-app/

Versions:

for 1., code was changed a bit to use plotly express:

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
from ipywidgets import interactive, HBox, VBox

df = pd.read_csv('https://raw.githubusercontent.com/jonmmease/plotly_ipywidget_notebooks/master/notebooks/data/cars/cars.csv')

#original.this didn't work also
#f = go.FigureWidget([go.Scatter(y = df['City mpg'], x = df['City mpg'], mode = 'markers')])

f = px.scatter(df, y = 'City mpg', x = 'Torque')

scatter = f.data[0]
N = len(df)
scatter.x = scatter.x + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())
scatter.y = scatter.y + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())
scatter.marker.opacity = 0.5

def update_axes(xaxis, yaxis):
    scatter = f.data[0]
    scatter.x = df[xaxis]
    scatter.y = df[yaxis]
    with f.batch_update():
        f.layout.xaxis.title = xaxis
        f.layout.yaxis.title = yaxis
        scatter.x = scatter.x + np.random.rand(N)/10 *(df[xaxis].max() - df[xaxis].min())
        scatter.y = scatter.y + np.random.rand(N)/10 *(df[yaxis].max() - df[yaxis].min())
    
axis_dropdowns = interactive(update_axes, yaxis = df.select_dtypes('int64').columns, xaxis = df.select_dtypes('int64').columns)

# Create a table FigureWidget that updates on selection from points in the scatter plot of f
t = go.FigureWidget([go.Table(
    header=dict(values=['ID','Classification','Driveline','Hybrid'],
                fill = dict(color='#C2D4FF'),
                align = ['left'] * 5),
    cells=dict(values=[df[col] for col in ['ID','Classification','Driveline','Hybrid']],
               fill = dict(color='#F5F8FF'),
               align = ['left'] * 5))])

def selection_fn(trace,points,selector):
    t.data[0].cells.values = [df.loc[points.point_inds][col] for col in ['ID','Classification','Driveline','Hybrid']]

scatter.on_selection(selection_fn)

I can display the scatterplot f when using plotly express (not when use the original go.FigureWidget but when I do:

• VBox((HBox(axis_dropdowns.children),f,t)): Error: f needs to be of type FigureWidget
• VBox((HBox(axis_dropdowns.children),go.FigureWidget(f),t)): nothing happens
• **VBox((go.FigureWidget(f),t))**: `same as above

Example 2

Nothing displays after I run the code

[hoangthienan95]

Update, after a long time trying, I got the versions to match up and it now shows the FigureWidget in Jupyterlab. However, the `scatter.on_selection(selection_fn) part doesn't work. The table does not change as I select on the graph like the example show.