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'}}
In case helpful to anyone else, I have now solved this by:
update
rather than restyle
methodactive
key to the updatemenus
dictvisible
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.