✨ Add choropleth map overlay to all 6 charts - geographic context with consistent baseline z-values

Author: akfave99

docs/chart1-supplier-influence.html

@@ -17,11 +17,43 @@
 from geopolitical_app import create_threat_density_map
 from pages.chart1 import create_3d_surface_figure
 from pages.chart3 import create_3d_scatter_figure, create_choropleth_figure
+from pages.choropleth_map import create_choropleth_map
 from pages.chart4 import create_radar_figure
 from pages.chart5 import create_heatmap_figure
 from pages.chart7 import create_connection_map_figure
 from chart_data import get_data, filter_data
 
+
+def combine_choropleth_with_chart(fig_chart, chart_title):
+    """Combine a chart with a choropleth map overlay."""
+    from plotly.subplots import make_subplots
+    
+    fig_choropleth = create_choropleth_map("Geographic Overview")
+    
+    combined_fig = make_subplots(
+        rows=2, cols=1,
+        subplot_titles=("Geographic Overview", chart_title),
+        specs=[[{"type": "geo"}], [{"type": fig_chart.data[0].type if fig_chart.data else "scatter"}]],
+        vertical_spacing=0.15
+    )
+    
+    # Add choropleth traces
+    for trace in fig_choropleth.data:
+        combined_fig.add_trace(trace, row=1, col=1)
+    
+    # Add chart traces
+    for trace in fig_chart.data:
+        combined_fig.add_trace(trace, row=2, col=1)
+    
+    # Update layout
+    combined_fig.update_layout(
+        height=1200,
+        showlegend=True,
+        title_text=chart_title
+    )
+    
+    return combined_fig
+
 def wrap_with_filters_and_nav(html_content, chart_id, chart_title, filters_html=""):
     """Wrap chart HTML with navigation and filters"""
 
@@ -270,7 +302,8 @@ def main():
     # Chart 1: Supplier Influence with filters
     print("📊 Chart 1: Supplier Influence Surface")
     try:
-        fig = create_3d_surface_figure("Influence", True)
+        fig_chart = create_3d_surface_figure("Influence", True)
+        fig = combine_choropleth_with_chart(fig_chart, "Supplier Influence Surface")
         html = fig.to_html(include_plotlyjs='cdn')
         filters_html = '''
         <div class="filter-group">
@@ -351,7 +384,8 @@ def main():
     # Chart 4: Multi-Country Radar with filters
     print("�� Chart 4: Multi-Country Radar")
     try:
-        fig = create_radar_figure(None, "influence")
+        fig_chart = create_radar_figure(None, "influence")
+        fig = combine_choropleth_with_chart(fig_chart, "Multi-Country Radar Analysis")
         html = fig.to_html(include_plotlyjs='cdn')
         filters_html = '''
         <div class="filter-group">
@@ -381,7 +415,8 @@ def main():
     # Chart 5: Priorities Heatmap with filters
     print("📊 Chart 5: Priorities Heatmap")
     try:
-        fig = create_heatmap_figure("country", "influence")
+        fig_chart = create_heatmap_figure("country", "influence")
+        fig = combine_choropleth_with_chart(fig_chart, "Priorities Heatmap")
         html = fig.to_html(include_plotlyjs='cdn')
         filters_html = '''
         <div class="filter-group">
@@ -410,7 +445,8 @@ def main():
     # Chart 7: Supplier Connections with filters
     print("📊 Chart 7: Supplier Connections")
     try:
-        fig = create_connection_map_figure("all")
+        fig_chart = create_connection_map_figure("all")
+        fig = combine_choropleth_with_chart(fig_chart, "Supplier Connections")
         html = fig.to_html(include_plotlyjs='cdn')
         filters_html = '''
         <div class="filter-group">

docs/chart3-defense-systems.html

@@ -0,0 +1,111 @@
+"""
+Reusable Choropleth Map Component
+Displays a geographic overview map with Central Asian countries and neighboring regions
+"""
+
+import plotly.graph_objects as go
+
+# Country ISO codes mapping
+COUNTRIES_ISO = {
+    "Kazakhstan": "KAZ",
+    "Uzbekistan": "UZB",
+    "Turkmenistan": "TKM",
+    "Azerbaijan": "AZE",
+    "Georgia": "GEO"
+}
+
+# Neighboring countries for geographic context
+NEIGHBORING_COUNTRIES = {
+    'RUS': 'Russia',
+    'CHN': 'China',
+    'AFG': 'Afghanistan',
+    'IRN': 'Iran',
+    'TUR': 'Turkey',
+    'ARM': 'Armenia',
+    'KGZ': 'Kyrgyzstan',
+    'TJK': 'Tajikistan',
+    'PAK': 'Pakistan',
+    'IND': 'India',
+    'MNG': 'Mongolia',
+    'ROU': 'Romania',
+    'BGR': 'Bulgaria',
+    'GRC': 'Greece',
+    'UKR': 'Ukraine',
+    'POL': 'Poland',
+    'SYR': 'Syria',
+    'IRQ': 'Iraq',
+    'SAU': 'Saudi Arabia',
+    'ARE': 'UAE',
+    'OMN': 'Oman',
+    'QAT': 'Qatar',
+    'BHR': 'Bahrain',
+    'KWT': 'Kuwait',
+    'JOR': 'Jordan',
+    'ISR': 'Israel',
+    'PSE': 'Palestine',
+    'LBN': 'Lebanon',
+}
+
+
+def create_choropleth_map(title="Geographic Overview"):
+    """
+    Create a choropleth map showing Central Asian countries and neighboring regions.
+    
+    Args:
+        title (str): Title for the choropleth map
+        
+    Returns:
+        go.Figure: Plotly figure object with choropleth map
+    """
+    # Main countries (5)
+    main_countries = ['Kazakhstan', 'Uzbekistan', 'Turkmenistan', 'Azerbaijan', 'Georgia']
+    main_locations = [COUNTRIES_ISO[c] for c in main_countries]
+    main_z = [100000000, 100000000, 100000000, 100000000, 100000000]  # Consistent baseline
+    
+    fig = go.Figure()
+    
+    # Add main countries trace (with color)
+    fig.add_trace(go.Choropleth(
+        locations=main_locations,
+        z=main_z,
+        text=main_countries,
+        colorscale='Blues',
+        showscale=False,
+        hovertemplate='<b>%{text}</b><extra></extra>',
+        marker_line_color='white',
+        marker_line_width=2,
+        name='Main Countries'
+    ))
+    
+    # Add neighboring countries trace (neutral gray)
+    fig.add_trace(go.Choropleth(
+        locations=list(NEIGHBORING_COUNTRIES.keys()),
+        z=[50000000] * len(NEIGHBORING_COUNTRIES),  # Neutral value
+        text=list(NEIGHBORING_COUNTRIES.values()),
+        colorscale=[[0, 'rgb(220, 220, 220)'], [1, 'rgb(200, 200, 200)']],
+        showscale=False,
+        hovertemplate='<b>%{text}</b> (Neighboring)<extra></extra>',
+        marker_line_color='white',
+        marker_line_width=1,
+        name='Neighboring Countries'
+    ))
+    
+    fig.update_layout(
+        geo=dict(
+            scope='asia',
+            projection_type='natural earth',
+            showland=True,
+            landcolor='rgb(243, 243, 243)',
+            coastlinecolor='rgb(204, 204, 204)',
+            countrycolor='rgb(204, 204, 204)',
+            showlakes=True,
+            lakecolor='rgb(200, 220, 240)',
+            center=dict(lon=70, lat=45),
+            projection_scale=3
+        ),
+        title=title,
+        height=400,
+        margin=dict(l=0, r=0, t=40, b=0)
+    )
+    
+    return fig