Output
Data and Model
  1. import plotly.express as px
  2. data = px.data.iris()
  3.  
  4. from sklearn.decomposition import PCA
  5. pca = PCA(n_components=2)
  6. pca.fit(data.iloc[:, :4])
  7. data_pca = pca.transform(data.iloc[:, :4])
  8.
Plot
  1. import plotly.graph_objects as go
  2.  
  3. def get_plot(x, y):
  4.     fig = go.Figure()
  5.     trace = go.Scatter(x=data_pca[:, 0][data['species_id'] == 1], y=data_pca[:, 1][data['species_id'] == 1], mode='markers', name = 'setosa')
  6.     trace_2 = go.Scatter(x=data_pca[:, 0][data['species_id'] == 2], y=data_pca[:, 1][data['species_id'] == 2], mode='markers', name = 'versicolor')
  7.     trace_3 = go.Scatter(x=data_pca[:, 0][data['species_id'] == 3], y=data_pca[:, 1][data['species_id'] == 3], mode='markers', name = 'virginica')
  8.     trace_4 = go.Scatter(x=[x], y=[y], mode='markers', marker=dict(size=[20], color=['red']), name = 'selected')
  9.     fig.add_trace(trace)
  10.     fig.add_trace(trace_2)
  11.     fig.add_trace(trace_3)
  12.     fig.add_trace(trace_4)
  13.     return fig
  14.
Components
  1. import ipywidgets as widgets
  2. def get_slider(label, start, end):
  3.     return widgets.FloatSlider(description=label, min=start, max=end, value = (start+end)/2)
  4.
Layout (Option 1)
  1. import numpy as np
  2.  
  3. # Create layout
  4. a = get_slider('Sepal Length', min(data.iloc[:, 0]), max(data.iloc[:, 0]))
  5. b = get_slider('Sepal Width', min(data.iloc[:, 1]), max(data.iloc[:, 1]))
  6. c = get_slider('Petal Length', min(data.iloc[:, 2]), max(data.iloc[:, 2]))
  7. d = get_slider('Petal Width', min(data.iloc[:, 3]), max(data.iloc[:, 3]))
  8.  
  9. out = widgets.Output(layout={'border': '1px solid black'})
  10.  
  11. display(widgets.HBox([widgets.VBox([a, b, c, d]), out]))
  12.  
  13. def display_info(change):
  14.     out.clear_output()
  15.     pca_test = pca.transform(np.array([a.value, b.value, c.value, d.value]).reshape(-1, 4))
  16.     with out:
  17.         display(get_plot(pca_test[0][0], pca_test[0][1]))
  18.     
  19. a.observe(display_info, names=['value'], type='change')
  20. b.observe(display_info, names=['value'], type='change')
  21. c.observe(display_info, names=['value'], type='change')
  22. d.observe(display_info, names=['value'], type='change')
  23.
Layout (Option 2)
  1. import numpy as np
  2.  
  3. # Create layout
  4. a = get_slider('Sepal Length', min(data.iloc[:, 0]), max(data.iloc[:, 0]))
  5. b = get_slider('Sepal Width', min(data.iloc[:, 1]), max(data.iloc[:, 1]))
  6. c = get_slider('Petal Length', min(data.iloc[:, 2]), max(data.iloc[:, 2]))
  7. d = get_slider('Petal Width', min(data.iloc[:, 3]), max(data.iloc[:, 3]))
  8. button = widgets.Button(description='Click')
  9.  
  10. out = widgets.Output(layout={'border': '1px solid black'})
  11.  
  12. display(widgets.HBox([widgets.VBox([a, b, c, d, button]), out]))
  13.  
  14. def display_info(button_click):
  15.     out.clear_output()
  16.     pca_test = pca.transform(np.array([a.value, b.value, c.value, d.value]).reshape(-1, 4))
  17.     with out:
  18.         display(get_plot(pca_test[0][0], pca_test[0][1]))
  19.     
  20. button.on_click(display_info)
  21.