Update src/streamlit_app.py

src/streamlit_app.py

@@ -230,7 +230,7 @@ criminal threats and minor burglary. Violent acts such as simple assault and rob
 relying on specific numbers. By pairing each slice with its label, the chart provides an immediate intuitive understanding of which crime types contribute most to overall 
 volume and which are comparatively rare, helping stakeholders focus on the offenses that matter most.</div>""",unsafe_allow_html=True)
 
-# -------------------------------- Plot 6: Bubble Map of Incident Counts by Region --------------------------------
+# -------------------------------- Plot : Bubble Map of Incident Counts by Region --------------------------------
 # st.markdown("<div class='sectionheader'>Crime Hotspots by Region</div>", unsafe_allow_html=True)
 
 # # 1. Aggregate counts and centroids
@@ -270,46 +270,7 @@ volume and which are comparatively rare, helping stakeholders focus on the offen
 # # 4. Render
 # st.plotly_chart(fig, use_container_width=True)
 
-# -------------------------------- Plot 7: Line Chart for Incident Counts by Region --------------------------------
-st.markdown("<div class='sectionheader'>Incidents Trends over Time </div>", unsafe_allow_html=True)
-# 1. Aggregate total incidents by year
-yearly_region = (
-    df
-      .groupby(["year", "RegionName"])
-      .size()
-      .reset_index(name="Count")
-)
-
-# 2. Let the user pick one region to highlight
-regions = sorted(yearly_region["RegionName"].unique())
-sel_region = st.selectbox("Select Region", ["All"] + regions, index=0)
-
-if sel_region != "All":
-    yearly_region = yearly_region[yearly_region["RegionName"] == sel_region]
-
-# 3. Plot a smooth line per region (or just the one selected)
-fig = px.line(
-    yearly_region,
-    x="year",
-    y="Count",
-    color="RegionName",
-    title=(" "),
-    labels={"year":"Year", "Count":"Incident Count"}
-)
-
-# 4. Add LOWESS smoothing (optional)
-for trace in fig.data:
-    trace.update(mode="lines")  # remove markers
-
-st.plotly_chart(fig, use_container_width=True)
-# Description.
-st.markdown("""<div class="description"> This multi‐line chart tracks how total crime incidents have evolved across LAPD regions from 2020 
-through 2025. Each colored line represents a different precinct, letting you compare their trajectories side by side. You’ll notice that most 
-areas rose to a peak around 2022 before tapering off, while a handful of regions bucked the trend—either holding steady or dipping earlier. The 
-clear visual of converging and diverging lines makes it easy to spot which precincts saw the sharpest upticks, which managed to keep incidents 
-relatively flat, and how the overall pattern shifted over the five‐year span.</div>""",unsafe_allow_html=True)
-
-# -------------------------------- Plot 8: Stacked Bar Charts for Regions --------------------------------
+# -------------------------------- Plot 2: Stacked Bar Charts for Regions --------------------------------
 st.markdown("<div class='sectionheader'>Crime Composition by Region: Top 5 Offenses </div>", unsafe_allow_html=True)
 # 1. Compute counts per region and crime
 counts = (
@@ -357,7 +318,48 @@ violent or specialty offenses. By grouping all five slices together, the visuali
 for example, precincts where assault plays a disproportionately large role versus those driven mainly by theft. This makes it straightforward to compare how 
 offense patterns differ from one region to the next.</div>""",unsafe_allow_html=True)
 
-# -------------------------------- Plot 7: Bubble Map of Incident Counts by Region NO MAP --------------------------------
+# -------------------------------- Plot 3: Line Chart for Incident Counts by Region --------------------------------
+st.markdown("<div class='sectionheader'>Incidents Trends over Time </div>", unsafe_allow_html=True)
+# 1. Aggregate total incidents by year
+yearly_region = (
+    df
+      .groupby(["year", "RegionName"])
+      .size()
+      .reset_index(name="Count")
+)
+
+# 2. Let the user pick one region to highlight
+regions = sorted(yearly_region["RegionName"].unique())
+sel_region = st.selectbox("Select Region", ["All"] + regions, index=0)
+
+if sel_region != "All":
+    yearly_region = yearly_region[yearly_region["RegionName"] == sel_region]
+
+# 3. Plot a smooth line per region (or just the one selected)
+fig = px.line(
+    yearly_region,
+    x="year",
+    y="Count",
+    color="RegionName",
+    title=(" "),
+    labels={"year":"Year", "Count":"Incident Count"}
+)
+
+# 4. Add LOWESS smoothing (optional)
+for trace in fig.data:
+    trace.update(mode="lines")  # remove markers
+
+st.plotly_chart(fig, use_container_width=True)
+# Description.
+st.markdown("""<div class="description"> This multi‐line chart tracks how total crime incidents have evolved across LAPD regions from 2020 
+through 2025. Each colored line represents a different precinct, letting you compare their trajectories side by side. You’ll notice that most 
+areas rose to a peak around 2022 before tapering off, while a handful of regions bucked the trend—either holding steady or dipping earlier. The 
+clear visual of converging and diverging lines makes it easy to spot which precincts saw the sharpest upticks, which managed to keep incidents 
+relatively flat, and how the overall pattern shifted over the five‐year span.</div>""",unsafe_allow_html=True)
+
+
+
+# -------------------------------- Plot : Bubble Map of Incident Counts by Region NO MAP --------------------------------
 # st.markdown("<div class='sectionheader'>Crime Hotspots by Region NO MAP</div>", unsafe_allow_html=True)
 
 # # 1. Aggregate total incidents by region and pick top 10
@@ -392,7 +394,7 @@ offense patterns differ from one region to the next.</div>""",unsafe_allow_html=
 # # 4. Render in Streamlit
 # st.plotly_chart(fig, use_container_width=True)
 
-# -------------------------------- Plot 2: Heat Map --------------------------------
+# -------------------------------- Plot 4: Heat Map --------------------------------
 st.markdown("<div class='sectionheader'> HeatMap </div>", unsafe_allow_html=True)
 # Count the crime type and list out the top 10 crime type that have the most cases.
 top_crimes = df['crm_cd_desc'].value_counts().nlargest(10).index
@@ -436,7 +438,7 @@ This heatmap shows the frequency of the top 10 crimes from 2020 to 2025. The x a
 </div>""",unsafe_allow_html=True)
 
 
-# -------------------------------- Plot 3: Line Chart --------------------------------
+# -------------------------------- Plot 5: Line Chart --------------------------------
 st.markdown("<div class='sectionheader'> Line Chart </div>", unsafe_allow_html=True)
 # Filter out the year 2025 since it is not the end, so that the trend can't be see.
 df = df[df['year'] != 2025]
@@ -476,7 +478,7 @@ crime type: Battery - Simple Assault, Burglary From Vehicle, Theft of Identity,
 the fluctuations and overall trajectories of these major crime categories across the years.</div>""",unsafe_allow_html=True)
 
 
-# -------------------------------- Plot 4: Map --------------------------------
+# -------------------------------- Plot 6: Map --------------------------------
 st.markdown("<div class='sectionheader'> Explore LA Crime Patterns: An Interactive Folium Map </div>", unsafe_allow_html=True)
 # Load the data.
 with open(GEOJSON_PATH, "r", encoding="utf-8") as f:
@@ -543,7 +545,7 @@ st.markdown("""<div class="description">
 This visualization uses Folium to build an interactive map of crime distribution in Los Angeles, highlighting the geospatial clustering characteristics of different years and crime types, and emphasizing the user's experience of freely exploring the map. The base map uses real streets and geographic backgrounds to enhance the spatial visualization of the image. The map shows the administrative boundaries of Los Angeles County in blue polygons, which are loaded with GeoJSON data and overlaid on the map to specify the geographic boundaries of crime locations. The red dots on the map represent the location of individual crimes, and the system samples no more than 300 data items from this category for visualization, with each dot pinpointed by latitude and longitude coordinates. The map supports full Leaflet.js functionality, including zooming, dragging, layer control, and other operations, which greatly enhances the flexibility of data exploration. A drop-down menu in the upper left corner of the page allows users to customize filters for specific years and crime types, enabling instant updates to the map content.
 </div>""",unsafe_allow_html=True)
 
-# -------------------------------- Plot 4: Stacked Bar Chart --------------------------------
+# -------------------------------- Plot 7: Stacked Bar Chart --------------------------------
 st.markdown("<div class='sectionheader'>Trends in Top 10 Crime Types (2020–2024)</div>", unsafe_allow_html=True)
 # Group by crime type and year.
 stacked_year_df = df_top.groupby(['year', 'crm_cd_desc']).size().reset_index(name='count')
@@ -570,7 +572,7 @@ Description: Our stacked bar chart shows the number of reported crimes for the t
 By observing the plot, we can find out that 2022 had the most crimes, the year had the second most crimes is 2023, and etc. Besides that, we can also find out that some crimes, like vehicle theft, petty theft, and burglary from vehicles, happened a lot every year and make up a big part of the total.
 </div>""",unsafe_allow_html=True)
 
-# -------------------------------- Plot 5: Bar Chart --------------------------------
+# -------------------------------- Plot 8: Bar Chart --------------------------------
 st.markdown("<div class='sectionheader'>Crime Rankings for Selected Year</div>", unsafe_allow_html=True)
 # Group by crime type and year.
 heatmap1_df = df_top.groupby(['crm_cd_desc', 'year']).size().reset_index(name='count')