Update app.py

app.py

@@ -3,11 +3,11 @@ import pandas as pd
 import plotly.express as px
 import altair as alt
 import folium
-from streamlit_plotly_events import plotly_events
+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
+# To fix the color scheme in crash stats plot (asked ChatGPT for appropriate colors)
 severity_colors = {
     "No Injury": "#1f77b4",
     "Possible Injury": "#aec7e8",
@@ -88,29 +88,13 @@ def create_severity_violation_chart(df, age_group=None):
     fig.update_layout(
         xaxis_tickangle=-45,
         legend_title='Severity Level',
-        barmode='stack'
+        barmode='stack',
+        margin=dict(t=50, b=150),  # Increase bottom margin to avoid pruning
+        xaxis=dict(automargin=True)
     )
     
     # return fig
-    return fig, violations # this return is needed for part3
-
-# added interactivity pie plot for part3
-def create_interactive_pie_chart(violations, selected_violation):
-    # 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}',
-        height=400,
-        color_discrete_map=severity_colors
-    )
-    
-    return fig
-
+    return fig, violations
 
 def get_top_violations(df, age_group):
     if age_group == 'All Ages':
@@ -136,6 +120,23 @@ def get_top_violations(df, age_group):
     
     return violations_df.head()
 
+# added interactivity pie plot for part3 (linked with crash stats visualization)
+def create_interactive_pie_chart(violations, selected_violation):
+    # 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}',
+        height=600,
+        color_discrete_map=severity_colors
+    )
+    
+    return fig
+    
 @st.cache_data
 def create_map(df, selected_year):
     filtered_df = df[df['Year'] == selected_year]
@@ -335,7 +336,53 @@ def create_category_distribution_chart(df, selected_category, selected_year):
     return fig
 
 def main():
-    st.title('Traffic Crash Analysis')
+    st.set_page_config(page_title="Terrific Tempe Traffic", layout="wide")
+
+    st.markdown("""
+    <style>
+    .reportview-container {
+        font-size: 20px;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        font-size: 150%; 
+    }
+    p {
+        font-size: 125%; 
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+
+    st.markdown("""
+        <style>
+        .title {
+            text-align: center;
+            padding: 25px;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+    
+    st.markdown("<div class='title'><h1> Accident Analysis for City of Tempe, Arizona </h1></div>", unsafe_allow_html=True)
+    
+
+    st.markdown("""
+     **Team Members:**
+    - Janhavi Tushar Zarapkar （jzarap2@illinois.edu）
+    - Hangyue Zhang (hz85@illinois.edu)
+    - Andrew Nam (donginn2@illinois.edu)
+    - Nirmal Attarde (natta4@illinois.edu)
+    - Maanas Sandeep Agrawa (msa17@illinois.edu)
+    """)
+    
+
+    st.markdown("""
+    ### 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.
+    """)
+    
+    
     
     # Load data
     df = load_and_preprocess_data('1.08_Crash_Data_Report_(detail).csv')
@@ -343,7 +390,7 @@ def main():
     if 'Weather' not in df.columns:
         df['Weather'] = 'Unknown'
 
-    # Initialize session state to store selected violation --> for part3
+    # Initialize session state to store selected violation --> added for part3 (interactive pie chart)
     if 'selected_violation' not in st.session_state:
         st.session_state['selected_violation'] = None
     
@@ -357,28 +404,22 @@ def main():
         
         # Create and display chart
         # fig = create_severity_violation_chart(df, selected_age)
-        fig, violations = create_severity_violation_chart(df, selected_age) # --> for part3
-
-        # # Get unique violations from the chart data (New line) --> for part3
-        # unique_violations = violations['Violation'].unique()
-        
+        fig, violations = create_severity_violation_chart(df, selected_age) # --> for part3 (interactive pie chart)
         # st.plotly_chart(fig, use_container_width=True)
 
         # Display the first bar chart and capture click events using plotly_events
-        # clicked_points = plotly_events(fig, click_event=True)
-        clicked_points = plotly_events(fig, click_event=True, override_height=600, override_width="100%") # for part3
+        clicked_points = plotly_events(fig, click_event=True, override_height=600, override_width="100%") # added for part3 (interactive pie chart)
         
-        # If a bar is clicked, update the selected_violation in session_state
+        # If a bar is clicked, update the selected_violation in session_state --> added for part3 (interactive pie chart)
         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
+        # 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'])
             st.plotly_chart(pie_chart, use_container_width=True)
-
         
         # Display statistics
         if selected_age == 'All Ages':
@@ -406,18 +447,40 @@ def main():
         years = sorted(df['Year'].unique())
         selected_year = st.selectbox('Select Year:', years)
         
-        # Create and display map
-        st.markdown("### Crash Location Map")
-        map_placeholder = st.empty()
-        with map_placeholder:
-            m = create_map(df, selected_year)
-            map_data = st_folium(
-                m,
-                width=800,
-                height=600,
-                key=f"map_{selected_year}",
-                returned_objects=["null_drawing"]
-            )
+        map_col, desc_col = st.columns([7, 3])
+        
+        with map_col:
+            # Create and display map
+            st.markdown("### Crash Location 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 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.
+            """)
+        
     
     with tab3:
         # Weather condition filter
@@ -425,9 +488,38 @@ def main():
         selected_weather = st.selectbox('Select Weather Condition:', weather)
         
         # Create and display line graph
-        st.markdown("### Crash Trend Over Time")
-        trend_fig = create_crash_trend_chart(df, selected_weather)
-        st.plotly_chart(trend_fig, use_container_width=True)
+
+        trend_col, desc_col = st.columns([7, 3])
+        
+        with trend_col:
+            st.markdown("### Crash Trend Over Time")
+            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
+                margin=dict(l=50, r=50, t=50, b=50)
+            )
+            st.plotly_chart(trend_fig, 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
+        """)
+        
 
     with tab4:
         # Dropdown for Unit Type selection
@@ -439,18 +531,62 @@ 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.
+        # # 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
+            )
+            st.altair_chart(injuries_fatalities_chart, use_container_width=True)
+    
+        with desc_col:
+            st.markdown("""
+            ## Injuries and Fatalities Trends
+            
+            This line chart shows the **total number of injuries and fatalities by month for the selected unit type pair**. The visualization helps identify seasonal patterns and critical trends in traffic incidents involving specific unit types.
+    
+            **Key Features:**
+            * **Injuries Trend** (Blue Line)
+                - Tracks monthly injury counts
+                - Shows seasonal variations
+                - Identifies peak incident periods
+    
+            * **Fatalities Trend** (Red Line)
+                - Monitors monthly fatality counts
+                - Generally lower than injuries
+                - Highlights critical safety concerns
+    
+            * **Interactive Selection**
+                - Filter by specific unit type pairs
+                - Compare different vehicle combinations
+                - View overall trends across all types
+    
+            **Applications:**
+            - Identify high-risk months
+            - Guide seasonal safety measures
+            - Inform emergency response planning
+            - Support targeted intervention strategies
+            
+            This visualization aids stakeholders in developing effective safety measures and resource allocation strategies throughout the year.
+            """)
         
-        - **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.
-        """)
         
     with tab5:
         # Dropdown for category selection
@@ -468,10 +604,31 @@ def main():
         years = ['All Years'] + sorted(df['Year'].dropna().unique().astype(int).tolist())
         selected_year = st.selectbox("Select Year:", years)
 
-        # Generate and display the distribution chart
-        st.markdown(f"### Distribution of Incidents by {selected_category}")
-        distribution_chart = create_category_distribution_chart(df, selected_category, selected_year)
-        st.plotly_chart(distribution_chart, use_container_width=True)
+        chart_col, desc_col = st.columns([7, 3])
+        
+        with chart_col:
+            st.markdown(f"### Distribution of Incidents by {selected_category}")
+            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)
+
+        with desc_col:
+            st.markdown("""
+            ## Distribution by 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.
+            """)
 
 
 if __name__ == "__main__":