Making and using selections on 2D plots

📊 Plotly Python
1

Hi all,
I would like to use the plotly selection/lasso tool in order to select pixels in my plotted 2D array, and then implement logic using those pixels afterwards (e.g. summing the intensity of the selected pixels). However I cannot find any information on how to extract the selected pixels anywhere, at least not from plots created using plotly.express.imshow or plotly.graph_objs.Heatmap. How can I access the selected pixels, so I can store them in a way that I can manipulate them later?

3

Hi @gerito ,

Welcome to the forum!

I think you need to used Dash instead of just plotly python.

Try this code below.

from dash import Dash, dcc, html, Input, Output, callback

import plotly.express as px

import json
import pandas as pd

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

app = Dash(__name__, external_stylesheets=external_stylesheets)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

df = pd.DataFrame({
    "x": [1,2,1,2],
    "y": [1,2,3,4],
    "customdata": [1,2,3,4],
    "fruit": ["apple", "apple", "orange", "orange"]
})

fig = px.scatter(df, x="x", y="y", color="fruit", custom_data=["customdata"])

fig.update_layout(clickmode='event+select')

fig.update_traces(marker_size=20)

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),

    html.Div(className='row', children=[

        html.Div([
            dcc.Markdown("""
                **Selection Data**

                Choose the lasso or rectangle tool in the graph's menu
                bar and then select points in the graph.

                Note that if `layout.clickmode = 'event+select'`, selection data also
                accumulates (or un-accumulates) selected data if you hold down the shift
                button while clicking.
            """),
            html.Pre(id='selected-data', style=styles['pre']),
        ], className='three columns'),

    ])
])


@callback(
    Output('selected-data', 'children'),
    Input('basic-interactions', 'selectedData'))
def display_selected_data(selectedData):
    return json.dumps(selectedData, indent=2)


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

Here is the refference:

Hope this help.

4

Hi @farispriadi, thanks for your reply. The issue I am having currently is that the px.imshow() function for displaying a 2D array does not have the box/lasso select options on the top right corner. Is there a way to enable this functionality for px.imshow()?

5

Hi @gerito ,

I see, there are no select and lasso in modebar when you use imshow.

But try to jump to this post :

especially the replies from @AIMPED, that you can extract the region of plot that use imshow by using an annotation.

1 Like