Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

selectData doesnt worth with large datasets

I am trying to use the boxSelect tool with lines in order feed a callback the range selected. Unfortunately, the boxSelect tool doesnt even show up with lines so I had to add 2 points of a scatterplot just to see it. Once I got around that, I saw that the callback wouldnt activate. After hours if trying to identify the problem, I realized that boxselect only works when there are a small amount of points on the graph. If this exceeds a pretty small value (in my case even 100 points), the selectValue callback no longer does anything.

See this code:

import numpy as np

# plotting imports
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

app = dash.Dash()
app.config.supress_callback_exceptions = True

plot1 = dcc.Graph(id='plot1')
plot2 = dcc.Graph(id='plot2')

N=100
plot1_data = [{'x': np.random.rand(N),
               'y': np.random.rand(N),
               'name': 'line',
               },
              {'x': [0, 1, 2],
                 'y': [0, 1, 0],
                 'mode': 'markers',
                 'marker': {'size': 10},
                 'name': 'scatter'
                 },
              ]
plot1_fig = {
        'data': plot1_data,
        'layout': go.Layout(
            hovermode='closest'
        )
    }
plot1.figure=plot1_fig

app.layout = html.Div([plot1, plot2], style={'width': '100%'})



@app.callback(
    Output('plot2', 'figure'),
    [Input('plot1', 'selectedData')])
def update_plot2(some_input):
    print('callback activated')
    x = np.random.rand(10)
    y = np.random.rand(10)
    plot2_data = [{'x': x,
                   'y': y,
                   'mode': 'markers',
                   'marker': {'size': 10}
                   }]
    plot2_fig = {
        'data': plot2_data,
        'layout': go.Layout(
            hovermode='closest'
        )
    }
    return plot2_fig



if __name__ == '__main__':
    app.run_server()

If N=10, the code works fine.

I have a few questions:

  1. This feature of boxselect / selectData callback should be documented and a warning should show up
  2. How can I enable the functionality I want, which is to select a portion of the graph and send the ranges selected (not the points) to a callback. I know I can use the zoom relayoutData callback, but i specifically dont want the graph to change or zoom in.

Thanks for reporting! We’re working on this issue and tracking it in https://github.com/plotly/plotly.js/issues/170.

Yeah, that’s a good idea. We can add it here: https://github.com/plotly/dash-docs/blob/03c58ceaea700012485ede6aa58325cbf12f596a/tutorial/graphing.py#L103

It’s not possible to ignore part of the selectedData object, but that’s a good idea. We could make it a property of dcc.Graph.

Thanks for reporting! Sounds like a bug. However, I can’t reproduce it. Here’s the example that I tried which displays the number of points in the selectedData object:

import numpy as np

# plotting imports
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

app = dash.Dash()

N = 1000

app.layout = html.Div([
    html.Div(id='output'),
    dcc.Graph(
        id='plot',
        figure={
            'data': [{
                'x': np.random.randn(N),
                'y': np.random.randn(N),
                'mode': 'markers'
            }]
        },
        selectedData={
            'points': []
        }
    )
], style={'width': '100%'})


@app.callback(
    Output('output', 'children'),
    [Input('plot', 'selectedData')])
def display_points(selectedData):
    return 'You have selected {} points'.format(
        len(selectedData['points']))


if __name__ == '__main__':
    app.run_server(debug=True)

Finally, if any company out there would like to help prioritize this work through a sponsorship, please reach out: https://plot.ly/products/consulting-and-oem/

A post was split to a new topic: Issue with selectedData