Update app.py

app.py

@@ -3,9 +3,21 @@ import pandas as pd
 import plotly.express as px
 import altair as alt
 import folium
+from streamlit_plotly_events import plotly_events # added for part3 interactivity
 from folium.plugins import HeatMap, MarkerCluster
 from streamlit_folium import st_folium
 
+# To fix the color scheme in crash stats plot (asked ChatGPT for appropriate colors)
+severity_colors = {
+    "No Injury": "#1f77b4",
+    "Possible Injury": "#aec7e8",
+    "Non Incapacitating Injury": "#ff7f0e",
+    "Incapacitating Injury": "#ffbb78",
+    "Suspected Minor Injury": "#2ca02c",
+    "Suspected Serious Injury": "#98df8a",
+    "Fatal": "#d62728",
+}
+
 @st.cache_data
 def load_and_preprocess_data(file_path):
     # Read the data
@@ -69,21 +81,44 @@ def create_severity_violation_chart(df, age_group=None):
         color='Severity',
         title=f'Crash Severity Distribution by Violation Type - {age_group}',
         labels={'count': 'Number of Incidents', 'Violation': 'Violation Type'},
-        height=600
+        color_discrete_map=severity_colors,
+
     )
     
+    # fig.update_layout(
+    #     xaxis_tickangle=-45,
+    #     legend_title='Severity Level',
+    #     barmode='stack'
+    # )
+
+    # modified the above code because x-axis labels were partially pruned
     fig.update_layout(
         xaxis_tickangle=-45,
-        legend_title='Severity Level',
-        barmode='stack'
+        legend=dict(
+        orientation='v',  
+        x=1,              
+        y=1,              
+        yanchor='top',     
+        xanchor='left',    
+        title="Severity Level"  
+    ),
+        barmode='stack',
+        margin=dict(t=50, b=250,r=20),  # Increase bottom margin to avoid pruning
+        xaxis=dict(
+        tickangle=-45,
+        tickfont=dict(size=9),  
+        dtick=1,) 
     )
     
-    return fig
+
+    
+    # return fig
+    return fig, violations
 
 def get_top_violations(df, age_group):
     # Calculate total incidents for the age group
     if age_group == 'All Ages':
-        total_incidents = len(df)  # 总样本数
+        total_incidents = len(df)  
         # Get violations for all ages
         violations = pd.concat([
             df['Violation1_Drv1'].value_counts(),
@@ -116,18 +151,69 @@ def get_top_violations(df, age_group):
     return violations_df.head()
 
 @st.cache_data
-def create_map(df, selected_year):
+def create_interactive_pie_chart(violations, selected_violation, selected_age):
+    # Filter data based on selected violation
+    filtered_data = violations[violations['Violation'] == selected_violation]
+    
+    # Create a pie chart for severity distribution of the selected violation type
+    fig = px.pie(
+        filtered_data,
+        names='Severity',
+        values='count',
+        # title=f'Severity Level Distribution for Violation: {selected_violation}',
+        title=f'Severity Level Distribution for Violation: {selected_violation} - {selected_age}', # dynamically update pie chart's title
+        height=600,
+        color_discrete_map=severity_colors
+    )
+    
+    return fig
+
+def create_map_bar_chart(df, selected_year):
+    # Create severity count bar chart
     filtered_df = df[df['Year'] == selected_year]
-        
+    severity_count = filtered_df['Injuryseverity'].value_counts().reset_index()
+    severity_count.columns = ['Injuryseverity', 'Count']
+    
+    fig = px.bar(
+        severity_count, 
+        x='Injuryseverity', 
+        y='Count', 
+        title="Accidents by Severity",
+        labels={'Injuryseverity': 'Severity', 'Count': 'Number of Accidents'}  # Adjust height as needed
+    )
+    fig.update_traces(marker_color='blue')
+    fig.update_layout(
+        clickmode='event+select',  # Enable interactivity
+        xaxis_tickangle=45,       # Rotate x-axis labels 45 degrees
+        margin=dict(t=50, b=150, r=20),         # Add bottom margin to prevent label cutoff
+    )
+    return fig
+
+
+@st.cache_data
+def create_map(df, selected_year, selected_severity=None):
+    # Filter data by selected year
+    filtered_df = df[df['Year'] == selected_year]
+    
+    # Filter further by selected severity if provided
+    if selected_severity:
+        filtered_df = filtered_df[filtered_df['Injuryseverity'] == selected_severity]
+    
+    # Remove rows with missing latitude or longitude
+    filtered_df = filtered_df.dropna(subset=['Latitude', 'Longitude'])
+    
+    # Create the map
     m = folium.Map(
-        location=[33.4255, -111.9400],
+        location=[33.4255, -111.9400],  # Default location (can be customized)
         zoom_start=12,
         control_scale=True,
         tiles='CartoDB positron'
     )
     
-    marker_cluster = MarkerCluster().add_to(m)
-        
+    # Add marker cluster
+    marker_cluster = MarkerCluster(name="Accident Locations").add_to(m)
+    
+    # Add accident markers
     for _, row in filtered_df.iterrows():
         folium.Marker(
             location=[row['Latitude'], row['Longitude']],
@@ -135,9 +221,11 @@ def create_map(df, selected_year):
             icon=folium.Icon(color='red')
         ).add_to(marker_cluster)
     
+    # Add heatmap
     heat_data = filtered_df[['Latitude', 'Longitude']].values.tolist()
-    HeatMap(heat_data, radius=15, max_zoom=13, min_opacity=0.3).add_to(m)
+    HeatMap(heat_data, radius=15, max_zoom=13, min_opacity=0.3, name="Heat Map").add_to(m)
     
+    folium.LayerControl().add_to(m)
     return m
 
 def create_injuries_fatalities_chart(crash_data, unit_type):
@@ -308,7 +396,7 @@ def create_category_distribution_chart(df, selected_category, selected_year):
         barmode='stack',
         xaxis_tickangle=-45,
         legend_title='Injury Severity',
-        margin=dict(t=50, b=100),
+        margin=dict(t=50, b=150, l=50, r=50), 
     )
 
     return fig
@@ -345,16 +433,16 @@ def main():
 
     st.markdown("""
      **Team Members:**
-    - Janhavi Tushar Zarapkar （[email protected]）
+    - Janhavi Tushar Zarapkar ([email protected])
     - Hangyue Zhang ([email protected])
     - Andrew Nam ([email protected])
     - Nirmal Attarde ([email protected])
-    - Maanas Sandeep Agrawa ([email protected])
+    - Maanas Sandeep Agrawal ([email protected])
     """)
     
 
     st.markdown("""
-    ### Introduction to the Traffic Accident Dataset
+    # Introduction to the Traffic Accident Dataset
     This dataset contains detailed information about traffic accidents in the city of **Tempe**. It includes various attributes of the accidents, such as the severity of injuries, the demographics of the drivers involved, the locations of the incidents, and the conditions at the time of the accidents. The dataset covers accidents that occurred over several years, with data on factors like **weather conditions**, **road surface conditions**, the **time of day**, and the type of **violations** (e.g., alcohol or drug use) that may have contributed to the accident.
     
     The data was sourced from **Tempe City's traffic incident reports** and provides a comprehensive view of the factors influencing road safety and accident severity in the city. By analyzing this dataset, we can gain insights into the key contributors to traffic incidents and uncover trends that could help improve traffic safety measures, urban planning, and law enforcement policies in the city.
@@ -367,14 +455,21 @@ def main():
 
     if 'Weather' not in df.columns:
         df['Weather'] = 'Unknown'
+
+    if 'selected_violation' not in st.session_state:
+        st.session_state['selected_violation'] = None
     
+    if "selected_severity" not in st.session_state:
+        st.session_state["selected_severity"] = None
+    
+
     # Create tabs for different visualizations
     tab1, tab2, tab3, tab4, tab5 = st.tabs([
     "Crash Trend", 
-    "Crash Statistics", 
+    "Violation-Severity Analysis", 
     "Distribution by Category",
     "Crash Injuries/Fatalities",
-    "Crash Map"
+    "Severity-Location Analysis"
 ])
     
     with tab1:
@@ -392,6 +487,8 @@ def main():
                 margin=dict(l=50, r=50, t=50, b=50)
             )
             st.plotly_chart(trend_fig, use_container_width=True)
+            
+        
 
         with desc_col:
             st.markdown("""
@@ -408,6 +505,7 @@ def main():
             * **Dynamic Title**: The chart updates its title to reflect the selected weather condition or "All Conditions" for the overall trend.
             
             **Insights:**
+            
             This chart helps uncover:
                * Annual fluctuations in crash incidents.
                * Correlations between weather conditions and crash frequencies.
@@ -419,12 +517,24 @@ def main():
         age_groups = ['All Ages', '16-25', '26-35', '36-45', '46-55', '56-65', '65+']
         selected_age = st.selectbox('Select Age Group:', age_groups)
         
-        chart_col, desc_col = st.columns([7, 3])
+        chart_col, desc_col = st.columns([7, 4])
         
         with chart_col:
             # Create and display chart
-            fig = create_severity_violation_chart(df, selected_age)
-            st.plotly_chart(fig, use_container_width=True)
+            fig, violations = create_severity_violation_chart(df, selected_age)
+
+            clicked_points = plotly_events(fig, click_event=True, override_height=600, override_width="100%")
+
+            if clicked_points:
+                selected_violation = clicked_points[0]['x']
+                if selected_violation != st.session_state['selected_violation']:
+                    st.session_state['selected_violation'] = selected_violation
+
+            # If a violation is selected, display the pie chart --> added for part3 (interactive pie chart)
+            if st.session_state['selected_violation']:
+                # pie_chart = create_interactive_pie_chart(violations, st.session_state['selected_violation'])
+                pie_chart = create_interactive_pie_chart(violations, st.session_state['selected_violation'], selected_age) # dynamically update pie chart's title
+                st.plotly_chart(pie_chart, use_container_width=True)
             
             # Display statistics
             if selected_age == 'All Ages':
@@ -435,37 +545,46 @@ def main():
                     (df['Age_Group_Drv2'] == selected_age)
                 ])
             
-            # Create two columns for statistics
-            col1, col2 = st.columns(2)
-            
-            with col1:
-                st.markdown(f"### Total Incidents")
-                st.markdown(f"**{total_incidents:,}** incidents for {selected_age}")
-            
-            with col2:
-                st.markdown("### Top Violations")
-                top_violations = get_top_violations(df, selected_age)
-                st.table(top_violations)
 
         with desc_col:
             st.markdown("""
-            ## Severity of Violations Across Age Groups
-            
-            This section provides an interactive visualization of crash severities linked to specific violation types, segmented by driver age groups. It enables a comprehensive analysis of how age influences crash severity and violation trends.
+            # Severity of Violations Across Age Groups
 
-            **Key Features:**
-            1. **Age Group Analysis**:
-               * Select specific age groups (e.g., "16-25", "65+") or analyze all ages to explore correlations between age, violation type, and crash severity.
-               * Understand how different age groups are involved in various types of violations.
+            This section provides an interactive visualization of **crash severities** linked to specific violation types, segmented by driver age groups. It enables a comprehensive analysis of how **age influences crash severity and violation trends**. The visualization is linked to an **interactive pie chart** that updates when a specific bar is selected, displaying the detailed distribution of the selected violation type based on the selected age group.
 
-            2. **Violation Breakdown**:
-               * Examine the most frequent violations contributing to traffic accidents for each age group.
-               * View detailed statistics showing the distribution of violation types.
+            ---
 
-            **Insights:**
-            * Identifies high-risk behaviors within specific age groups, such as reckless driving in younger drivers or impaired driving in older groups.
-            * Highlights which violations are associated with more severe outcomes, aiding targeted safety interventions and public awareness campaigns.
-            * Supports data-driven decision making for age-specific traffic safety programs.
+            ## **Key Features**
+
+            ### 1. **Age Group Analysis**
+            - Select specific age groups (e.g., "16-25", "65+") or analyze all ages to explore correlations between:
+            - Age
+            - Violation type
+            - Crash severity
+            - Understand how different age groups are involved in various types of violations.
+
+            ### 2. **Violation Breakdown**
+            - Examine the most frequent violations contributing to traffic accidents for each age group.
+            - View detailed statistics showing the distribution of violation types.
+
+            ### 3. **Understanding Severity Level**
+            - Identify the proportion of severity levels for a specific violation type based on different age groups.
+            - Investigate detailed severity patterns for each violation type across age groups.
+
+            ---
+
+            ## **Insights**
+
+            - **Identifies High-Risk Behaviors:** 
+            - Highlights risky behaviors such as reckless driving in younger drivers or impaired driving in older groups.
+            
+            - **Highlights Severity Associations:** 
+            - Shows which violations are associated with more severe outcomes, aiding targeted safety interventions and public awareness campaigns.
+
+            - **Supports Data-Driven Decision Making:** 
+            - Provides insights for designing **age-specific traffic safety programs**.
+
+            ---
             """)
 
     with tab3:
@@ -500,7 +619,7 @@ def main():
             ## Distribution of Incidents by {selected_category}
             This visualization explores the distribution of traffic incidents across various categories, such as Collision Manner, Weather, Surface Condition, Alcohol Use, and Driver Gender. Each bar represents a specific category value (e.g., "Male" or "Female" for Gender), and the bars are divided into segments based on Injury Severity (e.g., Minor, Moderate, Serious, Fatal).
     
-            **Key features include:**
+            **Key Features:**
             * Interactive Filters: Select a category and filter by year to analyze trends over time.
             * Insightful Tooltips: Hover over each segment to view the exact count and percentage of incidents for a given severity level.
             * Comparative Analysis: Quickly identify how different conditions or behaviors correlate with injury severity.
@@ -562,37 +681,83 @@ def main():
         years = sorted(df['Year'].unique())
         selected_year = st.selectbox('Select Year:', years)
         
-        map_col, desc_col = st.columns([7, 3])
+        # Create two columns for visualization and description
+        viz_col, desc_col = st.columns([6, 4])
         
-        with map_col:
+        with viz_col:
+            # First add bar chart
+            st.subheader("Severity-Location Analysis")
+            bar_fig = create_map_bar_chart(df, selected_year)
+            
+            # Capture click events with bar chart
+            clicked_points = plotly_events(
+                bar_fig, 
+                click_event=True,
+                override_height=300,
+                override_width="100%"
+            )
+            
+            if clicked_points:
+                selected_severity = clicked_points[0]['x']
+                st.session_state["selected_severity"] = selected_severity
+                
+            # Show currently selected severity
+            st.write(f"Selected Severity: {st.session_state['selected_severity'] if st.session_state['selected_severity'] else 'All'}")
+            
+            # Add map below bar chart
+            st.subheader("Accident Locations")
             map_placeholder = st.empty()
             with map_placeholder:
-                m = create_map(df, selected_year)
+                m = create_map(df, selected_year, st.session_state["selected_severity"])
                 map_data = st_folium(
                     m,
                     width=None,
-                    height=800,
-                    key=f"map_{selected_year}",
+                    height=600,  # Reduced height since it's now below bar chart
+                    key=f"map_{selected_year}_{st.session_state['selected_severity']}",
                     returned_objects=["null_drawing"]
                 )
-
+        
         with desc_col:
             st.markdown("""
-            ### Traffic Crash Location Map
-            This interactive map visualizes traffic accidents in Tempe for the selected year. It combines **marker clustering** and a **heatmap** to show:
-            1. **Accident Markers**: Red markers indicate individual accidents, with popups displaying the coordinates, date/time, and severity of each incident.
-            2. **Heatmap**: The heatmap highlights accident hotspots with colors ranging from blue (low frequency) to yellow (moderate) and red (high frequency), showing areas with more frequent accidents.
-            
-            **Key Features:**
-            * **Interactive Year Selection**: Users can select a year to view accidents for that specific time.
-            * **Accident Patterns**: The map reveals accident-prone areas and severity patterns, helping identify dangerous locations.
-            
-            **Color Scheme:**
-            * **Red**: Individual accident markers.
-            * **Blue to Red**: Heatmap colors indicate accident frequency, from low (blue) to high (red).
-            
-            This map provides insights into accident trends and can help guide safety improvements in the city.
+            # Exploring Traffic Accident Severity and Location 
+            The two linked graphs show an interactive platform for exploring traffic accident data, featuring a **bar chart** and a **dynamic map**. 
+            - The **bar chart** displays the distribution of accidents by severity.
+            - The **map** combines marker clustering and heatmaps to highlight accident locations. 
+            - Users can filter data by year and severity to explore patterns.
+            ---
+            ## **Key Features**
+            - **Interactive Bar Chart:** 
+            Displays accident counts by severity, updating the map based on selected severity.
+            - **Map with Dual Layers:**
+            Includes marker clustering for individual accidents and a heatmap to visualize accident density.
+            - **Year-Based Filtering:**
+            Allows users to filter data by year and severity for focused analysis.
+            - **Seamless Integration:**
+            Combines Streamlit and Folium, with Plotly events linking the visualizations.
+            ---
+            ## **Design**
+            - **Bar Chart:**
+            - Uses a calm blue color for clarity.
+            - **Map:**
+            - Uses **CartoDB tiles** with red markers and heatmaps for visibility.
+            ---
+            ## **Insights**
+            - **Severity Patterns:** 
+            The bar chart reveals accident trends across severity levels.
+            - **Spatial Trends:** 
+            The map identifies high-risk accident hotspots.
+            - **Yearly and Severity Insights:** 
+            Filters help uncover temporal and severity-related patterns, aiding traffic safety analysis.
             """)
+    st.markdown("---")
+    
+    # Add conclusion section
+    st.markdown("# FP3 Conclusion")
+    
+    st.markdown("""
+    TODO
+    """)
+
 
 
 if __name__ == "__main__":