Plotly + pandas : is it possible to display and filter a dataframe with multiple dropdowns?

📊 Plotly Python
1

Hello,

I’m new to Python, Pandas and Plotly so maybe the answer is easy but I couldn’t find anything on the forum or anywhere else …

I don’t want to use dash nor ipywidgets since I want to be able to export in HTML using plotly.offline.plot (I need an interactive HTML file to dynamically control the figure without any server running like Dash seems to do).

Well my problem (see code below) is that I would like to filter a plotly figure using several dropdown buttons (2 in this example, but it could be more) by filtering the original data with the selected value in the dropdown lists.

num label color value
1 A red 0.4
2 A blue 0.2
3 A green 0.3
4 A red 0.6
5 A blue 0.7
6 A green 0.4
7 B blue 0.2
8 B green 0.4
9 B red 0.4
10 B green 0.2
11 C red 0.1
12 C blue 0.3
13 D red 0.8
14 D blue 0.4
15 D green 0.6
16 D yellow 0.5

In this example, if I choose label ‘A’ and color ‘red’ I would like to display ONLY the values of rows with label ‘A’ AND color ‘red’, as follow :

num label color value
1 A red 0.4
4 A red 0.6

Then, the figure should display only 2 values

  1. So here is the code I have for the moment, I don’t know how to continue, any idea ?

  2. Extra question : is it possible to use checkboxes instead of dropdown lists, to be able to select multiple values inside a criteria, for example : Labels filter could be A or B, not only one in the list …

Thanks in advance for your help !

import pandas as pd
import plotly.graph_objects as go

d = {
    'num' : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    'label' : ['A', 'A', 'A', 'A', 'A', 'A', 'B', 'B', 'B', 'B', 'C', 'C', 'D', 'D', 'D', 'D'],
    'color' : ['red', 'blue', 'green', 'red', 'blue', 'green', 'blue', 'green', 'red', 'green', 'red', 'blue', 'red', 'blue', 'green', 'yellow'],
    'value' : [0.4, 0.2, 0.3, 0.6, 0.7, 0.4, 0.2, 0.4, 0.4, 0.2, 0.1, 0.3, 0.8, 0.4, 0.6, 0.5]
    }

# Build dataframe
df = pd.DataFrame(data=d)

# Build dropdown Labels
labels = df["label"].unique()
buttonsLabels = [dict(label = "All labels",
                            method = "restyle",
                            args = [{'y' : [df["value"] * 100]}] # or what else ?
                            )]
for label in labels:
    buttonsLabels.append(dict(label = label,
                              method = "restyle",
                              visible = True,
                              #args = [{'y' : ??? }]
                              ))
# Build dropdown Colors
colors = df["color"].unique()
buttonsColors = [dict(label = "All colors",
                            method = "restyle",
                            args = [{'y' : [df["value"] * 100]}] # or what else ?
                            )]
for color in colors:
    buttonsColors.append(dict(label = color,
                              method = "restyle",
                              visible = True,
                              # args = [{'y' : ??? }]
                              ))

# Display figure
fig = go.Figure(data = [ go.Scatter(x = df["num"], y = df["value"] * 100 ) ])

fig.update_layout(updatemenus = [
   dict(buttons = buttonsLabels, showactive = True),
   dict(buttons = buttonsColors, showactive = True, y = 0.8)
   ])

fig.show()
1 Like
2

@Yas Were you able to solve this? I am having the same use case