Python Mouse Selection Event

📊 Plotly Python
1

Hi all!
I need some heeelp. So, I’m using the example below to replicate the interactivity, but when I select an area on the graph the table doesn’t update on my notebook. I’ve used jupyterlab as well as the regular jupyter-notebook without success. Can anyone test and let me know what i’m doing wrong?

Thanks!

import plotly.graph_objs as go
import plotly.offline as py

import pandas as pd
import numpy as np
from ipywidgets import interactive, HBox, VBox

py.init_notebook_mode()

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

f = go.FigureWidget([go.Scatter(y = df['City mpg'], x = df['City mpg'], mode = 'markers')])
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)

# Put everything together
VBox((HBox(axis_dropdowns.children),f,t))
2

@mini_geek FYI, I tested the code in a Jupyter notebook, and it worked fine.

1 Like
3

:sob: Thanks Knam.
To corroborate, you were able to select points on the graph, and the table below showed only the selected points?

L

4

Hi @mini_geek,

This example is working for me as well (the table updates to show selected rows). I’m not sure of what might be going wrong for you. What versions of plotly.py and jupyter notebook do you have installed?

-Jon

5

Yes. Everything works as intended: Box-selecting and table update. Since the issue cannot be reproduced, it could be from package installation like Jon suggested.

6

:sob:
thanks for the feedback!
plotly ‘3.7.1’ | jupyterlab 4.4.0 | notebook 5.7.8

7

thanks for the support @knam!

8

Hi @mini_geek,

When you perform data selection in the classic notebook, could you check if there are any errors raised in your browser’s JavaScript console? Here are some instructions for Chrome https://www.youtube.com/watch?v=b_F9slIjMiY. but you can do the same thing in other browsers as well.

-Jon

9

Hi Jon, I reinstall and it does kinda work now. I mean that i am able to select and shows me the query table, but is very slow and memory intensive; table or graph don’t reset when clicking the home icon or when double clicking inside the frame.
notebook: on the java side i have “error trying to load resource 404”, “Unhandled Promise Rejection: Error: Resize must be passed a displayed plot div element.” index.js
jupyter-lab: Error displaying widget. on java countless

41%20PM
Screen Shot 2019-06-15 at 8.42.41 PM.png1268×1048 265 KB

thanks!

10

Hi @mini_geek,

Can you try updating your version of plotly.py to 3.10. There have been a couple of FigureWidget updates over the past few releases. If you’re using JupyterLab then also install the plotlywidget@0.11.0 JupyterLab extension.

-Jon

11

Hi @jmmease,

i did, however, i got some unintended consequences. my init_notebook_mode(connected=True) is giving me an error :upside_down_face: Will give an update when i get this issues resolved. Thanks for the tips.

12

Hi @jmmease,

after some struggling i got it working. I followed installation instructions from: https://libraries.io/npm/plotlywidget, and also had to re-install jupyter lab. Widgets are working on both notebook and lab, albeit still a little slow when resetting axes/selections on the graph, the table does not reset.

Thanks for the support!

1 Like