✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Using Dropdown to make traces visible

Hi, I’ve built a plotly express mapbox_scatter and set all the traces to “legendonly.” I want to be able to use a dropdown to change an individual traces visible=True. I cannot for the life of me understand why the below is not working. I am an excellent programmer, but Python is a relatively new language to me, and this is my first Dash project.

A solution would be nice, an explanation would be better.


Figure layout

fig = px.scatter_mapbox(bsird5_geo, lat=“Latitude”, lon=“Longitude”, color=“CAPABILITY”,
hover_name=“community_name”, size=“pct_all_funds”,
hover_data=(“CAPABILITY”, “HSGP”, “pct_all_funds”),
center={‘lat’: 40, ‘lon’: -140}, zoom=2, width=1080, height=900)

fig.update_layout(mapbox_style=“open-street-map”, showlegend=False)

fig.update_traces(marker={“sizeref”: .001, “sizemode”: “area”, “sizemin”: 1}, visible=“legendonly”)

Application Object

app = dash.Dash(name)
app.config.suppress_callback_exceptions = True

Application Layout

app.layout = html.Div([

    options = [
        {'label': 'Access Control And Identity Verification', 'value': 'Access Control And Identity Verification'},
        {'label': 'Community Resilience', 'value': 'Community Resilience'},
        {'label': 'Critical Transportation', 'value': 'Critical Transportation'},
        {'label': 'Cybersecurity', 'value': 'Cybersecurity'},
        {'label': 'Economic Recovery', 'value': 'Economic Recovery'},
        {'label': 'Environmental Response/Health And Safety', 'value': 'Environmental Response/Health And Safety'},
        {'label': 'Fatality Management Services', 'value': 'Fatality Management Services'},
        {'label': 'Fire Management And Suppression', 'value': 'Fire Management And Suppression'},
        {'label': 'Forensics And Attribution', 'value': 'Forensics And Attribution'},
        {'label': 'Health And Social Services', 'value': 'Health And Social Services'},
        {'label': 'Housing', 'value': 'Housing'},
        {'label': 'Infrastructure Systems', 'value': 'Infrastructure Systems'},
        {'label': 'Intelligence And Information Sharing', 'value': 'Intelligence And Information Sharing'},
        {'label': 'Interdiction And Disruption', 'value': 'Interdiction And Disruption'},
        {'label': 'Logistics And Supply Chain Management', 'value': 'Logistics And Supply Chain Management'},
        {'label': 'Long-Term Vulnerability Reduction', 'value': 'Long-Term Vulnerability Reduction'},
        {'label': 'Mass Care Services', 'value': 'Mass Care Services'},
        {'label': 'Mass Search And Rescue Operations', 'value': 'Mass Search And Rescue Operations'},
        {'label': 'On-Scene Security, Protection, And Law Enforcement', 'value': 'On-Scene Security, Protection, And Law Enforcement'},
        {'label': 'Operational Communications', 'value': 'Operational Communications'},
        {'label': 'Operational Coordination', 'value': 'Operational Coordination'},
        {'label': 'Physical Protective Measures', 'value': 'Physical Protective Measures'},
        {'label': 'Planning', 'value': 'Planning'},
        {'label': 'Public Health, Healthcare, And Emergency Medical Services', 'value': 'Public Health, Healthcare, And Emergency Medical Services'},
        {'label': 'Public Information And Warning', 'value': 'Public Information And Warning'},
        {'label': 'Risk And Disaster Resilience Assessment', 'value': 'Risk And Disaster Resilience Assessment'},
        {'label': 'Risk Management For Protection Programs And Activities', 'value': 'Risk Management For Protection Programs And Activities'},
        {'label': 'Screening, Search, And Detection', 'value': 'Screening, Search, And Detection'},
        {'label': 'Situational Assessment', 'value': 'Situational Assessment'},
        {'label': 'Supply Chain Integrity And Security', 'value': 'Supply Chain Integrity And Security'},
        {'label': 'Threats And Hazards Identification', 'value': 'Threats And Hazards Identification'}


Output(component_id=‘example_graph’, component_property=‘figure’),
Input(component_id=‘my-input’, component_property=‘value’)
def update_output_div(value):
fig.update_traces(selector={‘name’: value}, visible=True, marker={“sizeref”: .001, “sizemode”: “area”, “sizemin”: 1})
return fig

if name == ‘main’: