Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Combine drop down with slider in a choropleth map

I’m trying to combine a choropleth map with a drop down menu and a slider that varies over time. I can create a map with a drop down menu for each state, and I can create a slider that shows the map varying over time but I don’t know how to connect these together without the map covering the plots. My goal would be to have the slider disappear when you click a state from the drop down menu and then reset when you click “Map” in the drop down. This is my attempt using one of the plotly data sets:

plotly.offline.init_notebook_mode()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv')

# create the initial map
data = [dict(type='choropleth',
             locations = df['code'].astype(str),
             z=df['total exports'].astype(float),
             locationmode='USA-states', 
             visible=True)]

# let's create some additional, random data
for i in range(5):
    data.append(data[0].copy())
    data[-1]['z'] = data[0]['z'] * np.random.rand(*data[0]['z'].shape)

layout = dict(geo=dict(scope='usa',
                       projection={'type': 'albers usa'}),
                )

# create the empty dropdown menu
updatemenus = list([dict(buttons=list()), 
                    dict(direction='down',
                         showactive=True)])

total_codes = len(df.code.unique()) + 1

for s, state in enumerate(df.code.unique()):
    # add a trace for each state
    data.append(dict(type='scatter',
                     x=[i for i in range(1984, 2016)],
                     y=[i + random.random() * 100 for i in range(1980, 2016)],
                     visible=False))

    # add each state to the dropdown    
    visible_traces = [False] * total_codes
    visible_traces[s + 1] = True
    updatemenus[0]['buttons'].append(dict(args=[{'visible': visible_traces}],
                                          label=state,
                                          method='update'))

# add a dropdown entry to reset the map    
updatemenus[0]['buttons'].append(dict(args=[{'visible': [True] + [False] *  (total_codes - 1)}],
                                      label='Map',
                                      method='update'))

# let's create the steps for the slider
steps = []
for i in range(len(data)):
    step = dict(method='restyle',
                args=['visible', [False] * len(data)],
                label='Year {}'.format(i + 1984))
    step['args'][1][i] = True
    steps.append(step)

sliders = [dict(active=0,
                pad={"t": 1},
                steps=steps)] 

layout['updatemenus'] = updatemenus
layout['sliders'] = sliders

fig = dict(data=data, 
           layout=layout)