Update app.py

app.py

@@ -81,16 +81,22 @@ def create_severity_violation_chart(df, age_group=None):
     return fig
 
 def get_top_violations(df, age_group):
+    # Calculate total incidents for the age group
     if age_group == 'All Ages':
+        total_incidents = len(df)  
+        # Get violations for all ages
         violations = pd.concat([
             df['Violation1_Drv1'].value_counts(),
             df['Violation1_Drv2'].value_counts()
         ]).groupby(level=0).sum()
     else:
+        # Filter for specific age group
         filtered_df = df[
             (df['Age_Group_Drv1'] == age_group) | 
             (df['Age_Group_Drv2'] == age_group)
         ]
+        total_incidents = len(filtered_df)  
+        # Get violations for specific age group
         violations = pd.concat([
             filtered_df['Violation1_Drv1'].value_counts(),
             filtered_df['Violation1_Drv2'].value_counts()
@@ -99,7 +105,12 @@ def get_top_violations(df, age_group):
     # Convert to DataFrame and format
     violations_df = violations.reset_index()
     violations_df.columns = ['Violation Type', 'Count']
-    violations_df['Percentage'] = (violations_df['Count'] / violations_df['Count'].sum() * 100).round(2)
+    
+    # Sort by Count in descending order
+    violations_df = violations_df.sort_values('Count', ascending=False)
+    
+    # Calculate percentage of total incidents
+    violations_df['Percentage'] = (violations_df['Count'] / total_incidents * 100).round(2)
     violations_df['Percentage'] = violations_df['Percentage'].map('{:.2f}%'.format)
     
     return violations_df.head()
@@ -334,7 +345,7 @@ 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])
@@ -358,115 +369,144 @@ def main():
         df['Weather'] = 'Unknown'
     
     # Create tabs for different visualizations
-    tab1, tab2, tab3, tab4, tab5 = st.tabs(["Crash Statistics", "Crash Map", "Crash Trend", "Crash Injuries/Fatalities","Distribution by Category"])
+    tab1, tab2, tab3, tab4, tab5 = st.tabs([
+    "Crash Trend", 
+    "Crash Statistics", 
+    "Distribution by Category",
+    "Crash Injuries/Fatalities",
+    "Crash Map"
+])
     
     with tab1:
-        # Age group selection
-        age_groups = ['All Ages', '16-25', '26-35', '36-45', '46-55', '56-65', '65+']
-        selected_age = st.selectbox('Select Age Group:', age_groups)
-        
-        # Create and display chart
-        fig = create_severity_violation_chart(df, selected_age)
-        st.plotly_chart(fig, use_container_width=True)
-        
-        # Display statistics
-        if selected_age == 'All Ages':
-            total_incidents = len(df)
-        else:
-            total_incidents = len(df[
-                (df['Age_Group_Drv1'] == selected_age) | 
-                (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 tab2:
-        # Year selection for map
-        years = sorted(df['Year'].unique())
-        selected_year = st.selectbox('Select Year:', years)
+        # Weather condition filter
+        weather = ['All Conditions'] + sorted(df['Weather'].unique())
+        selected_weather = st.selectbox('Select Weather Condition:', weather)
         
-        map_col, desc_col = st.columns([7, 3])
+        trend_col, desc_col = st.columns([7, 3])
         
-        with map_col:
-            # Create and display map
-            map_placeholder = st.empty()
-            with map_placeholder:
-                m = create_map(df, selected_year)
-                map_data = st_folium(
-                    m,
-                    width=None,
-                    height=800,
-                    key=f"map_{selected_year}",
-                    returned_objects=["null_drawing"]
-                )
+        with trend_col:
+            trend_fig = create_crash_trend_chart(df, selected_weather)
+            trend_fig.update_layout(
+                height=800,
+                width=None,
+                margin=dict(l=50, r=50, t=50, b=50)
+            )
+            st.plotly_chart(trend_fig, use_container_width=True)
 
         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.
+            ## **Crash Trend Over Time**
+            This interactive line chart visualizes the trend of unique traffic crashes over the years, optionally filtered by weather conditions. It highlights how crash frequency changes over time, helping identify trends and potential contributing factors.
             
             **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.
+            * **Time Trend Analysis**: Displays the total number of unique crashes for each year, showing long-term patterns.
+            * **Weather Filter**: Users can filter the data by weather conditions (e.g., "Rainy", "Sunny") to analyze how weather impacts crash trends.
+            * **Interactive Tooltips**: Hovering over data points reveals the exact crash count for each year, providing detailed insights.
             
-            **Color Scheme:**
-            * **Red**: Individual accident markers.
-            * **Blue to Red**: Heatmap colors indicate accident frequency, from low (blue) to high (red).
+            **Color Scheme and Design:**
+            * **Line and Markers**: A smooth line connects data points, with prominent markers for each year to highlight trends clearly.
+            * **Dynamic Title**: The chart updates its title to reflect the selected weather condition or "All Conditions" for the overall trend.
             
-            This map provides insights into accident trends and can help guide safety improvements in the city.
+            **Insights:**
+            This chart helps uncover:
+               * Annual fluctuations in crash incidents.
+               * Correlations between weather conditions and crash frequencies.
+               * Historical patterns that can guide future safety measures and urban planning decisions
             """)
+
+    with tab2:
+        # Age group selection
+        age_groups = ['All Ages', '16-25', '26-35', '36-45', '46-55', '56-65', '65+']
+        selected_age = st.selectbox('Select Age Group:', age_groups)
         
-    
-    with tab3:
-        # Weather condition filter
-        weather = ['All Conditions'] + sorted(df['Weather'].unique())
-        selected_weather = st.selectbox('Select Weather Condition:', weather)
+        chart_col, desc_col = st.columns([7, 3])
         
-        # Create and display line graph
+        with chart_col:
+            # Create and display chart
+            fig = create_severity_violation_chart(df, selected_age)
+            st.plotly_chart(fig, use_container_width=True)
+            
+            # Display statistics
+            if selected_age == 'All Ages':
+                total_incidents = len(df)
+            else:
+                total_incidents = len(df[
+                    (df['Age_Group_Drv1'] == selected_age) | 
+                    (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)
 
-        trend_col, desc_col = st.columns([7, 3])
+        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.
+
+            **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.
+
+            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.
+            """)
+
+    with tab3:
+        # Dropdown for category selection
+        categories = [
+            'Collisionmanner',
+            'Lightcondition',
+            'Weather',
+            'SurfaceCondition',
+            'AlcoholUse_Drv1',
+            'Gender_Drv1',
+        ]
+        selected_category = st.selectbox("Select Category:", categories)
+
+        # Dropdown for year selection
+        years = ['All Years'] + sorted(df['Year'].dropna().unique().astype(int).tolist())
+        selected_year = st.selectbox("Select Year:", years)
+
+        chart_col, desc_col = st.columns([7, 3])
         
-        with trend_col:
-            trend_fig = create_crash_trend_chart(df, selected_weather)
-            # Update the figure layout for larger size
-            trend_fig.update_layout(
-                height=800,  # Increased height
-                width=None,  # Let width be responsive
+        with chart_col:
+            distribution_chart = create_category_distribution_chart(df, selected_category, selected_year)
+            distribution_chart.update_layout(
+                height=800,
+                width=None,
                 margin=dict(l=50, r=50, t=50, b=50)
             )
-            st.plotly_chart(trend_fig, use_container_width=True)
+            st.plotly_chart(distribution_chart, use_container_width=True)
 
         with desc_col:
-            st.markdown("""
-        ## **Crash Trend Over Time**
-        This interactive line chart visualizes the trend of unique traffic crashes over the years, optionally filtered by weather conditions. It highlights how crash frequency changes over time, helping identify trends and potential contributing factors.
-        
-        **Key Features:**
-        * **Time Trend Analysis**: Displays the total number of unique crashes for each year, showing long-term patterns.
-        * **Weather Filter**: Users can filter the data by weather conditions (e.g., "Rainy", "Sunny") to analyze how weather impacts crash trends.
-        * **Interactive Tooltips**: Hovering over data points reveals the exact crash count for each year, providing detailed insights.
-        **Color Scheme and Design:**
-        * **Line and Markers**: A smooth line connects data points, with prominent markers for each year to highlight trends clearly.
-        * **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.
-           * Historical patterns that can guide future safety measures and urban planning decisions
-        """)
-        
+            st.markdown(f"""
+            ## 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:**
+            * 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.
+    
+            This chart provides actionable insights into factors contributing to traffic incidents and their outcomes, helping stakeholders target interventions and improve road safety.
+            """)
 
     with tab4:
         # Dropdown for Unit Type selection
@@ -478,27 +518,12 @@ def main():
         unit_type_pairs = sorted(list(unit_type_pairs))
         unit_type = st.selectbox("Select Unit Type Pair", options=['Total'] + unit_type_pairs)
     
-        # # Create 5th Visualization: Injuries and fatalities chart
-        # injuries_fatalities_chart = create_injuries_fatalities_chart(df, unit_type)
-        # st.altair_chart(injuries_fatalities_chart, use_container_width=True)
-
-        # st.markdown("""        
-        # This line chart shows the **total number of injuries and fatalities by month for the selected unit type pair**. The blue line represents total injuries, while the red line represents total fatalities. Observing the trends over the months can help identify any seasonal patterns or peaks in traffic incidents involving specific unit types.
-        
-        # - **Total Injuries**: The blue line indicates how injuries vary over different months, highlighting any particular spikes or declines.
-        # - **Total Fatalities**: The red line shows the trend for fatalities, which is generally much lower compared to injuries.
-        # - **Unit Types**: The dropdown selection allows users to filter the data by specific unit type pairs (e.g., Driver vs Pedestrian) or view the overall trend across all types.
-        
-        # This visualization aims to provide an intuitive understanding of how injuries and fatalities are distributed across the year, helping stakeholders develop targeted safety measures.
-        # """)
-        
         chart_col, desc_col = st.columns([7, 3])
     
         with chart_col:
-            # Create 5th Visualization: Injuries and fatalities chart
             injuries_fatalities_chart = create_injuries_fatalities_chart(df, unit_type)
             injuries_fatalities_chart = injuries_fatalities_chart.properties(
-                height=800  # Make the chart taller to match the description column
+                height=800
             )
             st.altair_chart(injuries_fatalities_chart, use_container_width=True)
     
@@ -532,49 +557,92 @@ def main():
             
             This visualization aids stakeholders in developing effective safety measures and resource allocation strategies throughout the year.
             """)
-        
-        
-        
+    
     with tab5:
-        # Dropdown for category selection
-        categories = [
-            'Collisionmanner',
-            'Lightcondition',
-            'Weather',
-            'SurfaceCondition',
-            'AlcoholUse_Drv1',
-            'Gender_Drv1',
-        ]
-        selected_category = st.selectbox("Select Category:", categories)
-
-        # Dropdown for year selection
-        years = ['All Years'] + sorted(df['Year'].dropna().unique().astype(int).tolist())
-        selected_year = st.selectbox("Select Year:", years)
-
-        chart_col, desc_col = st.columns([7, 3])
+        years = sorted(df['Year'].unique())
+        selected_year = st.selectbox('Select Year:', years)
         
-        with chart_col:
-            distribution_chart = create_category_distribution_chart(df, selected_category, selected_year)
-            # Update the figure layout for larger size
-            distribution_chart.update_layout(
-                height=800,  # Increased height
-                width=None,  # Let width be responsive
-                margin=dict(l=50, r=50, t=50, b=50)
-            )
-            st.plotly_chart(distribution_chart, use_container_width=True)
+        map_col, desc_col = st.columns([7, 3])
+        
+        with map_col:
+            map_placeholder = st.empty()
+            with map_placeholder:
+                m = create_map(df, selected_year)
+                map_data = st_folium(
+                    m,
+                    width=None,
+                    height=800,
+                    key=f"map_{selected_year}",
+                    returned_objects=["null_drawing"]
+                )
 
         with desc_col:
-            st.markdown(f"""
-            ## 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).
-    
+            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 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.
-    
-            This chart provides actionable insights into factors contributing to traffic incidents and their outcomes, helping stakeholders target interventions and improve road safety.
+            * **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.
             """)
+    
+    st.markdown("---")
+    
+    # Add TODO section title
+    st.markdown("## To-Do List for Part 3")
+    st.markdown("For the final project part 3, we plan to create two pairs of linked interactive visualizations for analyzing traffic accident data as follows:")
+    
+    # Create two columns
+    plan_col, deliver_col = st.columns(2)
+    
+    with plan_col:
+        st.markdown("""
+        ### Planned Visualizations
+        
+        1. **Severity-Location Analysis**
+            * A bar chart displaying accident severity counts
+            * A map visualizing accident locations with marker clusters and heatmaps
+            * Interactions in one visualization (e.g., clicking a bar in the chart) will dynamically update the other
+            * Enables seamless exploration of data
+        
+        2. **Violation-Severity Analysis**
+            * An interactive bar and pie chart system
+            * Shows the distribution of severity levels for selected violation types
+            * Clicking a specific bar from the "Crash Severity Distribution by Violation Type" bar plot
+            * Dynamically updates a pie plot showing detailed distribution of the chosen violation type
+            * Based on the selected age group
+        """)
+    
+    with deliver_col:
+        st.markdown("""
+        ### Key Deliverables
+        
+        * **Interactive Bar Chart**
+            - Displays accident counts by severity
+            - Allows users to filter data by clicking specific bars
+        
+        * **Interactive Map**
+            - Shows accident locations using marker clusters and heatmaps
+            - Features popups displaying details (e.g., date, severity)
+        
+        * **Two-Way Interactivity**
+            - Synchronizes updates between the bar chart and map
+            - Based on user interactions
+        
+        * **User Interface**
+            - Sidebar controls for year selection
+            - Clear interaction instructions
+            - Display of applied filters
+        """)
+
 
 
 if __name__ == "__main__":