Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Interactive Plotly graph with Widgets DropDown or Textbox


I am trying to have a Dropdown list or a Search box field where I can type or choose a certain value in my dataframe which will be updated through the Plotly graph.

I want to be able to choose 1 specific index, and it would show me its value or position in the scatter plot.

Here is my current code:

>>> df.head(3)                                                                           
  index    dim_01      dim_02      dim_03    clusters
    0     -0.092      -0.038       0.519         1
    1      0.892      -0.087      -0.092         2
    2      0.956       0.098      -0.219         2
import as px
from ipywidgets import GridspecLayout

# Creates dropdown widget of all paper index
all_index = ['all'] + sorted(df['index'].unique())

index_paper = widgets.Dropdown(
        max_width='100px' )

# Function to plot 3D scatter
def plot_3d(df):
     fig = px.scatter_3d(df, 
              x='pc1', y='pc2', z='pc3',
     fig.update_layout(height=500, width=800,)

# Create container      
container_index = widgets.VBox([widgets.HTML(value="<b>Brand</b>"),index_paper],justify_content='center',max_width='180px')
 # Create grid
grid = GridspecLayout(1, 5, width='900px', height='150px',grid_gap="10px")
grid[0,0] = container_index

# This function will be called whenever there is any change in any of the widgets
def response(change):
    # Store indices of the index

    # Store all the indices
        index_filter = range(len(df.index))
        # Store indices of those cars which belong to the filtered brand
        index_filter = list(np.where(df['index'] == index_paper.value)[0])
# Link changes made in widget to the response function
container_cluster.observe(response, names="value")

# Plot grid of widgets as well as the figure
widgets.VBox([grid, fig])

Any help would be greatly appreciated!