Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,88 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import pandas as pd
+import altair as alt
+
+# 1. Page title
+st.title("Phase 02: Interactive Crime Data Pie Charts")
 
+# 2. Data info & load
+st.header("Dataset Information")
+st.markdown(
+    """
+- **Source:** Chicago crime incidents dataset  
+- **Rows:** incidents (one per row)  
+- **Columns:** e.g. `crm_cd_desc` (crime type), `arrest` (boolean), `date`, `location_description`, etc.  
+- **Purpose:** Explore crime-type distribution and arrest outcomes via pie charts.
 """
-# Welcome to Streamlit!
+)
 
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+@st.cache_data
+def load_data():
+    return pd.read_csv("crime_data.csv")
 
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
+df = load_data()
+
+# 3. Data preview
+st.header("Data Preview")
+st.write(f"Total records: {df.shape[0]}  |  Total columns: {df.shape[1]}")
+st.dataframe(df.head())
 
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
+# 4. Pie Chart 1: Top 10 Crime Types
+st.header("Pie Chart 1: Top 10 Crime Types Distribution")
 
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
+# Prepare Top 10 crime types
+top_crimes = (
+    df["crm_cd_desc"]
+    .value_counts()
+    .nlargest(10)
+    .reset_index()
+    .rename(columns={"index": "Crime Type", "crm_cd_desc": "Count"})
+)
+top_crimes["Percentage"] = top_crimes["Count"] / top_crimes["Count"].sum()
+
+# Build Altair pie chart
+chart1 = (
+    alt.Chart(top_crimes)
+    .mark_arc(innerRadius=50)
+    .encode(
+        theta=alt.Theta(field="Count", type="quantitative"),
+        color=alt.Color(field="Crime Type", type="nominal"),
+        tooltip=[
+            alt.Tooltip("Crime Type:N", title="Crime Type"),
+            alt.Tooltip("Count:Q", title="Count"),
+            alt.Tooltip("Percentage:Q", title="Percentage", format=".1%")
+        ],
+    )
+    .properties(width=400, height=400, title="Top 10 Crime Types")
+)
+st.altair_chart(chart1, use_container_width=True)
 
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
+# 5. Pie Chart 2: Arrest vs. Non-Arrest Distribution
+st.header("Pie Chart 2: Arrest vs. Non-Arrest Distribution")
 
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
+# Prepare arrest data
+arrest_counts = (
+    df["arrest"]
+    .map({True: "Arrest Made", False: "No Arrest"})
+    .value_counts()
+    .reset_index()
+    .rename(columns={"index": "Arrest Status", "arrest": "Count"})
+)
+arrest_counts["Percentage"] = arrest_counts["Count"] / arrest_counts["Count"].sum()
 
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
+# Build second Altair pie chart
+chart2 = (
+    alt.Chart(arrest_counts)
+    .mark_arc(innerRadius=30)
     .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+        theta=alt.Theta(field="Count", type="quantitative"),
+        color=alt.Color(field="Arrest Status", type="nominal"),
+        tooltip=[
+            alt.Tooltip("Arrest Status:N", title="Status"),
+            alt.Tooltip("Count:Q", title="Count"),
+            alt.Tooltip("Percentage:Q", title="Percentage", format=".1%")
+        ],
+    )
+    .properties(width=400, height=400, title="Arrest Outcomes")
+)
+st.altair_chart(chart2, use_container_width=True)