Update pages/40_simpleline.py

pages/40_simpleline.py

@@ -1,37 +1,47 @@
 import streamlit as st
-import matplotlib.pyplot as plt
+import plotly.graph_objects as go
 
 # Title
 st.title("Interactive Equation Plotter")
 
 # Sidebar sliders
 st.sidebar.header("Controls")
-x = st.sidebar.slider('X position', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)
 w = st.sidebar.slider('W (slope)', min_value=-10.0, max_value=10.0, value=1.0, step=0.1)
 b = st.sidebar.slider('B (intercept)', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)
 
+# Initial x position
+x = st.slider('X position', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)
+
 # Calculate y based on the equation y = w * x + b
 y = w * x + b
 
 # Create the plot
-fig, ax = plt.subplots(figsize=(6, 4))
-fig.subplots_adjust(top=0.8, bottom=0.1)
+fig = go.Figure()
 
 # Plot for the y-axis (top line)
-ax.hlines(1, -100, 100, color='blue', linestyle='--')  # Y-axis
-ax.plot(y, 1, 'ro')  # Plot the y point
+fig.add_shape(type="line", x0=-100, x1=100, y0=1, y1=1,
+              line=dict(color="blue", width=2, dash="dash"))
 
 # Plot for the x-axis (bottom line)
-ax.hlines(-1, -100, 100, color='blue', linestyle='--')  # X-axis
-ax.plot(x, -1, 'ro')  # Plot the x point
-
-# Set plot limits and labels
-ax.set_xlim(-100, 100)
-ax.set_ylim(-2, 2)
-ax.set_xlabel('X-axis and Y-axis')
-ax.set_yticks([])  # Hide y-axis ticks
-ax.set_title(f'y = {w} * x + {b}')
-ax.grid(True)
+fig.add_shape(type="line", x0=-100, x1=100, y0=-1, y1=-1,
+              line=dict(color="blue", width=2, dash="dash"))
+
+# Plot the x and y points
+fig.add_trace(go.Scatter(x=[x], y=[-1], mode='markers', marker=dict(color='red', size=10), name="X point"))
+fig.add_trace(go.Scatter(x=[y], y=[1], mode='markers', marker=dict(color='red', size=10), name="Y point"))
+
+# Update the layout
+fig.update_layout(
+    title=f'y = {w} * x + {b}',
+    xaxis=dict(range=[-100, 100]),
+    yaxis=dict(range=[-2, 2]),
+    showlegend=False,
+    height=400,
+    margin=dict(t=50, b=10)
+)
 
 # Display the plot in Streamlit
-st.pyplot(fig)
+st.plotly_chart(fig)
+
+# Add instruction to click and drag the point on x-axis
+st.write("Drag the red dot on the x-axis to change the x position.")