Update gradio_app.py

gradio_app.py

@@ -4,12 +4,16 @@ import plotly.express as px
 import plotly.graph_objects as go
 import json
 
-# Color palette for accessibility
+# Color-blind friendly palette (Okabe-Ito palette)
 colorblind_palette = [
-    "#377eb8",  # blue
-    "#ff7f00",  # orange
-    "#a65628",  # brown
-    "#999999",  # gray
+    "#0173b2",  # blue
+    "#de8f05",  # orange
+    "#029e73",  # green
+    "#d55e00",  # red-orange
+    "#cc78bc",  # pink
+    "#ca9161",  # brown
+    "#fbafe4",  # light pink
+    "#949494",  # gray
 ]
 
 # Cache for data (simple in-memory cache)
@@ -57,32 +61,112 @@ def get_col_prefix(authority):
     else:
         raise ValueError(f"Unknown authority {authority}")
 
+def format_number(num):
+    """Format large numbers with proper separators."""
+    if num >= 1000000:
+        return f"{num/1000000:.1f}M"
+    elif num >= 1000:
+        return f"{num/1000:.0f}K"
+    else:
+        return f"{num:,.0f}"
+
+def apply_chart_styling(fig, title, x_title, y_title, show_legend=True):
+    """Apply consistent styling to all charts."""
+    fig.update_layout(
+        title={
+            'text': title,
+            'x': 0.5,
+            'xanchor': 'center',
+            'font': {'size': 18, 'family': 'Arial, sans-serif', 'color': '#2c3e50'}
+        },
+        xaxis={
+            'title': {'text': x_title, 'font': {'size': 14, 'family': 'Arial, sans-serif'}},
+            'tickfont': {'size': 12, 'family': 'Arial, sans-serif'},
+            'gridcolor': '#e8e8e8',
+            'gridwidth': 0.5
+        },
+        yaxis={
+            'title': {'text': y_title, 'font': {'size': 14, 'family': 'Arial, sans-serif'}},
+            'tickfont': {'size': 12, 'family': 'Arial, sans-serif'},
+            'gridcolor': '#e8e8e8',
+            'gridwidth': 0.5,
+            'tickformat': ',.0f' if 'Percent' not in y_title else '.0f'
+        },
+        legend={
+            'orientation': 'h',
+            'yanchor': 'bottom',
+            'y': 1.02,
+            'xanchor': 'center',
+            'x': 0.5,
+            'font': {'size': 12, 'family': 'Arial, sans-serif'},
+            'bgcolor': 'rgba(255,255,255,0.8)',
+            'bordercolor': '#bdc3c7',
+            'borderwidth': 1
+        } if show_legend else {'showlegend': False},
+        plot_bgcolor='white',
+        paper_bgcolor='white',
+        margin={'t': 80, 'r': 40, 'b': 60, 'l': 80},
+        hovermode='x unified'
+    )
+    
+    # Update line properties for better accessibility
+    fig.update_traces(
+        line={'width': 3},
+        marker={'size': 6},
+        hovertemplate='<b>%{fullData.name}</b><br>' +
+                     'Date: %{x}<br>' +
+                     'Value: %{y:,.0f}<br>' +
+                     '<extra></extra>'
+    )
+    
+    return fig
+
 def get_aa_count_chart(df):
     """Get a chart that shows detentions by arresting authority as a count."""
     if df.empty:
         return go.Figure().add_annotation(text="Error loading data", showarrow=False)
     
-    df = df.rename(columns={"ice_all": "ICE", "cbp_all": "CBP", "total_all": "Total"})
+    # Rename columns for better display
+    df_chart = df.copy()
+    df_chart = df_chart.rename(columns={
+        "ice_all": "ICE Detainees", 
+        "cbp_all": "CBP Detainees"
+    })
     
-    df_melted = df.melt(
+    # Create melted dataframe
+    df_melted = df_chart.melt(
         id_vars="date",
-        value_vars=["ICE", "CBP", "Total"],
+        value_vars=["ICE Detainees", "CBP Detainees"],
         var_name="Arresting Authority",
         value_name="count",
     )
     
+    # Create line chart
     fig = px.line(
         df_melted,
         x="date",
         y="count",
         color="Arresting Authority",
         color_discrete_sequence=colorblind_palette,
+        markers=True
     )
     
-    fig.update_layout(
-        xaxis_title="Date",
-        yaxis_title="Detainees",
-        title="ICE Detainees by Date and Arresting Authority",
+    # Apply styling
+    fig = apply_chart_styling(
+        fig,
+        title="ICE Detention Population by Arresting Authority",
+        x_title="Date",
+        y_title="Number of Detainees"
+    )
+    
+    # Add data source annotation
+    fig.add_annotation(
+        text="Source: TRAC Immigration Reports",
+        xref="paper", yref="paper",
+        x=1, y=-0.1,
+        showarrow=False,
+        font={'size': 10, 'color': '#7f8c8d'},
+        xanchor='right'
     )
     
     return fig
@@ -92,28 +176,56 @@ def get_aa_pct_chart(df):
     if df.empty:
         return go.Figure().add_annotation(text="Error loading data", showarrow=False)
     
-    df["ICE"] = (df.ice_all / df.total_all * 100).round()
-    df["CBP"] = (df.cbp_all / df.total_all * 100).round()
+    # Calculate percentages
+    df_chart = df.copy()
+    df_chart["ICE (%)"] = (df_chart.ice_all / df_chart.total_all * 100).round(1)
+    df_chart["CBP (%)"] = (df_chart.cbp_all / df_chart.total_all * 100).round(1)
     
-    df_melted = df.melt(
+    # Create melted dataframe
+    df_melted = df_chart.melt(
         id_vars="date",
-        value_vars=["ICE", "CBP"],
+        value_vars=["ICE (%)", "CBP (%)"],
         var_name="Arresting Authority",
         value_name="percent",
     )
     
+    # Create line chart
     fig = px.line(
         df_melted,
         x="date",
         y="percent",
         color="Arresting Authority",
         color_discrete_sequence=colorblind_palette,
+        markers=True
     )
     
-    fig.update_layout(
-        xaxis_title="Date",
-        yaxis_title="Percent",
-        title="ICE Detainees by Date* and Arresting Authority",
+    # Apply styling
+    fig = apply_chart_styling(
+        fig,
+        title="ICE Detention Population by Arresting Authority (Percentage)",
+        x_title="Date",
+        y_title="Percentage of Total Detainees (%)"
+    )
+    
+    # Update y-axis for percentage
+    fig.update_yaxis(ticksuffix="%", range=[0, 100])
+    
+    # Update hover template for percentages
+    fig.update_traces(
+        hovertemplate='<b>%{fullData.name}</b><br>' +
+                     'Date: %{x}<br>' +
+                     'Percentage: %{y:.1f}%<br>' +
+                     '<extra></extra>'
+    )
+    
+    # Add data source annotation
+    fig.add_annotation(
+        text="Source: TRAC Immigration Reports",
+        xref="paper", yref="paper",
+        x=1, y=-0.1,
+        showarrow=False,
+        font={'size': 10, 'color': '#7f8c8d'},
+        xanchor='right'
     )
     
     return fig
@@ -124,39 +236,56 @@ def get_criminality_count_chart(df, authority):
         return go.Figure().add_annotation(text="Error loading data", showarrow=False)
     
     prefix = get_col_prefix(authority)
-    df = df.rename(
+    
+    # Rename columns for better display
+    df_chart = df.copy()
+    df_chart = df_chart.rename(
         columns={
-            f"{prefix}_all": "Total",
-            f"{prefix}_conv": "Convicted Criminal",
+            f"{prefix}_conv": "Convicted of Crime",
             f"{prefix}_pend": "Pending Criminal Charges",
-            f"{prefix}_other": "Other Immigration Violator",
+            f"{prefix}_other": "Immigration Violations Only",
         }
     )
     
-    df_melted = df.melt(
+    # Create melted dataframe
+    df_melted = df_chart.melt(
         id_vars="date",
         value_vars=[
-            "Convicted Criminal",
-            "Pending Criminal Charges",
-            "Other Immigration Violator",
-            "Total",
+            "Convicted of Crime",
+            "Pending Criminal Charges", 
+            "Immigration Violations Only"
         ],
         var_name="Criminal Status",
         value_name="count",
     )
     
+    # Create line chart
     fig = px.line(
         df_melted,
         x="date",
         y="count",
         color="Criminal Status",
         color_discrete_sequence=colorblind_palette,
+        markers=True
     )
     
-    fig.update_layout(
-        xaxis_title="Date",
-        yaxis_title="Detainees",
-        title="ICE Detainees by Date*, Criminality** and Arresting Authority",
+    # Apply styling
+    authority_text = "All Authorities" if authority == "All" else f"{authority} Detainees"
+    fig = apply_chart_styling(
+        fig,
+        title=f"ICE Detention Population by Criminal Status ({authority_text})",
+        x_title="Date",
+        y_title="Number of Detainees"
+    )
+    
+    # Add data source annotation
+    fig.add_annotation(
+        text="Source: TRAC Immigration Reports",
+        xref="paper", yref="paper",
+        x=1, y=-0.1,
+        showarrow=False,
+        font={'size': 10, 'color': '#7f8c8d'},
+        xanchor='right'
     )
     
     return fig
@@ -172,48 +301,84 @@ def get_criminality_pct_chart(df, authority):
     pend_col = f"{prefix}_pend"
     other_col = f"{prefix}_other"
     
-    df["Convicted Criminal"] = (df[conv_col] / df[all_col] * 100).round()
-    df["Pending Criminal Charges"] = (df[pend_col] / df[all_col] * 100).round()
-    df["Other Immigration Violator"] = (df[other_col] / df[all_col] * 100).round()
+    # Calculate percentages
+    df_chart = df.copy()
+    df_chart["Convicted of Crime (%)"] = (df_chart[conv_col] / df_chart[all_col] * 100).round(1)
+    df_chart["Pending Criminal Charges (%)"] = (df_chart[pend_col] / df_chart[all_col] * 100).round(1)
+    df_chart["Immigration Violations Only (%)"] = (df_chart[other_col] / df_chart[all_col] * 100).round(1)
     
-    df_melted = df.melt(
+    # Create melted dataframe
+    df_melted = df_chart.melt(
         id_vars="date",
         value_vars=[
-            "Convicted Criminal",
-            "Pending Criminal Charges",
-            "Other Immigration Violator",
+            "Convicted of Crime (%)",
+            "Pending Criminal Charges (%)",
+            "Immigration Violations Only (%)",
         ],
         var_name="Criminal Status",
         value_name="percent",
     )
     
+    # Create line chart
     fig = px.line(
         df_melted,
         x="date",
         y="percent",
         color="Criminal Status",
         color_discrete_sequence=colorblind_palette,
+        markers=True
     )
     
-    fig.update_layout(
-        xaxis_title="Date",
-        yaxis_title="Percent",
-        title="ICE Detainees by Date, Criminality, and Arresting Authority",
+    # Apply styling
+    authority_text = "All Authorities" if authority == "All" else f"{authority} Detainees"
+    fig = apply_chart_styling(
+        fig,
+        title=f"ICE Detention Population by Criminal Status - Percentage ({authority_text})",
+        x_title="Date",
+        y_title="Percentage of Total Detainees (%)"
+    )
+    
+    # Update y-axis for percentage
+    fig.update_yaxis(ticksuffix="%", range=[0, 100])
+    
+    # Update hover template for percentages
+    fig.update_traces(
+        hovertemplate='<b>%{fullData.name}</b><br>' +
+                     'Date: %{x}<br>' +
+                     'Percentage: %{y:.1f}%<br>' +
+                     '<extra></extra>'
+    )
+    
+    # Add data source annotation
+    fig.add_annotation(
+        text="Source: TRAC Immigration Reports",
+        xref="paper", yref="paper",
+        x=1, y=-0.1,
+        showarrow=False,
+        font={'size': 10, 'color': '#7f8c8d'},
+        xanchor='right'
     )
     
     return fig
 
 def get_footnote_text(dataset):
     """Get footnote text for the dataset."""
-    abbreviations = 'ICE: Immigration and Customs Enforcement. \nCBP: Customs and Border Protection\n.'
-    date_footnote = "\n*Dates < 11/15/2021 date ICE posted the data; \ndates > 11/15/2021 refer to the date the information was current as of."
-    
-    if dataset == "Arresting Authority":
-        return f"{abbreviations}\n{date_footnote}"
-    elif dataset == "Criminality":
-        criminality_footnote = "**\nICE classifies an individual as a convicted criminal if they have been convicted of any criminal violation. Violations can range from serious felonies all the way down to a purely immigration violation (such as illegal entry which is a petty offense under the U.S. Code), or a violation which results in only in a fine such as not keeping a dog on a leash, fishing without a permit, driving a vehicle with a tail light out, etc."
-        return f"{abbreviations}\n{date_footnote}\n{criminality_footnote}"
-    return ""
+    base_text = """
+### Definitions and Notes
+
+**ICE**: Immigration and Customs Enforcement  
+**CBP**: Customs and Border Protection
+
+**Data Coverage**: Dates before November 15, 2021 reflect when ICE posted the data; dates after November 15, 2021 refer to when the information was current as of that date.
+"""
+    
+    if dataset == "Criminality":
+        criminality_note = """
+**Criminal Classifications**: ICE classifies individuals as "convicted criminals" if they have been convicted of any criminal violation, ranging from serious felonies to minor infractions such as traffic violations, fishing without a permit, or immigration-related petty offenses.
+"""
+        return base_text + criminality_note
+    
+    return base_text
 
 def update_chart(dataset, display, authority):
     """Update the chart based on user selections."""
@@ -273,26 +438,37 @@ def create_app():
         gr.Markdown("*Interactive visualization of ICE detention statistics*")
         
         with gr.Tabs():
-            with gr.TabItem("Graphs"):
+            with gr.TabItem("📊 Visualizations"):
                 with gr.Row():
-                    dataset = gr.Dropdown(
-                        choices=["Arresting Authority", "Criminality"],
-                        value="Arresting Authority",
-                        label="Dataset"
-                    )
-                    display = gr.Dropdown(
-                        choices=["Count", "Percent"],
-                        value="Count",
-                        label="Display"
-                    )
-                    authority = gr.Dropdown(
-                        choices=["All", "ICE", "CBP"],
-                        value="All",
-                        label="Arresting Authority",
-                        visible=False
-                    )
+                    with gr.Column(scale=1):
+                        dataset = gr.Dropdown(
+                            choices=["Arresting Authority", "Criminality"],
+                            value="Arresting Authority",
+                            label="📋 Dataset",
+                            info="Choose the type of data to visualize"
+                        )
+                    with gr.Column(scale=1):
+                        display = gr.Dropdown(
+                            choices=["Count", "Percent"],
+                            value="Count",
+                            label="📈 Display Format",
+                            info="Show absolute numbers or percentages"
+                        )
+                    with gr.Column(scale=1):
+                        authority = gr.Dropdown(
+                            choices=["All", "ICE", "CBP"],
+                            value="All",
+                            label="🏛️ Arresting Authority",
+                            info="Filter by authority (Criminality data only)",
+                            visible=False
+                        )
+                
+                chart = gr.Plot(
+                    label="Detention Statistics",
+                    show_label=False,
+                    container=True
+                )
                 
-                chart = gr.Plot()
                 footnote = gr.Markdown()
                 
                 # Update authority dropdown visibility based on dataset
@@ -320,6 +496,8 @@ def create_app():
                     outputs=[chart, footnote]
                 )
 
+            with gr.TabItem("📖 About"):
+                gr.Markdown(get_data_info())
     
     return app