Multiple dropdown menus to simultaneously filter data

📊 Plotly Python
1

Hello. I have a dataframe with 3 columns representing 3 categories.

image

I want to filter a plotly figure using two dropdown menus (for cat1 and cat2) by filtering the original data with the selected value in the dropdown lists. Only data selected from cat1 AND cat2 should be presented, and cat3 should serve as the legends.

For example, if ‘A’ is chosen for ‘cat1’ and ‘foo’ is chosen for ‘cat2’, I would like to present only the following data:

image

So that I would like to get an image like this (with the dropdown menus, of course):
image

I would prefer a solution that uses only Plotly (and not Dash). Thanks a lot for the help!

Below is the code for generating the dataframe.

random.seed(10)
N = 30

cat1_options = ['A','B','C','D']
cat2_options = ['foo','bar','baz']
cat3_options = ['horse','cow']

data = {
        'num': list(range(N)),
        'cat1': random.choices(cat1_options, k=N),
        'cat2': random.choices(cat2_options, k=N),
        'cat3': random.choices(cat3_options, k=N),
        'value': random.sample(range(1, 101), k=N)      
        }

df = pd.DataFrame(data)