add plotly

app.py

@@ -1,8 +1,9 @@
-import streamlit as st
 import random
-import time
-from algorithms import insertion_sort
+import plotly.graph_objects as go
 import matplotlib.pyplot as plt
+import streamlit as st
+
+from algorithms import insertion_sort
 
 st.title("Insertion Sort Visualizer")
 
@@ -11,19 +12,79 @@ option = st.radio("Choose input method:", ["Manual Input", "Random List"])
 if option == "Manual Input":
     user_input = st.text_input("Enter numbers seperated by commas (like 5,3,1,4)")
     if user_input:
-        data = list(map(int, user_input.split(',')))
+        data = list(map(int, user_input.split(",")))
 else:
-    length = st.slider("List length", 5,20,8)
-    data = random.sample(range(1,30), length)
+    length = st.slider("List length", 5, 20, 8)
+    data = random.sample(range(1, 30), length)
 
-if 'data' in locals() and st.button("Visualize Insertion Sort"):
+if "data" in locals() and st.button("Visualize Insertion Sort"):
     steps = insertion_sort(data)
 
     st.write(f"Total steps: {len(steps)}")
 
+    frames = []
     for i, step in enumerate(steps):
-        fig, ax = plt.subplots()
-        ax.bar(range(len(step)), step)
-        ax.set_title(f"Step {i + 1}")
-        st.pyplot(fig)
-        time.sleep(0.3)
+        array = step["array"]
+        active_index = step["active_index"]
+        sorted_boundary = step["sorted_boundary"]
+
+        colors = []
+        for j in range(len(array)):
+            if j == active_index:
+                colors.append("red")
+            elif j <= sorted_boundary:
+                colors.append("green")
+            else:
+                colors.append("gray")
+        
+        frames.append(go.Frame(
+            data=[go.Scatter(
+                x=list(range(len(array))),
+                y=array,
+                mode="markers+text",
+                marker=dict(size=40, color=colors),
+                text=array,
+                textposition="middle center"
+            )],
+            name=f"Step {i+1}"
+        ))
+    initial = steps[0]
+    initial_colors = [
+        "red" if j == initial["active_index"] else
+        "green" if j <= initial["sorted_boundary"] else "gray"
+        for j in range(len(initial["array"]))
+    ]
+
+    fig = go.Figure(
+        data=[go.Scatter(
+            x=list(range(len(initial["array"]))),
+            y=initial["array"],
+            mode="markers+text",
+            marker=dict(size=40, color=initial_colors),
+            text=initial["array"],
+            textposition="middle center"
+        )],
+        layout=go.Layout(
+            title="Insertion Sort Animation",
+            xaxis=dict(range=[-0.5, len(initial["array"]) - 0.5]),
+            yaxis=dict(range=[0, max(max(s['array']) for s in steps) + 5]),
+            updatemenus=[dict(
+                type="buttons",
+                buttons=[dict(label="Play", method="animate", args=[None])],
+                showactive=False
+            )],
+            sliders=[{
+                "steps": [{
+                    "args": [[f"Step {i+1}"], {"frame": {"duration": 500, "redraw": True}}],
+                    "label": f"{i+1}",
+                    "method": "animate"
+                } for i in range(len(frames))],
+                "transition": {"duration": 0},
+                "x": 0, "y": -0.1,
+                "currentvalue": {"prefix": "Step: "}
+            }]
+        ),
+        frames=frames
+    )
+
+    st.plotly_chart(fig)