Combine time slider with drop down menu

Hi everyone,

I am trying to create a choropleth map with a time slider to pick a date. I now also want to add a dropdown menu to chose a dataset to display the data of. Here is a minimal example:

import plotly.graph_objects as go
import pandas as pd

data_2019 = pd.DataFrame({
    'year': 2019,
    'region': ['Germany', 'Denmark', 'Japan', 'France', 'Italy', 'Spain', 'Canada', 'Brazil', 'India', 'Australia',
               'China', 'Russia', 'South Korea', 'Netherlands', 'Sweden', 'Norway', 'Finland', 'Mexico',
               'Argentina', 'Chile',
               'Germany', 'Denmark', 'Japan', 'France', 'Italy', 'Spain', 'Canada', 'Brazil', 'India', 'Australia'],
    'date': ['01-01', '01-01', '01-01', '02-01', '02-01', '02-01', '03-01', '03-01', '03-01', '04-01',
             '04-01', '04-01', '05-01', '05-01', '05-01', '06-01', '06-01', '06-01', '07-01', '07-01',
             '08-01', '08-01', '08-01', '09-01', '09-01', '09-01', '10-01', '10-01', '10-01', '11-01'],
    'valence': [0.3, 0.25, 0.22, 0.21, 0.18, 0.15, 0.1, 0.12, 0.14, 0.15,
                0.17, 0.19, 0.21, 0.23, 0.25, 0.27, 0.29, 0.31, 0.33, 0.35,
                0.37, 0.39, 0.41, 0.43, 0.45, 0.47, 0.49, 0.51, 0.53, 0.55]
})

data_2020 = pd.DataFrame({
    'year': 2020,
    'region': ['Germany', 'Denmark', 'Japan', 'France', 'Italy', 'Spain', 'Canada', 'Brazil', 'India', 'Australia',
               'China', 'Russia', 'South Korea', 'Netherlands', 'Sweden', 'Norway', 'Finland', 'Mexico',
               'Argentina', 'Chile',
               'Germany', 'Denmark', 'Japan', 'France', 'Italy', 'Spain', 'Canada', 'Brazil', 'India', 'Australia'],
    'date': ['01-01', '01-01', '01-01', '02-01', '02-01', '02-01', '03-01', '03-01', '03-01', '04-01',
             '04-01', '04-01', '05-01', '05-01', '05-01', '06-01', '06-01', '06-01', '07-01', '07-01',
             '08-01', '08-01', '08-01', '09-01', '09-01', '09-01', '10-01', '10-01', '10-01', '11-01'],
    'valence': [0.94, 0.89, 0.85, 0.71, 0.67, 0.63, 0.81, 0.79, 0.77, 0.65,
                0.62, 0.61, 0.75, 0.72, 0.69, 0.85, 0.82, 0.79, 0.75, 0.72,
                0.91, 0.88, 0.84, 0.81, 0.78, 0.74, 0.9, 0.87, 0.83, 0.8]
})

def create_choropleth(data, year):
    fig = go.Figure()

    for date in data['date'].unique():
        df = data[data['date'] == date]
        fig.add_trace(go.Choropleth(
            locations=df['region'],
            z=df['valence'],
            locationmode='country names',
            colorscale='Viridis',
            colorbar_title='Valence',
            visible=False
        ))

    steps = []
    for i, date in enumerate(data['date'].unique()):
        step = dict(
            method='update',
            args=[{'visible': [False] * len(fig.data)}],
            label=date
        )
        step['args'][0]['visible'][i] = True
        steps.append(step)

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

    fig.update_layout(
        sliders=sliders,
        updatemenus=[
            dict(
                buttons=[
                    dict(label='2019',
                         method='update',
                         args=[{'visible': [i < len(data_2019['date'].unique()) for i in range(len(fig.data))]}]),
                    dict(label='2020',
                         method='update',
                         args=[{'visible': [i >= len(data_2019['date'].unique()) for i in range(len(fig.data))]}])
                ],
                direction="down",
                pad={"r": 10, "t": 10},
                showactive=True,
            ),
        ]
    )

    return fig

fig = create_choropleth(data_2019, 2019)
fig_2020 = create_choropleth(data_2020, 2020)

for trace in fig_2020.data:
    fig.add_trace(trace)

fig.show()

However, the data selection does not work: it either always shows the data from 2020 or it mixes them both up.
How can I ensure that if 2019 is selected, only the data from 2019 is shown for the respective data, and if 2020 is selected only the data from 2020?

Unfortunately I don’t have much exprience with plotly’s built in interactivity So I can’t really help.

Have you considered using dash?