Interactive Plotly graph with Widgets DropDown or Textbox

📊 Plotly Python
1

Hello,

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 plotly.express as px
from ipywidgets import GridspecLayout

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

index_paper = widgets.Dropdown(
        options=df.index,
        value=df.index[0],
        description='Index:',
        disabled=False,
        max_width='100px' )

# Function to plot 3D scatter
def plot_3d(df):
     fig = px.scatter_3d(df, 
              x='pc1', y='pc2', z='pc3',
              hover_name=df.index,
              color=df.clusters)
            
     fig.update_traces(marker_size=7)
            
     fig.update_layout(height=500, width=800,)
     fig.show()
    

# 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
    if(index_paper.value=='all'):

    # Store all the indices
        index_filter = range(len(df.index))
    else:
        # 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!