Update: change plotly event to plotly chart

app.py

@@ -81,9 +81,8 @@ 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'},
-        color_discrete_map=severity_colors,
-        width=800,
-
+        height=600,
+        color_discrete_map=severity_colors, # --> for part 3
     )
     
     # fig.update_layout(
@@ -95,24 +94,12 @@ 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=dict(
-        orientation='v',  
-        x=1,              
-        y=1,              
-        yanchor='top',     
-        xanchor='left',    
-        title="Severity Level"  
-    ),
+        legend_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,) 
+        margin=dict(t=50, b=150),  # Increase bottom margin to avoid pruning
+        xaxis=dict(automargin=True)
     )
     
-
-    
     # return fig
     return fig, violations
 
@@ -186,7 +173,7 @@ def create_map_bar_chart(df, selected_year):
     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
+        margin=dict(t=50, b=150),         # Add bottom margin to prevent label cutoff
     )
     return fig
 
@@ -514,77 +501,80 @@ def main():
             """)
 
     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)
+
+        trend_col, desc_col = st.columns([6, 4])
         
-        chart_col, desc_col = st.columns([7, 4])
-        
-        with chart_col:
-            # Create and display chart
+        with trend_col:
+            # Create and display main chart
             fig, violations = create_severity_violation_chart(df, selected_age)
+            
+            # Display the chart with selection events enabled
+            chart_event = st.plotly_chart(
+                fig, 
+                use_container_width=True,
+                key="violation_chart",
+                on_select="rerun"
+            )
 
-            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
+            # Check if there's a selection event
+            if chart_event and chart_event.selection and chart_event.selection.points:
+                # Get the selected violation type
+                selected_violation = chart_event.selection.points[0]['x']
+                # Create and display pie chart for selected violation
+                pie_chart = create_interactive_pie_chart(violations, selected_violation, selected_age)
                 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)
-                ])
+            # # 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: 
             
-
-        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**.
-
+    
             ---
             """)