How to do interactive data/range selection for use in Python code in a notebook (not dash)?

đź“Š Plotly Python
1

I am confused: I have plotly 5.11.0 installed and I would like to show a graph in a jupyter notebook / lab which allows to select a data range (or ideally just an axis range) and get the data/range back to my python code via a callback.

I have found this page: Selection events in Python/v3 which seems to do something related to what I need.

However, this code does not work for me, the page says it is for version 3 only and I was unable to find the proper current documentation page for this functionality.

Could somebody please point me to information about how to this properly?

2

Is there any other place to find an answer to this question?

3

Hi @johann.petrak, unfortunately I have never really used plotly in this way. If you are open to use jupyter-dash here you’ll find an example of how to use it:

One question: what exactly do you mean by this?

Do you intent to use the plotly figure as “selector” and then use the selected range in a code unrelated to plotly/dash?

4

Here a better example for your use case:

import plotly.express as px
from jupyter_dash import JupyterDash
from dash import Input, Output, State, html, dcc
import pickle

# Load Data
df = px.data.tips()
# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Saving relayoutData into pickle file"),
    dcc.Graph(
        id='graph', 
        figure=px.scatter(
            df, 
            x="total_bill", 
            y="tip", 
            color="size",
            color_continuous_scale='plasma',
            render_mode="webgl", 
            title="Tips"
        )
    ),
    html.Div(
        id='dummy',
        #style={'display': None, 'visibility': 'hidden'}
    )
])

@app.callback(
    Output('dummy', 'children'),
    Input('graph', 'relayoutData'),
    State('dummy','children'),
    prevent_initial_call=True
)
def update_figure(data, current_content):
    # this should be improved. I did not know how to check properly the content of the relayoutData 
    if ("xaxis.range[0]" in data):
        with open('./testfile.pickle','wb') as f:
            pickle.dump(data,f)
        return f"content of the file './testfile.pickle' is currently: {data}"
    else:
        return current_content

# Run app and display result inline in the notebook
app.run_server(mode='inline', port=8078)

To use the data in subsequent code:

with open('./testfile.pickle', 'rb') as f:
    your_variable = pickle.load(f)

I’m almost sure there are better/easier ways to do it, that’s how I would do it with my current knowledge :wink:

Note: By resetting the ranges (for example by double click into the figure) the ranges are updated but the relayoutData does not contain the new axis ranges.

5

Yes, exactly. As I pointed out, this seemed to work and there is a documentation page for how to make it work in Plotly version 3, but I was unable to find anything equivalent for version 5. But maybe I am missing something?

Basically I would want a Python callback function to get invoked when e.g. the mouse is released on a range selection.
In general, it would be interesting to see if callbacks for plot interactions are supported at all?

I think holoviews/hvplot does support this.