Plotly Express scatter plot: dropdown not working

Question

I'm trying to add a dropdown box to a scatterplot built with plotly.express. So far, I've been able to add a dropdown box with the correct options but when I select one of them the graph doesn't update. It is meant to filter between three options. Is anyone able to advise me on what I'm doing wrong?

Code:

fig = px.scatter(phl_crime, x="Age of accused", y = "Victim age", color="Charge", title="Relationship between victim and assailant age, Philadelphia homicides (x-y)", labels={"Age of accused": "Assailant age"})

fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                dict(
                    args=["Charge", "Murder"],
                    label="Murder",
                    method="restyle"
                ),
                dict(
                    args=["Charge", "Manslaughter"],
                    label="Manslaughter",
                    method="restyle"
                ),
                dict(
                    args=["Charge", "Abortion"],
                    label="Abortion",
                    method="restyle"
                )
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=1.1,
            yanchor="top"
        ),
    ]
)
fig.show()

Here is an image of the output - the dropdown box is currently on the top left.

UPDATE: Here is a sample of the phl_crime dictionary using phl_crime.head().to_dict():

{'Year': {0: 1902, 1: 1902, 2: 1902, 3: 1902, 4: 1902}, 'Charge': {0: 'Murder', 1: 'Murder', 2: 'Murder', 3: 'Abortion', 4: 'Murder'}, 'Gender of accused': {0: 'Male', 1: 'Female', 2: 'Male', 3: 'Female', 4: 'Male'}, 'Age of accused': {0: nan, 1: nan, 2: nan, 3: 47.0, 4: nan}, 'Victim age': {0: nan, 1: nan, 2: nan, 3: nan, 4: nan}, 'Weapon': {0: 'Fist, other body part', 1: nan, 2: 'Knife, sharp instrument', 3: nan, 4: 'Knife, sharp instrument'}, 'Gang': {0: 'Teen gang', 1: 'No gang', 2: 'No gang', 3: 'No gang', 4: 'No gang'}}

can you include your dataframe sample as a dictionary that can be copied? paste the output from phl_crime.head().to_dict() into your question – this will allow people to reproduce your dropdown error – thanks! — Derek O
– Derek O, Commented Jun 14, 2022 at 20:35
Yes, certainly. I've updated the question to include the outputted dictionary (at the end). Thanks for flagging this up. — graceface
– graceface, Commented Jun 14, 2022 at 21:12
It's a method of drawing a graph for each dropdown and selecting by dropdown. This example from the official reference. — r-beginners
– r-beginners, Commented Jun 15, 2022 at 2:07

graceface · Accepted Answer · 2022-06-15 10:37:32Z

In case helpful to anyone else, I have now solved this by:

using the update rather than restyle method
adding the active key to the updatemenus dict
adding the visible key to the args list & setting the values to True/False (depending on whether the data for that label should appear or not).

This is the revised, working code:

fig = px.scatter(phl_crime, x="Age of accused", y = "Victim age", color="Charge", title="Relationship between victim and assailant age, Philadelphia homicides (x-y)", labels={"Age of accused": "Assailant age"})
fig.update_layout(title="Relationship between victim age and assailant age, Philadelphia homicides (x-y)",
    xaxis=dict(
        title="Age of accused"
    ),
    yaxis=dict(
        title="Age of victim"
    ))

# Add dropdown with dynamic titles
fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="All charges",
                     method="update",
                     args=[{"visible": [True, True, True]},
                           {"title": "Relationship between victim and assailant age, Philadelphia homicides (x-y)",
                           "xaxis": {'title': "Age of accused"},
                           "yaxis": {'title': "Victim age"}}]),
                dict(label="Murder",
                     method="update",
                     args=[{"visible": [True, False, False]},
                           {"title": "A dynamic title: ages of accused and victims in murder charges",
                           "xaxis": {'title': "Dynamic label: age of accused"},
                           "yaxis": {'title': "Dynamic label: victim age"}}]),
                dict(label="Manslaughter",
                     method="update",
                     args=[{"visible": [False, False, True]},
                           {"title": "Another dynamic title: ages of accused and victims in manslaughter charges",
                           "xaxis": {'title': "Another dynamic label: age of accused"},
                           "yaxis": {'title': "Another dynamic label: victim age"}}]),
                dict(label="Abortion",
                     method="update",
                     args=[{"visible": [False, True, False]},
                           {"title": "More dynamism: ages of accused and victims in abortion charges",
                           "xaxis": {'title': "More dynamism: age of accused"},
                           "yaxis": {'title': "More dynamism: victim age"}}])
            ]),
        )
    ])

(Please ignore the added titles/x-axis/y-axis data as not relevant). The dropdown box is now working.

Collectives™ on Stack Overflow

Plotly Express scatter plot: dropdown not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related