Create a Plotly button to hide/show data points in ScatterPlot

Question

I have a large scatter plot displayed, and now I want to make my user able to filter out some points with a few buttons

for example, let's say points is an array

button_1 : show only points[[1,2,3]]
button_2 : show only points[[4,5,6]]

Is there a simple way to achieve this ? I've been searching on internet for so long...

I know the code below should work, but I can't find the right args :/ I want to use a boolean array saying whether or not the point should be displayed

fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            buttons=[
                dict(method='restyle',
                        label=col,
                        visible=True,
                        args=< ??? >,
                        ),
            ],
        )
    ]
)

Derek O · Accepted Answer · 2021-11-11 21:15:49Z

3

I think passing a dictionary such as args={'visible': [True, False]} is what you are looking for. A button with these settings would show the first trace and hide the second trace, so this will work as long as you create your scatterplot using multiple traces. For example:

import pandas as pd
import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[1,2,2],
    y=[4,5,4],
    mode='markers',
    name='cluster 1',
    marker=dict(color="red")
))

fig.add_trace(go.Scatter(
    x=[7,8,7],
    y=[3,4,2],
    mode='markers',
    name='cluster 2',
    marker=dict(color="blue")
))

fig.update_layout(
    updatemenus=[
        dict(
         buttons=list([   
            dict(label = 'show cluster 1',
                 method = 'update',
                 args = [{'visible': [True, False]},
                         {'title': 'cluster 1'}]),

            dict(label = 'show cluster 2',
                 method = 'update',
                 args = [{'visible': [False, True]},
                         {'title': 'cluster 2'}]),
            
            dict(label = 'show both clusters',
                 method = 'update',
                 args = [{'visible': [True, True]},
                         {'title': 'cluster 2'}])
        ]),
    )]
)

fig.update_xaxes(range=[0, 10])
fig.update_yaxes(range=[0, 10])
fig.show()

answered Nov 11, 2021 at 21:15

Derek O

20.2k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Noa Be Over a year ago

Okay I understand now, I must split your my dataset into traces, thanks so much

Derek O Over a year ago

No problem, glad that cleared things up!

vestland Over a year ago

@DerekO Nice touch with the gif! Can I ask you how you made it?

Derek O Over a year ago

@vestland Sure! I used the Chrome Capture extension - it definitely comes in handy

Collectives™ on Stack Overflow

Create a Plotly button to hide/show data points in ScatterPlot

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related