Update src/streamlit_app.py

src/streamlit_app.py

@@ -88,35 +88,46 @@ chart1 = (
 )
 st.altair_chart(chart1, use_container_width=True)
 
-# Base pie chart (innerRadius=50 gives us the donut)
-base = (
-    alt.Chart(top_crimes)
-      .mark_arc(innerRadius=50)
-      .encode(
-          theta=alt.Theta("Count:Q"),
-          color=alt.Color("Crime Type:N", legend=alt.Legend(title="Crime Type")),
-          tooltip=[
-              alt.Tooltip("Crime Type:N"),
-              alt.Tooltip("Count:Q"),
-              alt.Tooltip("Percentage:Q", format=".1%")
-          ]
-      )
+###############################################################
+
+import plotly.express as px
+
+# 4. Pie Chart 1: Top 10 Crime Types
+st.header("Pie Chart 1: Top 10 Crime Types Distribution")
+
+# Prepare Top 10 crime types
+top_crimes = (
+    df["crm_cd_desc"]
+      .value_counts()
+      .nlargest(10)
+      .rename_axis("Crime Type")
+      .reset_index(name="Count")
 )
+# Compute percentages
+top_crimes["Percentage"] = top_crimes["Count"] / top_crimes["Count"].sum()
 
-#  Add labels *outside* each slice by using a larger radius
-labels = (
-    alt.Chart(top_crimes)
-      .mark_text(radius=120, size=11, fontWeight="bold")
-      .encode(
-          theta=alt.Theta("Count:Q"),
-          text=alt.Text("Crime Type:N")
-      )
+# Build Plotly pie chart
+fig = px.pie(
+    top_crimes,
+    names="Crime Type",
+    values="Count",
+    hole=0.4,                             # makes it a donut
+    hover_data=["Percentage"],            # show percentage on hover
+    title="Top 10 Crime Types"
+)
+
+# Move labels outside slices and show both label & percent
+fig.update_traces(
+    textposition="outside",
+    textinfo="label+percent",
+    marker=dict(line=dict(color="#000000", width=1))  # add slice borders
 )
 
-# Combine and set size/title
-chart2 = (
-    (base + labels)
-      .properties(width=600, height=600, title="Top 10 Crime Types")
+# Style the legend
+fig.update_layout(
+    legend_title_text="Crime Type",
+    margin=dict(t=50, l=25, r=25, b=25)
 )
 
-st.altair_chart(chart2, use_container_width=False)
+# Render in Streamlit
+st.plotly_chart(fig, use_container_width=True)