layout update

app.py

@@ -303,15 +303,42 @@ def create_category_distribution_chart(df, selected_category, selected_year):
     return fig
 
 def main():
-    st.title('Traffic Accident Dataset')
+    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 （[email protected]）
     - Hangyue Zhang ([email protected])
     - Andrew Nam ([email protected])
-    - Nirmal Attarde
-    - Maanas Sandeep Agrawa
+    - Nirmal Attarde ([email protected])
+    - Maanas Sandeep Agrawa ([email protected])
     """)
     
 
@@ -368,20 +395,24 @@ 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"]
-            )
-
-        st.markdown("""
+        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.
@@ -397,7 +428,6 @@ def main():
             
             This map provides insights into accident trends and can help guide safety improvements in the city.
             """)
-
         
     
     with tab3:
@@ -406,23 +436,31 @@ 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)
 
-        st.markdown("""
+        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.
@@ -441,18 +479,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
@@ -470,22 +552,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)
-
-        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.
+        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)
 
-        This chart provides actionable insights into factors contributing to traffic incidents and their outcomes, helping stakeholders target interventions and improve road safety.
-        """)
+        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__":