Update app.py

app.py

@@ -80,8 +80,8 @@ def create_severity_violation_chart(df, age_group=None):
         y='count',
         color='Severity',
         title=f'Crash Severity Distribution by Violation Type - {age_group}',
-        labels={'count': 'Number of Incidents', 'Violation': 'Violation Type'},
         height=600,
+        labels={'count': 'Number of Incidents', 'Violation': 'Violation Type'},
         color_discrete_map=severity_colors, # --> for part 3
     )
     
@@ -94,9 +94,16 @@ def create_severity_violation_chart(df, age_group=None):
     # modified the above code because x-axis labels were partially pruned
     fig.update_layout(
         xaxis_tickangle=-45,
-        legend_title='Severity Level',
+        legend=dict(
+        orientation='v',  
+        x=1,              
+        y=1,              
+        yanchor='top',     
+        xanchor='left',    
+        title="Severity Level"  
+    ),
         barmode='stack',
-        margin=dict(t=50, b=150),  # Increase bottom margin to avoid pruning
+        margin=dict(t=50, b=150,r=0),  # Increase bottom margin to avoid pruning
         xaxis=dict(automargin=True)
     )
     
@@ -104,16 +111,22 @@ def create_severity_violation_chart(df, age_group=None):
     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)  
+        # 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()
@@ -122,13 +135,17 @@ 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()
 
-# added interactivity pie plot for part3 (linked with crash stats visualization)
-# def create_interactive_pie_chart(violations, selected_violation):
+
 def create_interactive_pie_chart(violations, selected_violation, selected_age):
     # Filter data based on selected violation
     filtered_data = violations[violations['Violation'] == selected_violation]
@@ -145,20 +162,53 @@ def create_interactive_pie_chart(violations, selected_violation, selected_age):
     )
     
     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):
+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']],
@@ -166,15 +216,17 @@ 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):
 
     # 5th visualization title
-    st.header("Total Injuries and Fatalities by Month")
+    # st.header("5. Total Injuries and Fatalities by Month")
     
     # Filter rows where we have valid data for all necessary columns
     crash_data = crash_data[['DateTime', 'Totalinjuries', 'Totalfatalities', 'Unittype_One', 'Unittype_Two']].dropna()
@@ -213,10 +265,10 @@ def create_injuries_fatalities_chart(crash_data, unit_type):
 
     # Reshape the data for easier plotting
     injuries = monthly_sum[['Month', 'Totalinjuries']].rename(columns={'Totalinjuries': 'Value'})
-    injuries['Type'] = 'Total Injuries'
+    injuries['Measure'] = 'Total Injuries'
 
     fatalities = monthly_sum[['Month', 'Totalfatalities']].rename(columns={'Totalfatalities': 'Value'})
-    fatalities['Type'] = 'Total Fatalities'
+    fatalities['Measure'] = 'Total Fatalities'
 
     combined_data = pd.concat([injuries, fatalities])
 
@@ -263,8 +315,8 @@ def create_injuries_fatalities_chart(crash_data, unit_type):
     line_chart = alt.Chart(combined_data).mark_line(point=True).encode(
         x=alt.X('Month:N', sort=month_order, title='Month'),
         y=alt.Y('Value:Q', title='Total Injuries & Fatalities'),
-        color=alt.Color('Type:N', title='', scale=alt.Scale(domain=['Total Injuries', 'Total Fatalities'], range=['blue', 'red'])),
-        tooltip=['Month', 'Type:N', 'Value:Q']
+        color=alt.Color('Measure:N', title='', scale=alt.Scale(domain=['Total Injuries', 'Total Fatalities'], range=['blue', 'red'])),
+        tooltip=['Month', 'Measure:N', 'Value:Q']
     ).properties(
         title=f'Total Injuries and Fatalities by Month for Unit Type Pair: {unit_type}',
         width=600,
@@ -339,7 +391,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
@@ -371,21 +423,21 @@ def main():
         </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("<div class='title'><h1> Accident Analysis for City of Tempe,Arizona </h1></div>", unsafe_allow_html=True)
     
 
     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.
@@ -399,137 +451,176 @@ def main():
     if 'Weather' not in df.columns:
         df['Weather'] = 'Unknown'
 
-    # 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
     
+    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 Statistics", "Crash Map", "Crash Trend", "Crash Injuries/Fatalities","Distribution by Category"])
+    tab1, tab2, tab3, tab4, tab5 = st.tabs([
+    "Crash Trend", 
+    "Violation-Severity Analysis", 
+    "Distribution by Category",
+    "Crash Injuries/Fatalities",
+    "Severity-Location Analysis"
+])
     
     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)
-        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, override_height=600, override_width="100%") # added for part3 (interactive pie chart)
-        
-        # 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 --> 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':
-            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}")
+        # Weather condition filter
+        weather = ['All Conditions'] + sorted(df['Weather'].unique())
+        selected_weather = st.selectbox('Select Weather Condition:', weather)
         
-        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)
+        trend_col, desc_col = st.columns([7, 3])
         
-        map_col, desc_col = st.columns([7, 3])
+        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 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.
+            ## **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 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.
             
-            **Color Scheme:**
-            * **Red**: Individual accident markers.
-            * **Blue to Red**: Heatmap colors indicate accident frequency, from low (blue) to high (red).
+            **Insights:**
             
-            This map provides insights into accident trends and can help guide safety improvements in the city.
+            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([6, 4])
         
-        # Create and display line graph
+        with chart_col:
+            # Create and display chart
+            fig, violations = create_severity_violation_chart(df, selected_age)
 
-        trend_col, desc_col = st.columns([7, 3])
+            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':
+                total_incidents = len(df)
+            else:
+                total_incidents = len(df[
+                    (df['Age_Group_Drv1'] == selected_age) | 
+                    (df['Age_Group_Drv2'] == selected_age)
+                ])
+            
+
+        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**. 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.
+
+            ---
+
+            ## **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:
+        # 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:
-            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
+        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:**
+            * 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
@@ -541,27 +632,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)
     
@@ -595,50 +671,88 @@ 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:
-            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)
+        # Create two columns for visualization and description
+        viz_col, desc_col = st.columns([6, 4])
+        
+        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%"
             )
-            st.plotly_chart(distribution_chart, use_container_width=True)
-
+            
+            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, st.session_state["selected_severity"])
+                map_data = st_folium(
+                    m,
+                    width=None,
+                    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("""
-            ## 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).
+            # 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("---")
     
-            **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.
+    # Add conclusion section
+    st.markdown("# FP3 Conclusion")
     
-            This chart provides actionable insights into factors contributing to traffic incidents and their outcomes, helping stakeholders target interventions and improve road safety.
-            """)
+    st.markdown("""
+    TODO
+    """)
+
 
 
 if __name__ == "__main__":