Sunday, 13 October 2019

Select and delete data points in plotly dash 3d scatter

I am trying to add interactivity to a plotly 3d scatter plot which I am hosting using dash. My question contains two related parts:

(i) I would like to manually select points in my 3d scatter and change the selected points' colour to red. Selection should include click event and selection event.

(ii) I would like to be able to delete these points from the plot on pressing of a key e.g. 'delete' key.

Part (i) is similar to an example in the plotly guide https://plot.ly/python/click-events/, however, on_click is not available as a method for 3d scatter charts.

I have been attempting to use FigureWidget as that apparently provides methods to capture clicks and selections, but after 2 days I am struggling to make headway.

Example data (copy below to clipboard and run df = pd.read_clipboard(sep=','))

id,x_val,z_val,y_val
a,11.313449728149418,0.13039110880256777,0.5386387766748618
b,11.321463427315383,0.2360697833061771,1.32441455152796
c,10.127132005050942,0.23085014016641864,1.0961116175427044
d,11.639819269465233,0.0958798324712593,0.6506370305953094
e,8.892696370438149,0.08223988244819926,0.6440321391968353
f,6.711586646011124,0.3657515974938044,
g,7.095030650760687,,0.5723062047617504
h,6.4523124528415,,1.293852184258803
i,7.165105300812886,0.4151365420301895,-0.5920674079031845
j,7.480703395137295,0.14284429977557123,1.0600936940126982
k,5.570775744372319,,
l,4.358946555449826,,

I have example code below which I hope is almost there (but not quite). The idea is that 'handle_click' should capture click events. I should also handle 'selection' events, although I am not sure how to do this as 3d scatter plot does not provide a selection box or lassoo tool. With the callback, I'm not even sure how to initiate, as there is no clickData/selectionData event with 3d scatterplot that I can utilize (so [Input('subindustry-dropdown', 'value')]) is incorrect and note that subindustry-dropdown is not something that I have provided in the example, but I select my ids from a dropdown which returns a subindustry value in my development version. )

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly.graph_objs as go
import pandas as pd

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})

app.layout = html.Div([html.Div(id = '3d-scatter'),
])


# Calculate and store data
@app.callback(Output('3d-scatter', 'children'),
               [Input('subindustry-dropdown', 'value')])
def chart_3d():          
    f = go.FigureWidget(px.scatter_3d(df, x = 'x_val', y = 'y_val', z = 'z_val', hover_name = 'company_nm'))

    f.layout.clickmode = 'event+select'
    f.data[0].on_click(handle_click) # if click, then update point/df.      

    return dcc.Graph(id = '3d_scat', figure=f)

def handle_click(trace, points, selector):
    c = list(f.data[0].marker.color)
    s = list(f.data[0].marker.size)
    for i in points.point_inds:
        c[i] = '#bae2be'
        s[i] = 20
        with f.batch_update():
            f.data[0].marker.color = c
            f.data[0].marker.size = s
    return f.data[0]


from Select and delete data points in plotly dash 3d scatter

No comments:

Post a Comment