Upload 40 files

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+app/static/img/heatmap_jatim.png filter=lfs diff=lfs merge=lfs -text
+cleaned_data.csv filter=lfs diff=lfs merge=lfs -text
+data/geojson/Kab_Kota[[:space:]]SHP.7z.001 filter=lfs diff=lfs merge=lfs -text

app/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

app/forecast.py

@@ -0,0 +1,48 @@
+from statsmodels.tsa.holtwinters import ExponentialSmoothing
+import pandas as pd
+
+def forecast(forecast_data):
+    future_months = 12
+
+    df = pd.DataFrame(forecast_data)
+
+    df['date'] = pd.to_datetime(df['tahun'].astype(str) + '-' + df['bulan'].astype(str) + '-01')
+    df = df[['date', 'count']].sort_values('date')
+
+    max_date = df['date'].max()
+    cutoff = max_date - pd.DateOffset(years=5)
+    df = df[df['date'] >= cutoff]
+
+    df.set_index('date', inplace=True)
+    ts = df['count'].asfreq('MS').fillna(0)
+
+    # MODEL HOLT-WINTERS
+    model = ExponentialSmoothing(
+        ts,
+        trend="add",        # bisa juga "mul"
+        seasonal="add",
+        seasonal_periods=12
+    ).fit()
+
+    prediction = model.forecast(future_months)
+
+    future_index = pd.date_range(
+        ts.index[-1] + pd.DateOffset(months=1),
+        periods=future_months,
+        freq='MS'
+    )
+
+    forecast_json = [
+        {"date": str(date.date()), "forecast": float(pred)}
+        for date, pred in zip(future_index, prediction)
+    ]
+
+    history_json = [
+        {"date": str(idx.date()), "count": int(val)}
+        for idx, val in ts.items()
+    ]
+
+    return {
+        "history": history_json,
+        "forecast": forecast_json
+    }

app/map_py.py

@@ -0,0 +1,245 @@
+import folium
+from folium import plugins
+import json
+import random
+import colorsys
+
+
+def generate_vibrant_colors(n):
+    """Generate n vibrant distinct colors for polygon map (like the reference image)."""
+    # Predefined vibrant colors matching the reference image style
+    vibrant_palette = [
+        '#DC143C',  # Crimson red
+        '#FF1493',  # Deep pink
+        '#8B008B',  # Dark magenta
+        '#9400D3',  # Dark violet
+        '#4B0082',  # Indigo
+        '#0000CD',  # Medium blue
+        '#1E90FF',  # Dodger blue
+        '#00BFFF',  # Deep sky blue
+        '#00CED1',  # Dark turquoise
+        '#20B2AA',  # Light sea green
+        '#008B8B',  # Dark cyan
+        '#006400',  # Dark green
+        '#228B22',  # Forest green
+        '#32CD32',  # Lime green
+        '#7FFF00',  # Chartreuse
+        '#ADFF2F',  # Green yellow
+        '#FFD700',  # Gold
+        '#FFA500',  # Orange
+        '#FF8C00',  # Dark orange
+        '#FF6347',  # Tomato
+        '#FF4500',  # Orange red
+        '#B22222',  # Fire brick
+        '#8B4513',  # Saddle brown
+        '#D2691E',  # Chocolate
+        '#CD853F',  # Peru
+        '#DEB887',  # Burlywood
+        '#F0E68C',  # Khaki
+        '#9370DB',  # Medium purple
+        '#BA55D3',  # Medium orchid
+        '#DA70D6',  # Orchid
+        '#EE82EE',  # Violet
+        '#FF69B4',  # Hot pink
+        '#C71585',  # Medium violet red
+        '#DB7093',  # Pale violet red
+        '#BC8F8F',  # Rosy brown
+        '#CD5C5C',  # Indian red
+        '#F08080',  # Light coral
+        '#FA8072',  # Salmon
+    ]
+    
+    # If we need more colors, generate additional ones using HSV
+    if n > len(vibrant_palette):
+        for i in range(n - len(vibrant_palette)):
+            hue = (i * 137.5) % 360  # Golden angle for good distribution
+            saturation = 0.7 + (random.random() * 0.3)  # 70-100%
+            value = 0.6 + (random.random() * 0.4)  # 60-100%
+            
+            rgb = colorsys.hsv_to_rgb(hue/360.0, saturation, value)
+            hex_color = '#{:02x}{:02x}{:02x}'.format(
+                int(rgb[0] * 255),
+                int(rgb[1] * 255),
+                int(rgb[2] * 255)
+            )
+            vibrant_palette.append(hex_color)
+    
+    # Shuffle and return exactly n colors
+    colors = vibrant_palette[:n]
+    random.shuffle(colors)
+    return colors
+
+
+def create_map():
+    """Create a Folium polygon map with vibrant colors - like the reference image.
+
+    Returns:
+        str: HTML string for embedding the Folium map (safe to render).
+    """
+    # Load GeoJSON data with 38 kabupaten/kota
+    with open('data/geojson/jatim_kabkota.geojson', encoding='utf-8') as f:
+        geojson_data = json.load(f)
+
+    # Generate vibrant distinct colors for each district (polygon style)
+    num_districts = len(geojson_data['features'])
+    vibrant_colors = generate_vibrant_colors(num_districts)
+    
+    # Create color mapping for each district
+    color_map = {}
+    for i, feature in enumerate(geojson_data['features']):
+        district_name = feature['properties']['name']
+        color_map[district_name] = vibrant_colors[i]
+    
+    # Create Folium map with white background (like reference image)
+    m = folium.Map(
+        location=[-7.5, 112.5], 
+        zoom_start=8,
+        tiles='CartoDB positron',
+        prefer_canvas=True,
+        zoom_control=True,
+        scrollWheelZoom=True
+    )
+
+    # Style function: Vibrant distinct color for each district (polygon style)
+    def style_function(feature):
+        district_name = feature['properties'].get('name', 'Unknown')
+        return {
+            'fillColor': color_map.get(district_name, '#4A90E2'),
+            'color': '#333333',      # Dark gray border between polygons
+            'weight': 1.5,           # Thinner border for cleaner look
+            'fillOpacity': 0.9,      # Solid colors like reference image
+            'opacity': 1
+        }
+
+    # Highlight function for hover effect
+    def highlight_function(feature):
+        district_name = feature['properties'].get('name', 'Unknown')
+        return {
+            'fillColor': color_map.get(district_name, '#4A90E2'),
+            'color': '#000000',      # Black border on hover
+            'weight': 3,
+            'fillOpacity': 1.0,      # Full opacity on hover
+        }
+
+    # Add GeoJSON layer with choropleth colors
+    folium.GeoJson(
+        geojson_data,
+        name='Kabupaten/Kota Jawa Timur',
+        style_function=style_function,
+        highlight_function=highlight_function,
+        tooltip=folium.GeoJsonTooltip(
+            fields=['name'],
+            aliases=['Wilayah:'],
+            localize=True,
+            sticky=False,
+            labels=True,
+            style="""
+                background-color: white;
+                border: 2px solid #2C3E50;
+                border-radius: 5px;
+                font-family: Arial, sans-serif;
+                font-size: 12px;
+                padding: 8px;
+                box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
+            """,
+        ),
+        popup=folium.GeoJsonPopup(
+            fields=['name', 'province'],
+            aliases=['Nama:', 'Provinsi:'],
+            localize=True,
+        )
+    ).add_to(m)
+    
+    # Add text labels at centroids
+    for feature in geojson_data['features']:
+        props = feature['properties']
+        name = props.get('name', 'Unknown')
+        lat = props.get('centroid_lat')
+        lon = props.get('centroid_lon')
+        
+        if lat and lon:
+            # Shorten names for display
+            display_name = name.replace('Kab. ', '').replace('Kota ', '')
+            
+            folium.Marker(
+                location=[lat, lon],
+                icon=folium.DivIcon(html=f'''
+                    <div style="
+                        font-family: Arial, sans-serif;
+                        font-size: 9px;
+                        color: #FFFFFF;
+                        font-weight: bold;
+                        text-shadow: 
+                            1px 1px 2px rgba(0,0,0,0.9),
+                            -1px -1px 2px rgba(0,0,0,0.9),
+                            1px -1px 2px rgba(0,0,0,0.9),
+                            -1px 1px 2px rgba(0,0,0,0.9);
+                        text-align: center;
+                        white-space: nowrap;
+                    ">{display_name}</div>
+                ''')
+            ).add_to(m)
+
+    # Fit map to bounds
+    bounds = []
+    for feature in geojson_data['features']:
+        geom = feature['geometry']
+        if geom['type'] == 'Polygon':
+            for pt in geom['coordinates'][0]:
+                bounds.append((pt[1], pt[0]))
+        elif geom['type'] == 'MultiPolygon':
+            for poly in geom['coordinates']:
+                for pt in poly[0]:
+                    bounds.append((pt[1], pt[0]))
+    
+    if bounds:
+        m.fit_bounds(bounds)
+
+    # # Add legend showing vibrant polygon colors
+    # legend_html = '''
+    # <div style="position: fixed; 
+    #             top: 10px; right: 10px; width: 240px; 
+    #             background-color: white; z-index:9999;
+    #             border:2px solid #333; border-radius: 8px;
+    #             padding: 15px;
+    #             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    #             font-family: Arial, sans-serif;
+    #             ">
+    #     <div style="margin-top: 10px; max-height: 300px; overflow-y: auto;">
+    # '''
+    
+    # Show all districts with their unique colors
+    for district, color in sorted(color_map.items()):
+        display_name = district.replace('Kab. ', '').replace('Kota ', '')
+        legend_html += f'''
+        <div style="margin: 3px 0; display: flex; align-items: center;">
+            <div style="width: 22px; height: 16px; background-color: {color}; 
+                        border: 1px solid #666; margin-right: 8px; border-radius: 2px;
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.2);"></div>
+            <span style="font-size: 9px; color: #444;">{display_name}</span>
+        </div>
+        '''
+    
+    legend_html += '''
+        </div>
+        <div style="margin-top: 12px; padding-top: 10px; border-top: 1px solid #ddd; 
+                    font-size: 9px; color: #888; text-align: center;">
+            Klik wilayah untuk detail
+        </div>
+    </div>
+    '''
+    
+    m.get_root().html.add_child(folium.Element(legend_html))
+
+    # Add background color styling (white like reference image)
+    custom_css = '''
+    <style>
+        .leaflet-container {
+            background-color: #FFFFFF !important;
+        }
+    </style>
+    '''
+    m.get_root().html.add_child(folium.Element(custom_css))
+
+    # Return HTML representation (embedding) so the route can render it inside a template
+    return m._repr_html_()

app/map_py_backup.py

@@ -0,0 +1,225 @@
+import folium
+import json
+import random
+
+
+import folium
+import json
+import os
+import random
+
+def generate_distinct_colors(n):
+    """Generate n distinct bright colors for each district"""
+    # Predefined palette of 38 distinct, vibrant colors
+    colors = [
+        '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
+        '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788',
+        '#E63946', '#06FFA5', '#FFD93D', '#6BCF7F', '#C77DFF',
+        '#FF9F1C', '#2EC4B6', '#E71D36', '#FF499E', '#00B4D8',
+        '#90E0EF', '#F72585', '#7209B7', '#3A0CA3', '#F4A261',
+        '#2A9D8F', '#E76F51', '#264653', '#E9C46A', '#F77F00',
+        '#D62828', '#023047', '#8338EC', '#3DDC84', '#FF006E',
+        '#FFBE0B', '#FB5607', '#8AC926'
+    ]
+    
+    # Shuffle to ensure adjacent regions get different colors
+    random.shuffle(colors)
+    
+    return colors[:n]
+
+def create_map():
+    """Create a Folium map with distinct colors for each kabupaten/kota in Jawa Timur.
+
+    Returns:
+        str: HTML string for embedding the Folium map (safe to render).
+    """
+    # Load GeoJSON data - using complete kabupaten/kota file
+    geojson_path = os.path.join(os.path.dirname(__file__), '..', 'data', 'geojson', 'jatim_kabkota.geojson')
+    
+    with open(geojson_path, encoding='utf-8') as f:
+        geojson_data = json.load(f)
+
+    # Create a Folium map centered on Jawa Timur
+    m = folium.Map(
+        location=[-7.5, 112.5], 
+        zoom_start=8,
+        tiles='CartoDB positron',
+        prefer_canvas=True,
+        zoom_control=True,
+        attributionControl=False
+    )
+
+    # Generate distinct colors for each kabupaten/kota (38 total)
+    num_features = len(geojson_data.get('features', []))
+    colors = generate_distinct_colors(num_features)
+    
+    # Create color mapping with city names
+    color_map = {}
+    city_list = []
+    for idx, feature in enumerate(geojson_data.get('features', [])):
+        feature_name = feature.get('properties', {}).get('name', f'Feature_{idx}')
+        feature_type = feature.get('properties', {}).get('type', 'Kabupaten')
+        color_map[feature_name] = colors[idx]
+        city_list.append({
+            'name': feature_name,
+            'type': feature_type,
+            'color': colors[idx]
+        })
+
+    # Style function - 3D effect with vibrant colors like the reference image
+    def style_function(feature):
+        feature_name = feature['properties'].get('name', 'Unknown')
+        return {
+            'fillColor': color_map.get(feature_name, '#CCCCCC'),
+            'color': '#333333',      # Dark gray border for 3D effect
+            'weight': 2,             # Medium border
+            'fillOpacity': 1.0,      # Completely solid for vibrant colors
+            'opacity': 1,            # Solid border
+            'dashArray': None,       # Solid line
+            'lineJoin': 'miter',     # Sharp corners for clear boundaries
+            'lineCap': 'butt'        # Clean edges
+        }
+
+    # Highlight function for hover
+    def highlight_function(feature):
+        return {
+            'fillColor': '#FFFF00',  # Yellow on hover
+            'color': '#FF0000',      # Red border
+            'weight': 3,
+            'fillOpacity': 0.9,
+        }
+
+    # Add GeoJSON layer with colored regions
+    folium.GeoJson(
+        geojson_data,
+        name='Jawa Timur',
+        style_function=style_function,
+        highlight_function=highlight_function,
+        tooltip=folium.GeoJsonTooltip(
+            fields=['name'],
+            aliases=['Wilayah:'],
+            localize=True,
+            sticky=False,
+            labels=True,
+            style="""
+                background-color: white;
+                border: 2px solid black;
+                border-radius: 5px;
+                font-family: Arial, sans-serif;
+                font-size: 12px;
+                padding: 8px;
+                box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
+            """,
+        )
+    ).add_to(m)
+    
+    # Add text labels on each kabupaten/kota
+    for feature in geojson_data.get('features', []):
+        props = feature.get('properties', {})
+        name = props.get('name', 'Unknown')
+        center_lat = props.get('centroid_lat')
+        center_lon = props.get('centroid_lon')
+        
+        if center_lat and center_lon:
+            # Add label marker with white text and shadow for contrast
+            folium.Marker(
+                location=[center_lat, center_lon],
+                icon=folium.DivIcon(html=f'''
+                    <div style="
+                        font-family: Arial, sans-serif;
+                        font-size: 10px;
+                        color: #FFFFFF;
+                        font-weight: bold;
+                        text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 
+                                     -1px -1px 3px rgba(0,0,0,0.9),
+                                     1px -1px 3px rgba(0,0,0,0.9),
+                                     -1px 1px 3px rgba(0,0,0,0.9);
+                        text-align: center;
+                        white-space: nowrap;
+                    ">{name}</div>
+                ''')
+            ).add_to(m)
+
+    # Add custom CSS for STRONG 3D shadow effect like the reference image
+    custom_css = '''
+    <style>
+        .leaflet-container {
+            background-color: #F5F5F5 !important;  /* Light gray background */
+        }
+        /* STRONG 3D shadow effect - multiple layers for depth */
+        .leaflet-interactive {
+            filter: 
+                drop-shadow(3px 3px 2px rgba(0,0,0,0.3))
+                drop-shadow(6px 6px 4px rgba(0,0,0,0.25))
+                drop-shadow(9px 9px 8px rgba(0,0,0,0.2))
+                drop-shadow(12px 12px 12px rgba(0,0,0,0.15));
+        }
+        /* Clean polygon edges */
+        path.leaflet-interactive {
+            stroke-linejoin: miter !important;
+            stroke-linecap: butt !important;
+        }
+    </style>
+    '''
+    m.get_root().html.add_child(folium.Element(custom_css))
+    
+    # Add legend showing all 38 kabupaten/kota with their unique colors
+    legend_html = '''
+    <div style="position: fixed; 
+                bottom: 20px; left: 20px; width: 280px; max-height: 520px;
+                background-color: white; z-index:9999; font-size:11px;
+                border:2px solid #333; border-radius: 8px;
+                overflow-y: auto;
+                box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
+                font-family: Arial, sans-serif;
+                ">
+        <div style="background-color: #1976D2; color: white; padding: 12px; 
+                    font-weight: bold; text-align: center; font-size: 13px;
+                    border-radius: 6px 6px 0 0;">
+            📍 38 Kabupaten/Kota Jawa Timur
+        </div>
+        <div style="padding: 10px; max-height: 450px; overflow-y: auto;">
+    '''
+    
+    # Sort cities alphabetically and add to legend
+    sorted_cities = sorted(city_list, key=lambda x: x['name'])
+    for idx, city in enumerate(sorted_cities, 1):
+        legend_html += f'''
+            <div style="margin: 3px 0; display: flex; align-items: center;">
+                <div style="width: 20px; height: 20px; background-color: {city['color']}; 
+                            border: 1.5px solid #333; margin-right: 8px; flex-shrink: 0;
+                            border-radius: 3px;
+                            box-shadow: 2px 2px 4px rgba(0,0,0,0.3);"></div>
+                <span style="font-size: 10px; color: #333;">
+                    <b>{idx}.</b> {city['name']} ({city['type']})
+                </span>
+            </div>
+        '''
+    
+    legend_html += '''
+        </div>
+    </div>
+    '''
+    
+    m.get_root().html.add_child(folium.Element(legend_html))
+
+    # Add title
+    title_html = '''
+    <div style="position: fixed; 
+                top: 10px; left: 50%; transform: translateX(-50%);
+                background-color: white; z-index:9999; 
+                padding: 10px 30px;
+                border: 2px solid black;
+                border-radius: 5px;
+                font-family: Arial, sans-serif;
+                font-size: 16px;
+                font-weight: bold;
+                box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
+                ">
+        Peta Jawa Timur - Kabupaten/Kota
+    </div>
+    '''
+    m.get_root().html.add_child(folium.Element(title_html))
+
+    # Return HTML representation
+    return m._repr_html_()

app/map_py_heatmap.py

@@ -0,0 +1,544 @@
+import folium
+from folium import plugins
+import json
+import os
+import pandas as pd
+from collections import Counter
+
+
+import folium
+from folium import plugins
+import json
+import os
+import pandas as pd
+from collections import Counter
+
+
+def load_case_data_from_csv(filter_year='all', filter_crime='all', filter_city='all'):
+    """Load case data from a single cleaned CSV file."""
+
+    cleaned_csv_path = "../cleaned_data.csv"
+    if not os.path.exists(cleaned_csv_path):
+        raise FileNotFoundError(f"{cleaned_csv_path} not found.")
+
+    # load 1 file saja
+    data = pd.read_csv(cleaned_csv_path, on_bad_lines='skip')
+
+    # normalisasi ke lowercase
+    data_lower = data.map(
+        lambda x: x.lower().strip() if isinstance(x, str) and x.strip() != "" else x
+    )
+
+    # normalisasi nama pengadilan → ambil kota-nya saja
+    if 'lembaga_peradilan' in data_lower.columns:
+        data_lower['kota'] = (
+            data_lower['lembaga_peradilan']
+            .str.replace(r'^pn\s+', '', regex=True)
+            .str.strip()
+            .str.title()
+        )
+    else:
+        data_lower['kota'] = None
+
+    # parsing tanggal
+    if 'tanggal_musyawarah' in data_lower.columns:
+        data_lower['tanggal'] = pd.to_datetime(
+            data_lower['tanggal_musyawarah'], errors='coerce'
+        )
+        data_lower['tahun_putusan'] = data_lower['tanggal'].dt.year.astype('Int64')
+
+    df = data_lower.copy()
+
+    # filter year
+    if filter_year != 'all':
+        try:
+            year_val = int(filter_year)
+            df = df[df['tahun_putusan'] == year_val]
+        except:
+            pass
+
+    # filter crime
+    if filter_crime != 'all' and 'kata_kunci' in df.columns:
+        df = df[df['kata_kunci'] == filter_crime.lower()]
+
+    # filter city
+    if filter_city != 'all':
+        df = df[df['kota'].str.lower() == filter_city.lower()]
+
+    if df.empty:
+        return {}
+
+    # agregasi
+    case_data = {}
+
+    # group by kota
+    grouped = df.groupby('kota')
+
+    for kota, group in grouped:
+        total_cases = len(group)
+
+        # ambil top 10 kejahatan
+        if 'kata_kunci' in group.columns:
+            crime_counts = group['kata_kunci'].value_counts().head(10)
+        else:
+            crime_counts = {}
+
+        cases = {crime.title(): int(count) for crime, count in crime_counts.items()}
+
+        case_data[kota] = {
+            'total': total_cases,
+            'cases': cases,
+        }
+
+    return case_data
+
+
+
+def create_heatmap_interactive(filter_year='all', filter_crime='all', filter_city='all'):
+    """Create an interactive Folium choropleth heatmap with click-to-zoom and case information.
+    
+    Args:
+        filter_year: Filter by specific year or 'all' for all years
+        filter_crime: Filter by specific crime type or 'all' for all crimes
+        filter_city: Filter by specific city/kabupaten or 'all' for all cities
+
+    Returns:
+        str: HTML string for embedding the Folium map.
+    """
+    # Load real case data from CSV with filters
+    real_case_data = load_case_data_from_csv(filter_year=filter_year, filter_crime=filter_crime, filter_city=filter_city)
+    
+    # Load GeoJSON data with metric
+    try:
+        with open('app/static/geojson/jatim_kabkota_metric.geojson', encoding='utf-8') as f:
+            geojson_data = json.load(f)
+    except:
+        # Fallback to original if metric version doesn't exist
+        with open('data/geojson/jatim_kabkota.geojson', encoding='utf-8') as f:
+            geojson_data = json.load(f)
+    
+    # Update features with real case data
+    for feature in geojson_data['features']:
+        kabupaten_name = feature['properties'].get('name', feature['properties'].get('NAMOBJ', ''))
+        
+        if kabupaten_name in real_case_data:
+            # Use real data
+            data = real_case_data[kabupaten_name]
+            feature['properties']['metric'] = data['total']
+            feature['properties']['cases'] = data['cases']
+            feature['properties']['total_cases'] = data['total']
+        else:
+            # Fallback jika tidak ada data
+            feature['properties']['metric'] = 0
+            feature['properties']['cases'] = {}
+            feature['properties']['total_cases'] = 0
+
+    # Calculate bounds from all features for Jawa Timur only
+    all_bounds = []
+    for feature in geojson_data['features']:
+        geom = feature['geometry']
+        if geom['type'] == 'Polygon':
+            for coord in geom['coordinates'][0]:
+                all_bounds.append([coord[1], coord[0]])
+        elif geom['type'] == 'MultiPolygon':
+            for poly in geom['coordinates']:
+                for coord in poly[0]:
+                    all_bounds.append([coord[1], coord[0]])
+    
+    # Get min/max bounds for Jawa Timur
+    if all_bounds:
+        lats = [b[0] for b in all_bounds]
+        lons = [b[1] for b in all_bounds]
+        min_lat, max_lat = min(lats), max(lats)
+        min_lon, max_lon = min(lons), max(lons)
+        
+        # Add small buffer (0.1 degrees)
+        buffer = 0.1
+        bounds = [
+            [min_lat - buffer, min_lon - buffer],  # Southwest
+            [max_lat + buffer, max_lon + buffer]   # Northeast
+        ]
+    else:
+        # Fallback bounds for Jawa Timur
+        bounds = [[-8.8, 111.0], [-6.0, 114.5]]
+
+    # Create Folium map with restricted bounds
+    m = folium.Map(
+        location=[-7.5, 112.5], 
+        zoom_start=9,        # Start zoom level 9 - nyaman lihat seluruh Jatim
+        min_zoom=8,          # Min zoom 8 - bisa lihat peta lebih luas sedikit
+        max_zoom=13,         # Max zoom 13 - cukup untuk detail
+        tiles=None,  # No tiles initially
+        zoom_control=True,   # Tampilkan tombol zoom
+        scrollWheelZoom=False,  # Matikan scroll wheel zoom - hanya pakai tombol
+        prefer_canvas=True,
+        max_bounds=True,
+        min_lat=bounds[0][0],
+        max_lat=bounds[1][0],
+        min_lon=bounds[0][1],
+        max_lon=bounds[1][1]
+    )
+    
+    # Add tiles only for Jawa Timur area using TileLayer with bounds
+    folium.TileLayer(
+        tiles='CartoDB positron',
+        attr='CartoDB',
+        name='Base Map',
+        overlay=False,
+        control=False,
+        bounds=bounds
+    ).add_to(m)
+    
+    # Don't use fit_bounds here - it will override zoom_start
+    # Instead, we set zoom_start=9 above and let JavaScript handle bounds
+
+    # Create choropleth layer
+    choropleth = folium.Choropleth(
+        geo_data=geojson_data,
+        name='Legal Case Heatmap',
+        data={f['properties']['name']: f['properties']['metric'] for f in geojson_data['features']},
+        columns=['name', 'metric'],
+        key_on='feature.properties.name',
+        fill_color='OrRd',
+        fill_opacity=0.8,
+        line_opacity=0.5,
+        line_weight=1.5,
+        legend_name='Number of Cases',
+        highlight=True,
+    ).add_to(m)
+
+    # Add interactive tooltips and popups with click-to-zoom
+    for feature in geojson_data['features']:
+        props = feature['properties']
+        name = props.get('name', 'Unknown')
+        total = props.get('total_cases', props.get('metric', 0))
+        cases = props.get('cases', {})
+        
+        # Get centroid for marker
+        lat = props.get('centroid_lat')
+        lon = props.get('centroid_lon')
+        
+        # Create detailed popup content
+        case_list = '<br>'.join([f'<strong>{k}:</strong> {v} case' for k, v in cases.items() if v > 0])
+        
+        popup_html = f'''
+        <div style="font-family: Arial, sans-serif; width: 280px;">
+            <h3 style="margin: 0 0 10px 0; 
+                       color: #2C5F8D; 
+                       border-bottom: 2px solid #2C5F8D; 
+                       padding-bottom: 5px;">
+                {name}
+            </h3>
+            <div style="margin-bottom: 10px;">
+                <strong style="font-size: 16px; color: #d32f2f;">
+                    Number of Cases: {total}
+                </strong>
+            </div>
+            <div style="margin-top: 10px;">
+                <strong>Detailed Information:</strong><br>
+                <div style="margin-top: 8px; 
+                           font-size: 13px; 
+                           line-height: 1.6;
+                           background: #f5f5f5;
+                           padding: 10px;
+                           border-radius: 5px;">
+                    {case_list if case_list else '<em>No data</em>'}
+                </div>
+            </div>
+            <div style="margin-top: 12px; 
+                       padding-top: 10px; 
+                       border-top: 1px solid #ddd; 
+                       font-size: 11px; 
+                       color: #666;">
+                <em>Click for zoom in</em>
+            </div>
+        </div>
+        '''
+        
+        # Compact tooltip for hover - stays close to cursor
+        tooltip_html = f'''
+        <div style="font-family: Arial, sans-serif; 
+                    padding: 8px 12px;
+                    background: rgba(44, 95, 141, 0.95);
+                    color: white;
+                    border-radius: 5px;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                    font-size: 13px;
+                    white-space: nowrap;
+                    border: 2px solid white;">
+            <strong style="font-size: 14px;">{name}</strong><br>
+            <span style="font-size: 12px;">📊 Total: {total} case</span>
+        </div>
+        '''
+        
+        # Add GeoJson layer with popup for each feature
+        geo_json = folium.GeoJson(
+            feature,
+            name=name,
+            style_function=lambda x: {
+                'fillColor': 'transparent',
+                'color': 'transparent',
+                'weight': 0,
+                'fillOpacity': 0
+            },
+            highlight_function=lambda x: {
+                'fillColor': '#ffeb3b',
+                'color': '#ff5722',
+                'weight': 3,
+                'fillOpacity': 0.7
+            },
+            tooltip=folium.Tooltip(
+                tooltip_html, 
+                sticky=True,  # Tooltip follows cursor closely
+                style="""
+                    background-color: transparent;
+                    border: none;
+                    box-shadow: none;
+                    padding: 0;
+                    margin: 0;
+                """
+            ),
+            popup=folium.Popup(popup_html, max_width=300)
+        )
+        
+        geo_json.add_to(m)
+        
+        # Add click event to zoom to feature bounds
+        if lat and lon:
+            # Calculate bounds from geometry
+            geom = feature['geometry']
+            bounds = []
+            
+            if geom['type'] == 'Polygon':
+                for coord in geom['coordinates'][0]:
+                    bounds.append([coord[1], coord[0]])
+            elif geom['type'] == 'MultiPolygon':
+                for poly in geom['coordinates']:
+                    for coord in poly[0]:
+                        bounds.append([coord[1], coord[0]])
+            
+            if bounds:
+                # Add invisible marker for click-to-zoom functionality
+                marker = folium.Marker(
+                    location=[lat, lon],
+                    icon=folium.DivIcon(html=''),
+                    tooltip=None,
+                    popup=None
+                )
+                
+                # Add JavaScript for zoom on click
+                bounds_str = str(bounds).replace("'", '"')
+                marker_html = f'''
+                <script>
+                    var bounds_{name.replace(" ", "_").replace(".", "")} = {bounds_str};
+                </script>
+                '''
+                m.get_root().html.add_child(folium.Element(marker_html))
+
+    # # Add legend
+    # legend_html = '''
+    # <div style="position: fixed; 
+    #             bottom: 50px; left: 50px; width: 300px; 
+    #             background-color: white; z-index:9999;
+    #             border:2px solid #2C5F8D; border-radius: 8px;
+    #             padding: 15px;
+    #             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    #             font-family: Arial, sans-serif;">
+        
+        
+       
+    # </div>
+    # '''
+    
+    # m.get_root().html.add_child(folium.Element(legend_html))
+
+    # Add custom CSS for better interactivity and sticky tooltip
+    custom_css = '''
+    <style>
+        .leaflet-container {
+            background-color: #e0e0e0 !important;
+            cursor: pointer !important;
+        }
+        /* Tooltip styling - stays very close to cursor */
+        .leaflet-tooltip {
+            background-color: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            pointer-events: none !important;
+        }
+        .leaflet-tooltip-top {
+            margin-top: -5px !important;
+        }
+        .leaflet-tooltip-left {
+            margin-left: -5px !important;
+        }
+        .leaflet-tooltip-right {
+            margin-left: 5px !important;
+        }
+        .leaflet-tooltip-bottom {
+            margin-top: 5px !important;
+        }
+        /* Hide default tooltip pointer */
+        .leaflet-tooltip-top:before,
+        .leaflet-tooltip-bottom:before,
+        .leaflet-tooltip-left:before,
+        .leaflet-tooltip-right:before {
+            display: none !important;
+        }
+        /* Hide tiles outside bounds */
+        .leaflet-tile-container {
+            clip-path: inset(0);
+        }
+        .leaflet-interactive:hover {
+            stroke: #ff5722 !important;
+            stroke-width: 2px !important;
+            stroke-opacity: 1 !important;
+        }
+        .leaflet-popup-content-wrapper {
+            border-radius: 8px !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+        }
+        .leaflet-popup-tip {
+            display: none !important;
+        }
+        /* Add border around Jawa Timur */
+        .leaflet-overlay-pane svg {
+            filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
+        }
+    </style>
+    '''
+    m.get_root().html.add_child(folium.Element(custom_css))
+
+    map_name = m.get_name()
+
+    # Add JavaScript to restrict panning to Jawa Timur bounds
+    restrict_bounds_script = f'''
+    <script>
+        // Restrict map to Jawa Timur bounds only
+        document.addEventListener('DOMContentLoaded', function() {{
+            setTimeout(function() {{
+                // Get the Leaflet map instance
+                var mapElement = window.{map_name};
+                if (mapElement && mapElement._leaflet_id) {{
+                    var map = mapElement;
+                    
+                    // Set max bounds for Jawa Timur
+                    var bounds = L.latLngBounds(
+                        L.latLng({bounds[0][0]}, {bounds[0][1]}),  // Southwest
+                        L.latLng({bounds[1][0]}, {bounds[1][1]})   // Northeast
+                    );
+                    
+                    // Strict bounds - cannot pan outside
+                    //map.setMaxBounds(bounds);
+                    //map.options.maxBoundsViscosity = 0.6; // Make bounds completely rigid
+                    
+                    
+                    // Set zoom constraints directly on map options
+                    map.options.minZoom = 8;
+                    map.options.maxZoom = 13;
+                    
+                    // Remove existing zoom control and add new one with correct limits
+                    if (map.zoomControl) {{
+                        map.removeControl(map.zoomControl);
+                    }}
+                    L.control.zoom({{ position: 'topleft' }}).addTo(map);
+                    
+                    // Enforce zoom limits on all zoom events
+                    map.on('zoom', function() {{
+                        var currentZoom = map.getZoom();
+                        if (currentZoom < 8) {{
+                            map.setZoom(8, {{ animate: false }});
+                            return false;
+                        }} else if (currentZoom > 13) {{
+                            map.setZoom(13, {{ animate: false }});
+                            return false;
+                        }}
+                    }});
+                    
+                    // Also on zoomend to catch any missed events
+                    map.on('zoomend', function() {{
+                        var currentZoom = map.getZoom();
+                        if (currentZoom < 8) {{
+                            map.setZoom(8, {{ animate: false }});
+                        }} else if (currentZoom > 13) {{
+                            map.setZoom(13, {{ animate: false }});
+                        }}
+                        updateZoomControl();
+                    }});
+                    
+                    // Update zoom control state
+                    function updateZoomControl() {{
+                        var zoom = map.getZoom();
+                        var zoomInButton = document.querySelector('.leaflet-control-zoom-in');
+                        var zoomOutButton = document.querySelector('.leaflet-control-zoom-out');
+                        
+                        if (zoomInButton) {{
+                            if (zoom >= 13) {{
+                                zoomInButton.classList.add('leaflet-disabled');
+                                zoomInButton.style.cursor = 'not-allowed';
+                                zoomInButton.style.opacity = '0.4';
+                                zoomInButton.style.pointerEvents = 'none';
+                                zoomInButton.setAttribute('disabled', 'disabled');
+                            }} else {{
+                                zoomInButton.classList.remove('leaflet-disabled');
+                                zoomInButton.style.cursor = 'pointer';
+                                zoomInButton.style.opacity = '1';
+                                zoomInButton.style.pointerEvents = 'auto';
+                                zoomInButton.removeAttribute('disabled');
+                            }}
+                        }}
+                        
+                        if (zoomOutButton) {{
+                            if (zoom <= 8) {{
+                                zoomOutButton.classList.add('leaflet-disabled');
+                                zoomOutButton.style.cursor = 'not-allowed';
+                                zoomOutButton.style.opacity = '0.4';
+                                zoomOutButton.style.pointerEvents = 'none';
+                                zoomOutButton.setAttribute('disabled', 'disabled');
+                            }} else {{
+                                zoomOutButton.classList.remove('leaflet-disabled');
+                                zoomOutButton.style.cursor = 'pointer';
+                                zoomOutButton.style.opacity = '1';
+                                zoomOutButton.style.pointerEvents = 'auto';
+                                zoomOutButton.removeAttribute('disabled');
+                            }}
+                        }}
+                    }}
+                    
+                    // Call on every zoom change
+                    map.on('zoom', updateZoomControl);
+                    map.on('zoomend', updateZoomControl);
+                    updateZoomControl(); // Call immediately
+                    
+                    // Hide tiles outside bounds by clipping
+                    var tileLayer = document.querySelector('.leaflet-tile-pane');
+                    if (tileLayer) {{
+                        // Calculate pixel bounds
+                        var southWest = map.latLngToLayerPoint(bounds.getSouthWest());
+                        var northEast = map.latLngToLayerPoint(bounds.getNorthEast());
+                        
+                        // Create clip path
+                        var clipPath = 'rect(' + 
+                            northEast.y + 'px, ' + 
+                            northEast.x + 'px, ' + 
+                            southWest.y + 'px, ' + 
+                            southWest.x + 'px)';
+                        
+                        // Note: Modern browsers use clip-path instead of clip
+                    }}
+                }}
+                
+                // Add click cursor to paths
+                var paths = document.querySelectorAll('.leaflet-interactive');
+                paths.forEach(function(path) {{
+                    path.style.cursor = 'pointer';
+                }});
+            }}, 1000);
+        }});
+    </script>
+    '''
+    m.get_root().html.add_child(folium.Element(restrict_bounds_script))
+
+    return m._repr_html_()

app/map_py_temp.py

@@ -0,0 +1,225 @@
+import folium
+import json
+import random
+
+
+import folium
+import json
+import os
+import random
+
+def generate_distinct_colors(n):
+    """Generate n distinct bright colors for each district"""
+    # Predefined palette of 38 distinct, vibrant colors
+    colors = [
+        '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
+        '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788',
+        '#E63946', '#06FFA5', '#FFD93D', '#6BCF7F', '#C77DFF',
+        '#FF9F1C', '#2EC4B6', '#E71D36', '#FF499E', '#00B4D8',
+        '#90E0EF', '#F72585', '#7209B7', '#3A0CA3', '#F4A261',
+        '#2A9D8F', '#E76F51', '#264653', '#E9C46A', '#F77F00',
+        '#D62828', '#023047', '#8338EC', '#3DDC84', '#FF006E',
+        '#FFBE0B', '#FB5607', '#8AC926'
+    ]
+    
+    # Shuffle to ensure adjacent regions get different colors
+    random.shuffle(colors)
+    
+    return colors[:n]
+
+def create_map():
+    """Create a Folium map with distinct colors for each kabupaten/kota in Jawa Timur.
+
+    Returns:
+        str: HTML string for embedding the Folium map (safe to render).
+    """
+    # Load GeoJSON data - using complete kabupaten/kota file
+    geojson_path = os.path.join(os.path.dirname(__file__), '..', 'data', 'geojson', 'jatim_kabkota.geojson')
+    
+    with open(geojson_path, encoding='utf-8') as f:
+        geojson_data = json.load(f)
+
+    # Create a Folium map centered on Jawa Timur
+    m = folium.Map(
+        location=[-7.5, 112.5], 
+        zoom_start=8,
+        tiles='CartoDB positron',
+        prefer_canvas=True,
+        zoom_control=True,
+        attributionControl=False
+    )
+
+    # Generate distinct colors for each kabupaten/kota (38 total)
+    num_features = len(geojson_data.get('features', []))
+    colors = generate_distinct_colors(num_features)
+    
+    # Create color mapping with city names
+    color_map = {}
+    city_list = []
+    for idx, feature in enumerate(geojson_data.get('features', [])):
+        feature_name = feature.get('properties', {}).get('name', f'Feature_{idx}')
+        feature_type = feature.get('properties', {}).get('type', 'Kabupaten')
+        color_map[feature_name] = colors[idx]
+        city_list.append({
+            'name': feature_name,
+            'type': feature_type,
+            'color': colors[idx]
+        })
+
+    # Style function - 3D effect with vibrant colors like the reference image
+    def style_function(feature):
+        feature_name = feature['properties'].get('name', 'Unknown')
+        return {
+            'fillColor': color_map.get(feature_name, '#CCCCCC'),
+            'color': '#333333',      # Dark gray border for 3D effect
+            'weight': 2,             # Medium border
+            'fillOpacity': 1.0,      # Completely solid for vibrant colors
+            'opacity': 1,            # Solid border
+            'dashArray': None,       # Solid line
+            'lineJoin': 'miter',     # Sharp corners for clear boundaries
+            'lineCap': 'butt'        # Clean edges
+        }
+
+    # Highlight function for hover
+    def highlight_function(feature):
+        return {
+            'fillColor': '#FFFF00',  # Yellow on hover
+            'color': '#FF0000',      # Red border
+            'weight': 3,
+            'fillOpacity': 0.9,
+        }
+
+    # Add GeoJSON layer with colored regions
+    folium.GeoJson(
+        geojson_data,
+        name='Jawa Timur',
+        style_function=style_function,
+        highlight_function=highlight_function,
+        tooltip=folium.GeoJsonTooltip(
+            fields=['name'],
+            aliases=['Wilayah:'],
+            localize=True,
+            sticky=False,
+            labels=True,
+            style="""
+                background-color: white;
+                border: 2px solid black;
+                border-radius: 5px;
+                font-family: Arial, sans-serif;
+                font-size: 12px;
+                padding: 8px;
+                box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
+            """,
+        )
+    ).add_to(m)
+    
+    # Add text labels on each kabupaten/kota
+    for feature in geojson_data.get('features', []):
+        props = feature.get('properties', {})
+        name = props.get('name', 'Unknown')
+        center_lat = props.get('centroid_lat')
+        center_lon = props.get('centroid_lon')
+        
+        if center_lat and center_lon:
+            # Add label marker with white text and shadow for contrast
+            folium.Marker(
+                location=[center_lat, center_lon],
+                icon=folium.DivIcon(html=f'''
+                    <div style="
+                        font-family: Arial, sans-serif;
+                        font-size: 10px;
+                        color: #FFFFFF;
+                        font-weight: bold;
+                        text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 
+                                     -1px -1px 3px rgba(0,0,0,0.9),
+                                     1px -1px 3px rgba(0,0,0,0.9),
+                                     -1px 1px 3px rgba(0,0,0,0.9);
+                        text-align: center;
+                        white-space: nowrap;
+                    ">{name}</div>
+                ''')
+            ).add_to(m)
+
+    # Add custom CSS for STRONG 3D shadow effect like the reference image
+    custom_css = '''
+    <style>
+        .leaflet-container {
+            background-color: #F5F5F5 !important;  /* Light gray background */
+        }
+        /* STRONG 3D shadow effect - multiple layers for depth */
+        .leaflet-interactive {
+            filter: 
+                drop-shadow(3px 3px 2px rgba(0,0,0,0.3))
+                drop-shadow(6px 6px 4px rgba(0,0,0,0.25))
+                drop-shadow(9px 9px 8px rgba(0,0,0,0.2))
+                drop-shadow(12px 12px 12px rgba(0,0,0,0.15));
+        }
+        /* Clean polygon edges */
+        path.leaflet-interactive {
+            stroke-linejoin: miter !important;
+            stroke-linecap: butt !important;
+        }
+    </style>
+    '''
+    m.get_root().html.add_child(folium.Element(custom_css))
+    
+    # Add legend showing all 38 kabupaten/kota with their unique colors
+    legend_html = '''
+    <div style="position: fixed; 
+                bottom: 20px; left: 20px; width: 280px; max-height: 520px;
+                background-color: white; z-index:9999; font-size:11px;
+                border:2px solid #333; border-radius: 8px;
+                overflow-y: auto;
+                box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
+                font-family: Arial, sans-serif;
+                ">
+        <div style="background-color: #1976D2; color: white; padding: 12px; 
+                    font-weight: bold; text-align: center; font-size: 13px;
+                    border-radius: 6px 6px 0 0;">
+            📍 38 Kabupaten/Kota Jawa Timur
+        </div>
+        <div style="padding: 10px; max-height: 450px; overflow-y: auto;">
+    '''
+    
+    # Sort cities alphabetically and add to legend
+    sorted_cities = sorted(city_list, key=lambda x: x['name'])
+    for idx, city in enumerate(sorted_cities, 1):
+        legend_html += f'''
+            <div style="margin: 3px 0; display: flex; align-items: center;">
+                <div style="width: 20px; height: 20px; background-color: {city['color']}; 
+                            border: 1.5px solid #333; margin-right: 8px; flex-shrink: 0;
+                            border-radius: 3px;
+                            box-shadow: 2px 2px 4px rgba(0,0,0,0.3);"></div>
+                <span style="font-size: 10px; color: #333;">
+                    <b>{idx}.</b> {city['name']} ({city['type']})
+                </span>
+            </div>
+        '''
+    
+    legend_html += '''
+        </div>
+    </div>
+    '''
+    
+    m.get_root().html.add_child(folium.Element(legend_html))
+
+    # Add title
+    title_html = '''
+    <div style="position: fixed; 
+                top: 10px; left: 50%; transform: translateX(-50%);
+                background-color: white; z-index:9999; 
+                padding: 10px 30px;
+                border: 2px solid black;
+                border-radius: 5px;
+                font-family: Arial, sans-serif;
+                font-size: 16px;
+                font-weight: bold;
+                box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
+                ">
+        Peta Jawa Timur - Kabupaten/Kota
+    </div>
+    '''
+    m.get_root().html.add_child(folium.Element(title_html))
+
+    # Return HTML representation
+    return m._repr_html_()

app/routes.py

@@ -0,0 +1,272 @@
+from flask import render_template, jsonify, request
+from app.map_py import create_map
+from app.map_py_heatmap import create_heatmap_interactive
+from app.table_summary import table_summary
+from app.forecast import forecast
+from app import app
+import subprocess
+import sys
+import os
+import pandas as pd
+from collections import Counter
+import warnings
+warnings.filterwarnings("ignore")
+
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+
+@app.route('/map')
+def map_view():
+    """Display interactive heatmap with choropleth (click to see case details)"""
+    # Get filter parameters
+    filter_year = request.args.get('year', 'all')
+    filter_crime = request.args.get('crime', 'all')
+    filter_city = request.args.get('city', 'all')
+    
+    map_html = create_heatmap_interactive(filter_year=filter_year, filter_crime=filter_crime, filter_city=filter_city)
+    return render_template('map.html', map_html=map_html)
+
+
+@app.route('/map-folium')
+def map_folium_view():
+    """Old Folium polygon map (backup)"""
+    map_html = create_map()
+    return render_template('map.html', map_html=map_html)
+
+
+@app.route('/heatmap')
+def heatmap_view():
+    """Display GeoPandas-generated heatmap"""
+    return render_template('heatmap.html')
+
+
+@app.route('/generate-heatmap', methods=['POST'])
+def generate_heatmap():
+    """API endpoint to regenerate heatmap"""
+    try:
+        # Get the project root directory
+        project_root = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+        script_path = os.path.join(project_root, 'scripts', 'generate_heatmap_geopandas.py')
+        
+        # Run the script
+        result = subprocess.run(
+            [sys.executable, script_path],
+            cwd=project_root,
+            capture_output=True,
+            text=True,
+            timeout=60
+        )
+        
+        if result.returncode == 0:
+            return jsonify({
+                'success': True,
+                'message': 'Heatmap generated successfully',
+                'image_url': '/static/img/heatmap_jatim.png'
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'error': result.stderr or 'Unknown error'
+            }), 500
+            
+    except subprocess.TimeoutExpired:
+        return jsonify({
+            'success': False,
+            'error': 'Script timeout (lebih dari 60 detik)'
+        }), 500
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+
+@app.route('/api/statistics')
+def get_statistics():
+    """API endpoint untuk mendapatkan data statistik dari CSV"""
+    # Get filter parameters from query string
+    filter_year = request.args.get('year', 'all')
+    filter_crime = request.args.get('crime', 'all')
+    filter_city = request.args.get('city', 'all')
+    
+    # Load cleaned_data.csv (preferred) or fallback to meta folder
+    cleaned_csv_path = 'cleaned_data.csv'
+    print(os.getcwd())
+    
+    if os.path.exists(cleaned_csv_path):
+        # Use cleaned_data.csv (single file, faster)
+        print(f"Loading data from {cleaned_csv_path}")
+        data = pd.read_csv(cleaned_csv_path, on_bad_lines='skip')
+        data_lower = data.map(lambda x: x.lower().strip() if isinstance(x, str) and x.strip() != "" else x)
+        
+        # Parse year from tahun column
+        if 'tahun' in data_lower.columns:
+            data_lower['tahun_putusan'] = data_lower['tahun'].astype('Int64')
+        
+        # Count unique PNs
+        exist_pn = data_lower['lembaga_peradilan'].nunique()
+    
+    # # Apply filters
+    filtered_data = data_lower.copy()
+    filtered = False
+    
+    # Filter by year
+    if filter_year != 'all':
+        try:
+            year_val = int(filter_year)
+            filtered_data = filtered_data[filtered_data['tahun_putusan'] == year_val]
+            filtered = True
+        except:
+            pass
+    
+    # Filter by crime type
+    if filter_crime != 'all':
+        filtered_data = filtered_data[filtered_data['kata_kunci'] == filter_crime.lower()]
+        filtered = True
+    
+    # Filter by city/kabupaten
+    if filter_city != 'all':
+        filtered_data = filtered_data[
+            filtered_data['lembaga_peradilan'].str.contains(filter_city.lower(), case=False, na=False)
+        ]
+        filtered = True
+
+    city_names = (
+        data_lower['lembaga_peradilan']
+        .str.replace(r'^pn\s+', '', regex=True)
+        .str.strip()
+        .str.title()
+        .unique()        # ambil unik
+    )
+
+    # sort hasil unik
+    city_names = sorted(city_names)
+
+    city_options = [
+        {'value': city.lower(), 'label': city}
+        for city in city_names
+    ]
+
+    # Pastikan kolom tanggal ada
+    if 'tanggal' in data_lower.columns:
+        try:
+            data_lower['tanggal'] = pd.to_datetime(
+                data_lower['tanggal'], errors='coerce'
+            )
+        except:
+            pass
+
+
+    # Extract month
+    data_lower['bulan_putusan'] = data_lower['tanggal'].dt.month
+    data_lower['tahun_putusan'] = data_lower['tanggal'].dt.year
+
+    # hitung jumlah per (tahun, bulan)
+    grouped = (
+        data_lower
+        .groupby(['tahun_putusan', 'bulan_putusan'])
+        .size()
+        .reset_index(name='count')
+    )
+
+    # generate struktur lengkap: setiap tahun punya 12 bulan
+    tahun_list = sorted(grouped['tahun_putusan'].unique())
+
+    forecast_data = []
+
+    for tahun in tahun_list:
+        for bulan in range(1, 12+1):
+            row = grouped[
+                (grouped['tahun_putusan'] == tahun) &
+                (grouped['bulan_putusan'] == bulan)
+            ]
+            
+            jumlah = int(row['count'].iloc[0]) if not row.empty else 0
+
+            forecast_data.append({
+                'tahun': tahun,
+                'bulan': bulan,
+                'count': jumlah
+            })
+
+    forecast_result = forecast(forecast_data)
+
+    if (filtered):
+        data_lower = filtered_data
+
+    #mengambil untuk option dropdown
+    # Crime types + count (sudah OK)
+    all_crimes = data_lower['kata_kunci'].value_counts()
+    crime_types = [
+        {'value': crime, 'label': crime.title(), 'count': int(count)}
+        for crime, count in all_crimes.items()
+    ]
+
+    # Years + count
+    all_years = data_lower['tahun_putusan'].dropna().astype(int).value_counts().sort_index(ascending=False)
+    year_options = [
+        {'value': str(year), 'label': str(year), 'count': int(count)}
+        for year, count in all_years.items()
+    ]
+
+    # ============================================
+    # MONTHLY SEASONALITY DATA (1–12)
+    # ============================================
+    # Pastikan kolom tanggal ada
+    if 'tanggal' in data_lower.columns:
+        try:
+            data_lower['tanggal'] = pd.to_datetime(
+                data_lower['tanggal'], errors='coerce'
+            )
+        except:
+            pass
+
+    # Extract month
+    data_lower['bulan_putusan'] = data_lower['tanggal'].dt.month
+
+    # Monthly count (filtered data)
+    monthly_counts_raw = (
+        data_lower['bulan_putusan']
+        .dropna()
+        .astype(int)
+        .value_counts()
+        .to_dict()
+    )
+
+    # Buat full 1–12 (meskipun 0)
+    monthly_data = [
+        {'month': m, 'count': int(monthly_counts_raw.get(m, 0))}
+        for m in range(1, 13)
+    ]
+
+
+    tabel = table_summary(data_lower)
+
+    # Ganti NaN dengan 0 atau null
+    tabel = tabel.fillna(0)
+
+    # Atau kalau mau null:
+    # tabel = tabel.where(pd.notnull(tabel), None)
+
+    # Pastikan semua keys lowercase tanpa spasi ganda
+    tabel.columns = (
+        tabel.columns
+            .str.strip()
+            .str.replace(" ", "_")
+            .str.lower()
+    )
+
+    return jsonify({
+        'total_cases': len(filtered_data),
+        'total_pn': exist_pn,
+        'seasonal_data': monthly_data,
+        'kasus_percentage': tabel.to_dict(orient="records"),   # <-- ini
+        'crime_types': crime_types,
+        'year_options': year_options,
+        'city_options': city_options,
+        'forecast_result': forecast_result,
+        'filter_active': filter_year != 'all' or filter_crime != 'all' or filter_city != 'all'
+    })

app/static/css/style.css

@@ -0,0 +1,178 @@
+/* Custom CSS styles for the Pemetaan Hukum Jawa Timur application */
+
+/* General styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+/* Header styles */
+.header {
+    background-color: #007bff;
+    color: white;
+    padding: 20px 0;
+}
+
+.header .logo {
+    font-size: 24px;
+    text-align: center;
+}
+
+.nav {
+    text-align: center;
+}
+
+.nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+.nav li {
+    display: inline;
+    margin: 0 15px;
+}
+
+.nav a {
+    color: white;
+    text-decoration: none;
+}
+
+/* Hero section styles */
+.hero {
+    background: url('../images/hero-bg.jpg') no-repeat center center/cover;
+    color: white;
+    padding: 60px 0;
+    text-align: center;
+}
+
+/* Map section styles */
+.map-section {
+    padding: 40px 0;
+    background-color: white;
+}
+
+.map-container {
+    height: 500px;
+    margin-top: 20px;
+}
+
+/* Control panel styles */
+.control-panel {
+    margin-bottom: 20px;
+}
+
+/* Legend styles */
+.legend {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+}
+
+/* Statistics section styles */
+.statistics-section {
+    padding: 40px 0;
+    background-color: #f4f4f4;
+}
+
+.stat-card {
+    background: white;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 10px;
+    text-align: center;
+}
+
+/* Footer styles */
+.footer {
+    background-color: #007bff;
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+}
+
+.footer-section {
+    margin-bottom: 20px;
+}
+
+.social-links {
+    margin-top: 10px;
+}
+
+.social-link {
+    color: white;
+    margin: 0 10px;
+    text-decoration: none;
+}
+
+/* Info panel styles */
+.info-panel {
+    display: none; /* Hidden by default */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border: 1px solid #ddd;
+    z-index: 1000;
+    width: 300px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.info-panel-header {
+    background-color: #007bff;
+    color: white;
+    padding: 10px;
+    text-align: center;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+#kasusTable {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 14px;
+}
+
+#kasusTable th, #kasusTable td {
+    border-bottom: 1px solid #ddd;
+    padding: 6px 8px;
+}
+
+#kasusTable tr:nth-child(even) {
+    background: #f9f9f9;
+}
+
+#kasusTable th {
+    background: #efefef;
+    font-weight: bold;
+    border-bottom: 2px solid #ccc;
+}
+
+.summary-card {
+    background: white;
+    border-radius: 8px;
+    /*border-left: 5px solid #1f77b4;*/
+}
+
+.summary-title {
+    font-size: 14px;
+    color: #555;
+    font-weight: 600;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+}
+
+.summary-value {
+    font-size: 26px;
+    font-weight: 700;
+    color: #1f77b4;
+}

app/static/js/main.js

@@ -0,0 +1,51 @@
+// This file contains custom JavaScript for the application, including any interactivity for the map and handling user inputs.
+
+document.addEventListener('DOMContentLoaded', function() {
+    const categoryFilter = document.getElementById('category-filter');
+    const yearFilter = document.getElementById('year-filter');
+    const crimeFilter = document.getElementById('crime-filter');
+    const resetButton = document.getElementById('reset-filter');
+    const mapContainer = document.getElementById('mapContainer');
+    const infoPanel = document.getElementById('infoPanel');
+    const closeInfoPanel = document.getElementById('closeInfoPanel');
+    const infoPanelBody = document.getElementById('infoPanelBody');
+
+    // Initialize the map
+    let map = L.map(mapContainer).setView([-7.275, 112.641], 8); // Center on Jawa Timur
+
+    // Load and display GeoJSON data
+    fetch('/data/geojson/jatim.geojson')
+        .then(response => response.json())
+        .then(data => {
+            L.geoJSON(data, {
+                onEachFeature: function(feature, layer) {
+                    layer.on('click', function() {
+                        infoPanelBody.innerHTML = `<h4>${feature.properties.name}</h4><p>${feature.properties.info}</p>`;
+                        infoPanel.style.display = 'block';
+                    });
+                }
+            }).addTo(map);
+        });
+
+    // Close info panel
+    closeInfoPanel.addEventListener('click', function() {
+        infoPanel.style.display = 'none';
+    });
+
+    // Filter functionality
+    categoryFilter.addEventListener('change', updateMap);
+    yearFilter.addEventListener('change', updateMap);
+    crimeFilter.addEventListener('change', updateMap);
+
+    resetButton.addEventListener('click', function() {
+        categoryFilter.value = 'all';
+        yearFilter.value = 'all';
+        crimeFilter.value = 'all';
+        updateMap();
+    });
+
+    function updateMap() {
+        // Logic to update the map based on selected filters
+        // This function should filter the GeoJSON data and redraw the map
+    }
+});

app/table_summary.py

@@ -0,0 +1,231 @@
+import pandas as pd
+import matplotlib.pyplot as plt
+import seaborn as sns
+import os
+import csv
+import os.path
+import pandas as pd
+import re
+import numpy as np
+import math
+
+def kategorikan(amar):
+    if amar is None:
+        return None
+    a = amar.lower().strip()
+
+    if ("seumur hidup" in a):
+        return "penjara seumur hidup"
+
+    # 1. Pidana Penjara
+    if ("pidana penjara" in a) or ("kurungan" in a) or ("subsider penjara" in a):
+        return "pidana penjara"
+    
+    # 2. Pidana Denda
+    if ("pidana denda" in a) or ("subsider denda" in a):
+        return "pidana denda"
+
+    # 3. Hukuman Mati
+    if "pidana mati" in a:
+        return "pidana mati"
+
+    # 4. Bebas Dakwaan
+    if ("bebas dari dakwaan" in a) or ("lepas dari tuntutan" in a) \
+        or ("membebaskan" in a and "dakwaan" in a):
+        return "bebas dakwaan"
+
+    # 5. Bebas Bersyarat
+    if ("pidana bersyarat" in a) or ("restorative justice" in a) \
+        or ("dikembalikan kepada orang tua" in a) \
+        or ("pidana tambahan" in a) \
+        or ("lain-lain" in a) or ("lain lain" in a) or ("lain-lain" in a) \
+        or ("penghentian pemeriksaan perkara" in a):
+        return "bebas bersyarat"
+
+    # 6. Terdakwa meninggal → drop (return None)
+    if "meninggal" in a:
+        return None
+
+    # 7. Tidak dikenali → drop
+    return None
+
+# Fungsi ekstraksi lama penjara (bulan)
+def extract_penjara(text):
+    if pd.isna(text):
+        return None
+    # cari tahun
+    tahun = re.search(r'(\d+)\s*\(.*?\)\s*tahun', text, re.IGNORECASE)
+    tahun = int(tahun.group(1)) if tahun else 0
+    # cari bulan
+    bulan = re.search(r'(\d+)\s*\(.*?\)\s*bulan', text, re.IGNORECASE)
+    bulan = int(bulan.group(1)) if bulan else 0
+    return tahun * 12 + bulan  # total bulan
+
+# Fungsi ekstraksi nilai denda
+def extract_denda(text):
+    if pd.isna(text):
+        return None
+    # cari angka setelah "pidana denda sebesar rp"
+    match = re.search(r'pidana denda\s*(sebesar|sejumlah|retribusi+\s+sebesar|restribusi+\s+sebesar)?\s*(?:rp\.?\s*){1,2}([\d.]+)', text, re.IGNORECASE)
+    #print(match)
+    if match:
+        # hapus titik sebagai pemisah ribuan, ubah jadi integer
+        return int(match.group(2).replace('.', ''))
+    return None
+
+# Fungsi utama untuk apply ke DataFrame
+def proses_amar(row):
+    cat = row["kategori_bersih"]  # kolom kategori utama: pidana_penjara / pidana_denda / dll
+    text = row["catatan_amar"]
+
+    if cat == "pidana penjara":
+        return extract_penjara(text), None
+    elif cat == "pidana denda":
+        return None, extract_denda(text)
+    else:
+        # kategori lain → kosong
+        return None, None
+
+def ringkasan(df):
+    # hitung jumlah kasus per tindak pidana
+    total_kasus = len(df)
+    
+    # fungsi bantu untuk menghitung persentase kategori hukuman
+    def pct_cat(subdf, cat):
+        return round(100 * (subdf['kategori_bersih'] == cat).sum() / len(subdf), 3)
+    
+    # agregasi
+    summary = []
+    
+    for tp, group in df.groupby('kata_kunci'):
+        rata_penjara = round(group.loc[group['kategori_bersih']=='pidana penjara', 'lama_penjara'].mean(), 1)
+        rata_denda = round(group.loc[group['kategori_bersih']=='pidana denda', 'banyak_denda'].mean(), 0)
+        
+        pct_penjara = pct_cat(group, 'pidana penjara')
+        pct_seumur = pct_cat(group, 'penjara seumur hidup')
+        pct_denda = pct_cat(group, 'pidana denda')
+        pct_bebas_bersyarat = pct_cat(group, 'bebas bersyarat')
+        pct_bebas_dakwaan = pct_cat(group, 'bebas dakwaan')
+        pct_mati = pct_cat(group, 'pidana mati')
+        
+        pct_kasus = round(100 * len(group) / total_kasus, 3)
+        
+        summary.append({
+            'tindak pidana': tp,
+            'rata-rata penjara': rata_penjara,
+            'rata-rata denda': rata_denda,
+            'penjara': f"{pct_penjara}",
+            'penjara seumur hidup': f"{pct_seumur}",
+            'denda': f"{pct_denda}",
+            'bebas bersyarat': f"{pct_bebas_bersyarat}",
+            'bebas dakwaan': f"{pct_bebas_dakwaan}",
+            'hukuman mati': f"{pct_mati}",
+            'kontribusi kasus': f"{pct_kasus}"
+        })
+    
+    # buat DataFrame
+    tabel_ringkasan = pd.DataFrame(summary)
+    
+    WEIGHTS = {
+        'hukuman mati': 10.0,
+        'penjara seumur hidup': 8.0,
+        'penjara': 5.0,
+        'denda': 1.5,
+        'bebas bersyarat': -1.0,
+        'bebas dakwaan': -2.0
+    }
+    
+    def to_float(x):
+        if x is None:
+            return 0.0
+        try:
+            v = float(str(x).replace('%','').replace(',',''))
+            if math.isnan(v):
+                return 0.0
+            return v
+        except:
+            return 0.0
+    
+    
+    def hitung_score(row):
+    
+        hm = to_float(row['hukuman mati'])
+        sh = to_float(row['penjara seumur hidup'])
+        pj = to_float(row['penjara'])
+        dn = to_float(row['denda'])
+        bb = to_float(row['bebas bersyarat'])
+        bd = to_float(row['bebas dakwaan'])
+    
+        base_score = (
+            hm * WEIGHTS['hukuman mati'] * 1.2 +
+            sh * WEIGHTS['penjara seumur hidup'] * 1.2 +
+            pj * WEIGHTS['penjara'] * 1.0 +
+            dn * WEIGHTS['denda'] * 1.0 +
+            bb * WEIGHTS['bebas bersyarat'] * 2.0 +
+            bd * WEIGHTS['bebas dakwaan'] * 2.0
+        )
+    
+        rata_penjara = to_float(row.get('rata-rata penjara', 0))
+        penjara_boost = rata_penjara * 4
+    
+        rata_denda = to_float(row.get('rata-rata denda', 0))
+        denda_boost = np.log10(rata_denda + 10) * 8 if rata_denda > 0 else 0
+    
+        return base_score + penjara_boost + denda_boost
+    
+    
+    # --- LANGKAH 1: hitung skor sementara tanpa menyimpan ---
+    semua_skor = tabel_ringkasan.apply(hitung_score, axis=1).tolist()
+    
+    # --- LANGKAH 2: hitung threshold otomatis ---
+    p33 = np.percentile(semua_skor, 33)
+    p66 = np.percentile(semua_skor, 66)
+    
+    # --- LANGKAH 3: fungsi final klasifikasi ---
+    def klasifikasi_pidana(row):
+        score = hitung_score(row)   # tidak disimpan
+        #print(f"{row['tindak Pidana']}: score={score:.2f}")
+    
+        if score <= p33:
+            return "light"
+        elif score <= p66:
+            return "moderate"
+        else:
+            return "serious"
+    
+    
+    # --- LANGKAH 4: simpan hanya kategori ---
+    tabel_ringkasan['kategori_pidana'] = tabel_ringkasan.apply(klasifikasi_pidana, axis=1)
+
+    return tabel_ringkasan
+
+def normalize_ringkasan(df):
+    numeric_cols = [
+        "penjara",
+        "penjara seumur hidup",
+        "denda",
+        "bebas bersyarat",
+        "bebas dakwaan",
+        "hukuman mati",
+        "kontribusi kasus"
+    ]
+
+    for col in numeric_cols:
+        df[col] = pd.to_numeric(df[col], errors="coerce").fillna(0)
+
+    return df
+
+def table_summary(df):
+	df["kategori_bersih"] = df["amar_lainnya"].apply(kategorikan)
+
+	# hapus baris yang tidak masuk 5 kategori utama
+	df = df[df["kategori_bersih"].notna()]
+
+	# Terapkan ke DataFrame
+	df["lama_penjara"], df["banyak_denda"] = zip(*df.apply(proses_amar, axis=1))
+
+	tabel = normalize_ringkasan(ringkasan(df))
+
+	return tabel
+
+

app/templates/heatmap.html

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Heatmap GeoPandas - Jawa Timur</title>
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            min-height: 100vh;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .header p {
+            font-size: 1.2em;
+            opacity: 0.9;
+        }
+        
+        .nav-buttons {
+            padding: 20px 30px;
+            background: #f8f9fa;
+            border-bottom: 2px solid #dee2e6;
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.3s ease;
+            font-weight: 600;
+        }
+        
+        .btn-primary {
+            background: #4CAF50;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: #45a049;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
+        }
+        
+        .btn-secondary {
+            background: #2196F3;
+            color: white;
+        }
+        
+        .btn-secondary:hover {
+            background: #0b7dda;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
+        }
+        
+        .btn-info {
+            background: #FF9800;
+            color: white;
+        }
+        
+        .btn-info:hover {
+            background: #e68900;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
+        }
+        
+        .content {
+            padding: 30px;
+        }
+        
+        .info-box {
+            background: #e3f2fd;
+            border-left: 4px solid #2196F3;
+            padding: 15px 20px;
+            margin-bottom: 25px;
+            border-radius: 5px;
+        }
+        
+        .info-box h3 {
+            color: #1976d2;
+            margin-bottom: 10px;
+        }
+        
+        .info-box ul {
+            list-style: none;
+            padding-left: 0;
+        }
+        
+        .info-box li {
+            padding: 5px 0;
+            color: #0d47a1;
+        }
+        
+        .info-box li:before {
+            content: "✓ ";
+            color: #4CAF50;
+            font-weight: bold;
+            margin-right: 5px;
+        }
+        
+        .map-image-container {
+            text-align: center;
+            background: #f5f5f5;
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
+        
+        .map-image {
+            max-width: 100%;
+            height: auto;
+            border: 3px solid #333;
+            border-radius: 8px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        
+        .map-image:hover {
+            transform: scale(1.02);
+        }
+        
+        .caption {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #666;
+            font-style: italic;
+        }
+        
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        .stat-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+        
+        .stat-card h4 {
+            font-size: 14px;
+            opacity: 0.9;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .stat-card .number {
+            font-size: 32px;
+            font-weight: bold;
+        }
+        
+        .footer {
+            background: #263238;
+            color: white;
+            padding: 20px;
+            text-align: center;
+            margin-top: 30px;
+        }
+        
+        /* Modal for fullscreen image */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.9);
+            padding: 20px;
+        }
+        
+        .modal-content {
+            max-width: 95%;
+            max-height: 95%;
+            margin: auto;
+            display: block;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        
+        .close {
+            position: absolute;
+            top: 30px;
+            right: 40px;
+            color: #f1f1f1;
+            font-size: 50px;
+            font-weight: bold;
+            cursor: pointer;
+            z-index: 1001;
+        }
+        
+        .close:hover {
+            color: #ff5252;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🗺️ Geographic Heatmap Jawa Timur</h1>
+            <p>Peta Choropleth 38 Kabupaten/Kota - Dibuat dengan GeoPandas</p>
+        </div>
+        
+        <div class="nav-buttons">
+            <a href="/" class="btn btn-secondary">🏠 Home</a>
+            <a href="/map-folium" class="btn btn-info">🗺️ Peta Folium Interactive</a>
+            <button onclick="location.reload()" class="btn btn-info">🔄 Refresh Heatmap</button>
+            <button onclick="generateNewHeatmap()" class="btn btn-primary">🎨 Generate Ulang</button>
+        </div>
+        
+        <div class="content">
+            <div class="info-box">
+                
+            </div>
+            
+            <div class="stats">
+                <div class="stat-card">
+                    <h4>Total Wilayah</h4>
+                    <div class="number">38</div>
+                </div>
+                <div class="stat-card">
+                    <h4>Provinsi</h4>
+                    <div class="number">Jawa Timur</div>
+                </div>
+                <div class="stat-card">
+                    <h4>Teknologi</h4>
+                    <div class="number">GeoPandas</div>
+                </div>
+            </div>
+            
+            <div class="map-image-container">
+                <img src="{{ url_for('static', filename='img/heatmap_jatim.png') }}" 
+                     alt="Heatmap Jawa Timur" 
+                     class="map-image"
+                     onclick="openModal(this)"
+                     id="heatmapImage">
+                <p class="caption">Klik gambar untuk melihat dalam ukuran penuh</p>
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>&copy; 2025 Pemetaan Hukum Jawa Timur </p>
+        </div>
+    </div>
+    
+    <!-- Modal for fullscreen -->
+    <div id="imageModal" class="modal" onclick="closeModal()">
+        <span class="close">&times;</span>
+        <img class="modal-content" id="modalImage">
+    </div>
+    
+    <script>
+        function openModal(img) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modal.style.display = 'block';
+            modalImg.src = img.src;
+        }
+        
+        function closeModal() {
+            document.getElementById('imageModal').style.display = 'none';
+        }
+        
+        function generateNewHeatmap() {
+            if (confirm('Generate heatmap baru dengan data random? Proses ini memerlukan beberapa detik.')) {
+                // Show loading
+                const img = document.getElementById('heatmapImage');
+                img.style.opacity = '0.5';
+                
+                // Call API to regenerate
+                fetch('/generate-heatmap', {method: 'POST'})
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Reload image with cache busting
+                            img.src = data.image_url + '?t=' + new Date().getTime();
+                            img.style.opacity = '1';
+                            alert('Heatmap berhasil di-generate ulang!');
+                        } else {
+                            alert('Gagal generate heatmap: ' + data.error);
+                            img.style.opacity = '1';
+                        }
+                    })
+                    .catch(error => {
+                        alert('Error: ' + error);
+                        img.style.opacity = '1';
+                    });
+            }
+        }
+        
+        // Keyboard shortcut: ESC to close modal
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                closeModal();
+            }
+        });
+    </script>
+</body>
+</html>

app/templates/index.html

@@ -0,0 +1,978 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>East Java Legal Cases Mapping</title>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+    <!-- Font Awesome untuk icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Chart.js untuk diagram interaktif -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <h1 class="logo">
+                <i class="fas fa-balance-scale"></i>
+                East Java Legal Cases Mapping
+            </h1>
+            <nav class="nav">
+                <ul>
+                    <li><a href="#home" class="nav-link">Home</a></li>
+                    <li><a href="#statistics" class="nav-link">Statistics</a></li>
+                    <li><a href="#about" class="nav-link">About</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main>
+
+        <!-- Search and Map Section -->
+        <section id="home" class="map-section">
+            <div class="container-fluid" style="max-width: 100%; padding: 20px 40px;">
+                <!-- Summary Widgets -->
+                <!-- Pastikan Font Awesome sudah di-include -->
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
+                <div class="summary-container" style="
+                    display: flex;
+                    gap: 20px;
+                    margin-bottom: 30px;
+                    flex-wrap: wrap;
+                ">
+                    <!-- Total Putusan -->
+                    <div class="summary-card" style="
+                        flex: 1 1 200px;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                        text-align: center;
+                    ">
+                        <div class="summary-icon" style="font-size: 24px; color: #2E86AB; margin-bottom: 8px;">
+                            <i class="fas fa-gavel"></i>
+                        </div>
+                        <div class="summary-title" style="font-size: 14px; color: #555;">Total Criminal Verdicts</div>
+                        <div class="summary-value" id="totalPutusan" style="font-size: 24px; font-weight: bold;">0</div>
+                    </div>
+
+                    <!-- Total Pengadilan Negeri -->
+                    <div class="summary-card" style="
+                        flex: 1 1 200px;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                        text-align: center;
+                    ">
+                        <div class="summary-icon" style="font-size: 24px; color: #FF7F0E; margin-bottom: 8px;">
+                            <i class="fas fa-landmark"></i>
+                        </div>
+                        <div class="summary-title" style="font-size: 14px; color: #555;">Total District Courts</div>
+                        <div class="summary-value" id="totalPN" style="font-size: 24px; font-weight: bold;">0</div>
+                    </div>
+                </div>
+
+
+                
+                <!-- Filter Controls -->
+                <div class="filter-panel" style="background: white; 
+                                                  padding: 20px; 
+                                                  border-radius: 10px; 
+                                                  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
+                                                  margin-bottom: 20px;
+                                                  display: flex;
+                                                  gap: 15px;
+                                                  align-items: flex-end;
+                                                  flex-wrap: wrap;">
+                    
+                    <div style="flex: 1; min-width: 200px;">
+                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Categories:</label>
+                        <select id="categoryFilter" style="width: 100%; 
+                                                           padding: 10px 15px; 
+                                                           border: 1px solid #ddd; 
+                                                           border-radius: 5px; 
+                                                           font-size: 14px;">
+                            <option value="all">All Categories</option>
+                            <option value="pidana">Pidana Umum</option>
+                        </select>
+                    </div>
+
+                    <div style="flex: 1; min-width: 200px;">
+                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Years:</label>
+                        <select id="yearFilter" style="width: 100%; 
+                                                       padding: 10px 15px; 
+                                                       border: 1px solid #ddd; 
+                                                       border-radius: 5px; 
+                                                       font-size: 14px;">
+                            <option value="all">All Years</option>
+                            <!-- Will be populated dynamically from API -->
+                        </select>
+                    </div>
+
+                    <div style="flex: 1; min-width: 200px;">
+                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Crime Types:</label>
+                        <select id="crimeFilter" style="width: 100%; 
+                                                        padding: 10px 15px; 
+                                                        border: 1px solid #ddd; 
+                                                        border-radius: 5px; 
+                                                        font-size: 14px;">
+                            <option value="all">All Types</option>
+                            <!-- Will be populated dynamically from API -->
+                        </select>
+                    </div>
+
+                    <div style="flex: 1; min-width: 200px;">
+                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Cities/Regencies:</label>
+                        <select id="cityFilter" style="width: 100%; 
+                                                       padding: 10px 15px; 
+                                                       border: 1px solid #ddd; 
+                                                       border-radius: 5px; 
+                                                       font-size: 14px;">
+                            <option value="all">All Regencies</option>
+                            <!-- Will be populated dynamically from API -->
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Interactive Heatmap with Click-to-Zoom -->
+                <div style="background: white; 
+                            border-radius: 10px; 
+                            overflow: hidden; 
+                            box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                    <div style="background: linear-gradient(135deg, #2C5F8D 0%, #1e3c72 100%);
+                                padding: 15px;
+                                color: white;">
+                        <h3 style="margin: 0; font-size: 18px;">
+                             East Java Legal Cases Interactive Map
+                        </h3>
+                        <p style="margin: 5px 0 0 0; font-size: 13px; opacity: 0.9;">
+                            Hover for more information • Click regency for detailed cases
+                        </p>
+                    </div>
+                    <iframe id="mapIframe" src="{{ url_for('map_view') }}" 
+                            style="width: 100%; 
+                                   height: 650px; 
+                                   border: none;">
+                    </iframe>
+                </div>
+
+                <!-- Charts Section - Diagram Interaktif dan Dinamis -->
+                <div class="charts-row" style="
+                    margin-top: 60px;
+                    display: flex;
+                    gap: 20px;
+                    flex-wrap: wrap;
+                ">
+                    <!-- Chart 1 -->
+                    <div style="
+                        flex: 1;
+                        min-width: 400px;
+                        max-width: 50%;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                    ">
+                        <h3 id="yearHeading" style="margin:0 0 15px 0; font-size:18px;">
+                            Case Trends Per Year
+                        </h3>
+                        <canvas id="casesYearChart" height="120"></canvas>
+                    </div>
+
+                    <!-- Chart 2 -->
+                    <div style="
+                        flex: 1;
+                        min-width: 400px;
+                        max-width: 50%;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                    ">
+                        <h3 id="seasonalityHeading" style="margin:0 0 15px 0; font-size:18px;">
+                            Case Pattern Per Month
+                        </h3>
+                        <canvas id="seasonalityChart"></canvas>
+                    </div>
+
+                    <!-- Chart 3 -->
+                    <div style="
+                        width: 100%;
+                        margin-top: 30px;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                    ">
+                        <h3 id="forecast" style="margin:0 0 15px 0; font-size:18px;">
+                            Case Forecast for Next Year
+                        </h3>
+                        <canvas id="forecastChart" height="120"></canvas>
+                    </div>
+
+                    <!-- Chart 4: Frekuensi 10 Jenis Tindak Pidana -->
+                    <div style="
+                        width: 100%;
+                        margin-top: 30px;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                    ">
+                        <h3 style="margin:0 0 15px 0; font-size:18px;">
+                            10 Highest Types of Crimes
+                        </h3>
+                        <canvas id="crimeTypeChart"></canvas>
+                    </div>
+
+                    <div style="
+                        width: 100%;
+                        margin-top: 20px;
+                        background: white;
+                        padding: 20px;
+                        border-radius: 10px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                    ">
+                        <h3 id="stackedHeading" style="margin-bottom: 15px; font-size: 18px;">
+                            Sentencing Patterns for the 10 Highest Crimes
+                        </h3>
+
+                        <canvas id="stackedPNChart"></canvas>
+                    </div>
+
+                    <table id="kasusTable" class="table table-striped">
+                        <thead>
+                            <tr id="kasusHead"></tr>
+                        </thead>
+                        <tbody id="kasusBody"></tbody>
+                    </table>
+
+                    <div class="pagination-container" style="
+                        display: flex;
+                        gap: 10px;
+                        align-items: center;
+                        justify-content: flex-start;
+                        margin-top: 15px;
+                        flex-wrap: wrap;
+                    ">
+                        <button id="prevKasus" class="btn-pagination">Prev</button>
+                        <span id="kasusPageInfo" style="font-weight: 500; min-width: 80px; text-align: center;"></span>
+                        <button id="nextKasus" class="btn-pagination">Next</button>
+                    </div>
+
+                    <style>
+                    .btn-pagination {
+                        background-color: #2E86AB;
+                        color: white;
+                        border: none;
+                        padding: 6px 14px;
+                        border-radius: 6px;
+                        font-size: 0.9rem;
+                        cursor: pointer;
+                        transition: all 0.2s ease;
+                        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+                    }
+
+                    .btn-pagination:hover {
+                        background-color: #1B4F72;
+                        transform: translateY(-1px);
+                        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+                    }
+
+                    .btn-pagination:disabled {
+                        background-color: #cccccc;
+                        cursor: not-allowed;
+                        box-shadow: none;
+                    }
+                    </style>
+
+
+
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+        </div>
+    </footer>
+
+    <!-- JavaScript for Filter Functionality -->
+    <script>
+
+        // Filter change events
+        // ==================== FILTER FUNCTIONALITY ====================
+        
+        let currentFilters = {
+            year: 'all',
+            crime: 'all',
+            city: 'all'
+        };
+        
+        let allCharts = {}; // Store chart instances
+        let filtersInitialized = false; // Track if event listeners are attached
+        
+        function animateNumber(element, target) {
+            let current = 0;
+            const increment = target / 50;
+            const timer = setInterval(() => {
+                current += increment;
+                if (current >= target) {
+                    element.textContent = target.toLocaleString();
+                    clearInterval(timer);
+                } else {
+                    element.textContent = Math.floor(current).toLocaleString();
+                }
+            }, 20);
+        }
+        
+        function applyFilters() {
+            const year = document.getElementById('yearFilter').value;
+            const crime = document.getElementById('crimeFilter').value;
+            const city = document.getElementById('cityFilter').value;
+            
+            currentFilters.year = year;
+            currentFilters.crime = crime;
+            currentFilters.city = city;
+            
+            // Build query string
+            const params = new URLSearchParams();
+            if (year !== 'all') params.append('year', year);
+            if (crime !== 'all') params.append('crime', crime);
+            if (city !== 'all') params.append('city', city);
+            
+            const queryString = params.toString();
+            const statsUrl = '/api/statistics' + (queryString ? '?' + queryString : '');
+            const mapUrl = '/map' + (queryString ? '?' + queryString : '');
+            
+            // Log for debugging
+            console.log('Applying filters - Year:', year, 'Crime:', crime, 'City:', city);
+            console.log('Stats URL:', statsUrl);
+            console.log('Map URL:', mapUrl);
+            
+            // Reload map with filters
+            const mapIframe = document.getElementById('mapIframe');
+            if (mapIframe) {
+                mapIframe.src = mapUrl;
+                console.log('Map iframe reloaded');
+            }
+            
+            // Reload data with filters
+            loadStatistics(statsUrl);
+        }
+        
+        // ==================== CHART.JS - DIAGRAM INTERAKTIF ====================
+        
+        function loadStatistics(url) {
+            fetch(url)
+                .then(response => response.json())
+                .then(apiData => {
+                console.log('Data dari API:', apiData);
+                
+                // Update statistics section
+                // updateStatistics(apiData);
+
+                if (apiData) {
+                    document.getElementById("totalPutusan").innerText = apiData.total_cases || 0;
+                    document.getElementById("totalPN").innerText = apiData.total_pn || 0;
+                }
+
+                
+                // Populate year filter dropdown if year_options available
+                if (apiData.year_options) {
+                    const yearFilter = document.getElementById('yearFilter');
+                    const prev = currentFilters.year;
+                    yearFilter.innerHTML = '<option value="all">All Years</option>';
+                    apiData.year_options.forEach(year => {
+                        const option = document.createElement('option');
+                        option.value = year.value;
+                        option.textContent = `${year.label} (${year.count.toLocaleString()})`;
+                        yearFilter.appendChild(option);
+                    });
+                    yearFilter.value = prev;
+                }
+                
+                // Populate crime filter dropdown if crime_types available
+                if (apiData.crime_types) {
+                    const crimeFilter = document.getElementById('crimeFilter');
+                    const prev = currentFilters.crime;
+                    crimeFilter.innerHTML = '<option value="all">All Types</option>';
+                    apiData.crime_types.slice(0, 20).forEach(crime => {
+                        const option = document.createElement('option');
+                        option.value = crime.value;
+                        option.textContent = `${crime.label} (${crime.count.toLocaleString()})`;
+                        crimeFilter.appendChild(option);
+                    });
+                    crimeFilter.value = prev;
+                }
+                
+                // Populate city filter dropdown if city_options available
+                if (apiData.city_options && !document.getElementById('cityFilter').dataset.populated) {
+                    const cityFilter = document.getElementById('cityFilter');
+                    apiData.city_options.forEach(city => {
+                        const option = document.createElement('option');
+                        option.value = city.value;
+                        option.textContent = city.label;
+                        cityFilter.appendChild(option);
+                    });
+                    cityFilter.dataset.populated = 'true';
+                }
+                
+                // Initialize event listeners after dropdowns are populated
+                if (!filtersInitialized) {
+                    document.getElementById('yearFilter').addEventListener('change', applyFilters);
+                    document.getElementById('crimeFilter').addEventListener('change', applyFilters);
+                    document.getElementById('cityFilter').addEventListener('change', applyFilters);
+                    // document.getElementById('resetFilter').addEventListener('click', resetFilters);
+                    filtersInitialized = true;
+                    console.log('Filter event listeners initialized');
+                }
+
+                // Clean existing chart instances
+                Object.values(allCharts).forEach(ch => ch.destroy());
+
+                // === TREN KASUS TAHUNAN - LINE CHART INTERAKTIF ===
+                if (apiData.year_options) {
+
+                    const ctx = document.getElementById('casesYearChart').getContext('2d');
+
+                    // Urutkan ascending khusus untuk chart
+                    const sortedYears = apiData.year_options.slice().reverse();
+
+                    const years = sortedYears.map(x => Number(x.value));
+                    const counts = sortedYears.map(x => Number(x.count));
+
+                    const avgCases = counts.reduce((a, b) => a + b, 0) / counts.length;
+
+
+                    // Hapus chart lama
+                    if (allCharts.casesYearChart) allCharts.casesYearChart.destroy();
+
+                    // Hitung perubahan signifikan (>15%)
+                    const annotations = [];
+                    apiData.year_options.forEach((item, i) => {
+                        if (i === 0) return;
+                        const prev = apiData.year_options[i - 1].count;
+                        const change = ((item.count - prev) / prev) * 100;
+
+                        if (Math.abs(change) > 15) {
+                            annotations.push({
+                                type: 'label',
+                                xValue: Number(item.value),
+                                yValue: Number(item.count),
+                                backgroundColor: 'white',
+                                borderColor: '#444',
+                                borderWidth: 1,
+                                padding: 6,
+                                content: `${change > 0 ? '+' : ''}${change.toFixed(0)}%`,
+                                color: change > 0 ? 'green' : 'red',
+                                font: { weight: 'bold' },
+                                yAdjust: -20
+                            });
+                        }
+                    });
+
+                    allCharts.casesYearChart = new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: years,
+                            datasets: [{
+                                label: `Yearly Case Trends (Average ${avgCases.toFixed(0)} Case)`,
+                                data: counts,
+                                borderWidth: 3,
+                                tension: 0.25,
+                                borderColor: '#2E86AB',
+                                pointBackgroundColor: 'white',
+                                pointBorderColor: '#2E86AB',
+                                pointBorderWidth: 2,
+                                pointRadius: 6,
+                                pointHoverRadius: 7
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                legend: { display: false },
+                                tooltip: {
+                                    callbacks: {
+                                        label: function (ctx) {
+                                            const index = ctx.dataIndex;
+                                            const current = ctx.raw;
+
+                                            if (index === 0) {
+                                                return `${current.toLocaleString()} case (first year)`;
+                                            }
+
+                                            const prev = ctx.chart.data.datasets[0].data[index - 1];
+                                            const change = ((current - prev) / prev) * 100;
+                                            const sign = change >= 0 ? '+' : '';
+
+                                            return `${current.toLocaleString()} case (${sign}${change.toFixed(1)}%)`;
+                                        }
+                                    }
+                                },
+                                annotation: {
+                                    annotations: annotations
+                                }
+                            },
+                            scales: {
+                                x: {
+                                    ticks: { autoSkip: false }
+                                },
+                                y: {
+                                    beginAtZero: false,
+                                    grid: { color: 'rgba(0,0,0,0.1)' }
+                                }
+                            }
+                        }
+                    });
+
+                    document.getElementById('yearHeading').textContent =
+                        allCharts.casesYearChart.data.datasets[0].label;
+                }
+
+                if (apiData.seasonal_data) {
+
+                    const ctx = document.getElementById('seasonalityChart').getContext('2d');
+
+                    // Nama bulan
+                    const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+                    // Pastikan full 12 bulan tetap ada
+                    const fullData = Array.from({ length: 12 }, (_, i) => {
+                        const entry = apiData.seasonal_data.find(x => Number(x.month) === i + 1);
+                        return entry ? Number(entry.count) : 0;
+                    });
+
+                    const months = Array.from({ length: 12 }, (_, i) => i + 1);
+
+                    // Highest & lowest bulan dengan kasus > 0
+                    const filtered = fullData.filter(x => x > 0);
+                    const maxVal = Math.max(...filtered);
+                    const minVal = Math.min(...filtered);
+
+                    const maxMonth = fullData.indexOf(maxVal) + 1;
+                    const minMonth = fullData.indexOf(minVal) + 1;
+
+                    // Persentase perubahan bulan-ke-bulan
+                    const percentChanges = fullData.map((count, i) => {
+                        if (i === 0) return null;
+                        const prev = fullData[i - 1];
+                        return prev > 0 ? ((count - prev) / prev) * 100 : null;
+                    });
+
+                    // Rata-rata kasus per bulan
+                    const avgCases = fullData.reduce((a, b) => a + b, 0) / fullData.length;
+
+                    // Hapus chart lama
+                    if (allCharts.seasonalityChart) allCharts.seasonalityChart.destroy();
+
+                    allCharts.seasonalityChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: monthNames,
+                            datasets: [{
+                                label: `Monthly Cases (Average ${avgCases.toFixed(0)} Case)`,
+                                data: fullData,
+                                borderWidth: 2,
+                                backgroundColor: fullData.map((v, i) =>
+                                    (i + 1 === maxMonth) ? '#E57373' : 
+                                    (i + 1 === minMonth) ? '#81C784' : 
+                                    '#B0C4DE'
+                                ),
+                                borderColor: fullData.map((v, i) =>
+                                    (i + 1 === maxMonth) ? '#B71C1C' :
+                                    (i + 1 === minMonth) ? '#1B5E20' :
+                                    '#1E3A5F'
+                                )
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                legend: { display: false },
+                                tooltip: {
+                                    callbacks: {
+                                        label: ctx => {
+                                            const monthIdx = ctx.dataIndex;
+                                            const raw = ctx.raw.toLocaleString();
+
+                                            const pct = percentChanges[monthIdx];
+                                            if (pct === null) return ` ${raw} kasus`;
+
+                                            const sign = pct > 0 ? '+' : '';
+                                            return ` ${raw} case (${sign}${pct.toFixed(1)}%)`;
+                                        }
+                                    }
+                                }
+                            },
+                            scales: {
+                                y: {
+                                    beginAtZero: true,
+                                    grid: { color: 'rgba(0,0,0,0.1)' }
+                                }
+                            }
+                        }
+                    });
+
+                    document.getElementById('seasonalityHeading').textContent =
+                        allCharts.seasonalityChart.data.datasets[0].label;
+                }
+
+                // === CHART FORECAST: TREND HISTORIS + PREDIKSI ===
+                if (apiData.forecast_result) {
+
+                    const history = apiData.forecast_result.history || [];
+                    const future = apiData.forecast_result.forecast || [];
+
+                    // Jika tidak ada data, hentikan
+                    if (history.length === 0 && future.length === 0) {
+                        console.warn("Forecast data empty");
+                        return;
+                    }
+
+                    const allLabels = [
+                        ...history.map(r => r.date),
+                        ...future.map(r => r.date)
+                    ];
+
+                    const historyValues = history.map(r => r.count);
+
+                    // Forecast dimulai setelah historis → sisipkan null di awal
+                    const forecastValues = [
+                        ...Array(history.length).fill(null),
+                        ...future.map(r => r.forecast)
+                    ];
+
+                    const ctxForecast = document.getElementById('forecastChart').getContext('2d');
+
+                    if (allCharts.forecastChart) allCharts.forecastChart.destroy();
+
+                    allCharts.forecastChart = new Chart(ctxForecast, {
+                        type: 'line',
+                        data: {
+                            labels: allLabels,
+                            datasets: [
+                                {
+                                    label: "Historical Data",
+                                    data: historyValues,
+                                    borderWidth: 2,
+                                    tension: 0.3
+                                },
+                                {
+                                    label: "Forecast",
+                                    data: forecastValues,
+                                    borderWidth: 2,
+                                    borderDash: [6, 4],
+                                    tension: 0.3
+                                }
+                            ]
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                legend: {
+                                    position: 'top'
+                                },
+                                tooltip: {
+                                    callbacks: {
+                                        label: ctx => {
+                                            const val = ctx.raw;
+                                            if (val === null) return null;
+                                            return `${ctx.dataset.label}: ${val.toLocaleString()}`;
+                                        }
+                                    }
+                                }
+                            },
+                            scales: {
+                                x: {
+                                    ticks: {
+                                        autoSkip: true,
+                                        maxTicksLimit: 12
+                                    }
+                                },
+                                y: {
+                                    beginAtZero: true
+                                }
+                            }
+                        }
+                    });
+
+                    // Untuk debugging
+                    document.getElementById('forecastChart').textContent =
+                        allCharts.forecastChart.data.datasets[0].label;
+                }
+
+
+                // === CHART 3: FREKUENSI 10 JENIS TINDAK PIDANA TERTINGGI ===
+                if (apiData.crime_types) {
+
+                    // Ambil urutan berdasarkan count
+                    const sortedCrimeTypes = apiData.crime_types
+                        .sort((a, b) => b.count - a.count)
+                        .slice(0, 10); // ambil 10 teratas
+
+                    const labels = sortedCrimeTypes.map(x => x.label);
+                    const values = sortedCrimeTypes.map(x => x.count);
+
+                    const ctx3 = document.getElementById('crimeTypeChart').getContext('2d');
+
+                    if (allCharts.crimeTypeChart) allCharts.crimeTypeChart.destroy();
+
+                    allCharts.crimeTypeChart = new Chart(ctx3, {
+                        type: 'bar',
+                        data: {
+                            labels: labels,
+                            datasets: [{
+                                label: 'Total Cases',
+                                data: values,
+                                borderWidth: 1
+                            }]
+                        },
+                        options: {
+                            indexAxis: 'y', // horizontal bar
+                            responsive: true,
+                            plugins: {
+                                legend: { display: false },
+                                tooltip: {
+                                    callbacks: {
+                                        label: ctx => ctx.raw.toLocaleString()
+                                    }
+                                }
+                            },
+                            scales: {
+                                x: {
+                                    beginAtZero: true,
+                                    ticks: {
+                                        callback: value => value.toLocaleString()
+                                    }
+                                }
+                            }
+                        }
+                    });
+
+                    document.getElementById('crimeTypeChart').textContent =
+                        allCharts.crimeTypeChart.data.datasets[0].label;
+                }
+
+                if (apiData.kasus_percentage) {
+
+                    const ctx = document.getElementById('stackedPNChart').getContext('2d');
+
+                    // Ambil 10 teratas berdasarkan kontribusi_kasus
+                    const top10 = apiData.kasus_percentage
+                        .slice()
+                        .sort((a, b) => Number(b.kontribusi_kasus) - Number(a.kontribusi_kasus))
+                        .slice(0, 10);
+
+                    const crimeLabels = top10.map(r => r.tindak_pidana);
+
+                    // Kolom persentase yang tersedia
+                    const percentageKeys = [
+                        "penjara",
+                        "penjara_seumur_hidup",
+                        "denda",
+                        "bebas_bersyarat",
+                        "bebas_dakwaan",
+                        "hukuman_mati",
+                    ].filter(k => top10[0].hasOwnProperty(k));
+
+                    const colors = [
+                        '#E57373', // soft red (selaras dengan max background)
+                        '#81C784', // soft green (selaras dengan min background)
+                        '#64B5F6', // soft light blue
+                        '#FFB74D', // soft orange
+                        '#BA68C8', // soft purple
+                        '#4DB6AC', // soft teal
+                        '#B0C4DE', // soft steel-blue (warna default kamu)
+                    ];
+
+                    const kasusColumnLabels = {
+                        "bebas_bersyarat": "Conditional Release",
+                        "bebas_dakwaan": "Acquittal",
+                        "denda": "Fine",
+                        "hukuman_mati": "Death Penalty",
+                        "penjara": "Imprisonment",
+                        "penjara_seumur_hidup": "Life Imprisonment",
+                    };
+
+                    const datasets = percentageKeys.map((key, idx) => ({
+                        label: kasusColumnLabels[key] || key.replace(/_/g, ' ').toUpperCase(),
+                        data: top10.map(r => Number(r[key]) || 0),
+                        backgroundColor: colors[idx],
+                        borderWidth: 1
+                    }));
+
+
+                    if (allCharts.stackedPNChart) allCharts.stackedPNChart.destroy();
+
+                    allCharts.stackedPNChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: crimeLabels,
+                            datasets: datasets
+                        },
+                        options: {
+                            indexAxis: 'y',
+                            responsive: true,
+                            scales: {
+                                x: {
+                                    stacked: true,
+                                    max: 100,
+                                    ticks: {
+                                        callback: v => v + "%"
+                                    }
+                                },
+                                y: {
+                                    stacked: true
+                                }
+                            },
+                            plugins: {
+                                legend: { position: 'right' },
+                                tooltip: {
+                                    callbacks: {
+                                        label: ctx => {
+                                            const raw = ctx.raw ?? 0;
+                                            if (raw <= 0) return null;
+                                            return `${ctx.dataset.label}: ${raw.toFixed(3)}%`;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+
+                kasusDataFull = apiData.kasus_percentage.slice();
+                kasusPage = 0;
+                renderKasusTablePage();
+
+                // Animasi saat scroll ke diagram
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            entry.target.style.opacity = '1';
+                            entry.target.style.transform = 'translateY(0)';
+                        }
+                    });
+                }, { threshold: 0.1 });
+
+                document.querySelectorAll('canvas').forEach(canvas => {
+                    canvas.parentElement.style.opacity = '0';
+                    canvas.parentElement.style.transform = 'translateY(30px)';
+                    canvas.parentElement.style.transition = 'all 0.6s ease-out';
+                    observer.observe(canvas.parentElement);
+                });
+            })
+            .catch(error => {
+                console.error('Error loading statistics:', error);
+                alert('Failed to load statistic data. Please refresh the page.');
+            });
+        }
+
+        
+        function renderKasusTablePage() {
+            const head = document.getElementById("kasusHead");
+            const body = document.getElementById("kasusBody");
+            const pageInfo = document.getElementById("kasusPageInfo");
+
+            body.innerHTML = "";
+
+            const sorted = kasusDataFull
+                .slice()
+                .sort((a, b) => Number(b.kontribusi_kasus) - Number(a.kontribusi_kasus));
+
+            const start = kasusPage * kasusPerPage;
+            const end   = start + kasusPerPage;
+
+            const pageData = sorted.slice(start, end);
+
+            if (pageData.length === 0) return;
+
+            // Mapping kolom → label tampilan
+            const kasusColumnLabels = {
+                "bebas_bersyarat": "Conditional Release (%)",
+                "bebas_dakwaan": "Acquittal (%)",
+                "denda": "Fine (%)",
+                "hukuman_mati": "Death Penalty (%)",
+                "kategori_pidana": "Category",
+                "kontribusi_kasus": "Case Contribution (%)",
+                "penjara": "Imprisonment (%)",
+                "penjara_seumur_hidup": "Life Imprisonment (%)",
+                "rata-rata_denda": "Average Fine (Rupiah)",
+                "rata-rata_penjara": "Average Imprisonment (Months)",
+                "penjara_seumur_hidup": "Life Imprisonment (%)",
+                "tindak_pidana": "Crime Action"
+            };
+
+
+            // === HEADER ===
+            head.innerHTML = "";
+            Object.keys(pageData[0]).forEach(col => {
+                const label = kasusColumnLabels[col] || col;
+                head.innerHTML += `<th>${label}</th>`;
+            });
+
+            // === BODY ===
+            pageData.forEach(row => {
+                let rowHTML = "<tr>";
+                Object.keys(row).forEach(col => {
+                    let val = row[col];
+
+                    if (typeof val === "number" && !Number.isInteger(val)) {
+                        val = val.toFixed(3);
+                    }
+
+                    if (val === null || val === undefined || val === "") {
+                        val = "-";
+                    }
+
+                    rowHTML += `<td>${val}</td>`;
+                });
+                rowHTML += "</tr>";
+                body.innerHTML += rowHTML;
+            });
+
+            const totalPages = Math.ceil(kasusDataFull.length / kasusPerPage);
+            pageInfo.innerText = `Page ${kasusPage + 1} / ${totalPages}`;
+        }
+
+
+        // Buttons
+        document.getElementById("prevKasus").onclick = function () {
+            if (kasusPage > 0) {
+                kasusPage--;
+                renderKasusTablePage();
+            }
+        };
+        document.getElementById("nextKasus").onclick = function () {
+            const totalPages = Math.ceil(kasusDataFull.length / kasusPerPage);
+            if (kasusPage < totalPages - 1) {
+                kasusPage++;
+                renderKasusTablePage();
+            }
+        };
+
+
+        
+        // ================= GLOBAL PAGINATION STATE =================
+        let kasusPage = 0;
+        const kasusPerPage = 10;
+        let kasusDataFull = [];
+
+        // Load statistics on page load
+        loadStatistics('/api/statistics');
+    </script>
+</body>
+</html>

app/templates/map.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Peta Polygon Jawa Timur - 38 Kabupaten/Kota</title>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+    <style>
+        /* Override styles for full map display */
+        .map-container {
+            border: 2px solid #333;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+        .map-container iframe {
+            width: 100%;
+            height: 700px;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+
+    <main>
+        <section id="map" class="map-section">
+            <div class="container" style="max-width: 100%; padding: 20px;">
+                <div id="mapContainer" class="map-container" style="width: 100%; height: 700px; margin-top: 20px;">
+                    <!-- Server-side generated Folium map with vibrant colors -->
+                    {{ map_html|safe }}
+                </div>
+            </div>
+        </section>
+    </main>
+
+</body>
+</html>

cleaned_data.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:674384dfb6097ae4c6f2b5edc2649964328fe3067a52b09433095302e8259a37
+size 33198579

data/geojson/Kab_Kota SHP.7z.001

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c0be61f0d037fa5c9047e666c25bd546404f9a7c11306b145935a5d6f7e58e9
+size 47185920

data/geojson/TASWIL5000020230907KABKOTA.xml

@@ -0,0 +1,344 @@
+<MD_Metadata xmlns="http://www.isotc211.org/2005/gmd" xmlns:gco="http://www.isotc211.org/2005/gco" xmlns:gts="http://www.isotc211.org/2005/gts" xmlns:srv="http://www.isotc211.org/2005/srv" xmlns:gml="http://www.opengis.net/gml/3.2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <fileIdentifier>
+    <gco:CharacterString>TASWIL5000020230907KABKOTA</gco:CharacterString>
+  </fileIdentifier>
+  <language>
+    <LanguageCode codeList="http://www.loc.gov/standards/iso639-2/php/code_list.php" codeListValue="ind" codeSpace="ISO639-2">ind</LanguageCode>
+  </language>
+  <characterSet>
+    <MD_CharacterSetCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_CharacterSetCode" codeListValue="utf8" codeSpace="ISOTC211/19115">utf8</MD_CharacterSetCode>
+  </characterSet>
+  <hierarchyLevel>
+    <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="dataset" codeSpace="ISOTC211/19115">dataset</MD_ScopeCode>
+  </hierarchyLevel>
+  <hierarchyLevelName>
+    <gco:CharacterString>dataset</gco:CharacterString>
+  </hierarchyLevelName>
+  <contact>
+    <CI_ResponsibleParty>
+      <individualName>
+        <gco:CharacterString>Astrit Rimayanti</gco:CharacterString>
+      </individualName>
+      <organisationName>
+        <gco:CharacterString>Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+      </organisationName>
+      <positionName>
+        <gco:CharacterString>Kepala Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+      </positionName>
+      <role>
+        <CI_RoleCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_RoleCode" codeListValue="author" codeSpace="ISOTC211/19115">author</CI_RoleCode>
+      </role>
+    </CI_ResponsibleParty>
+  </contact>
+  <dateStamp>
+    <gco:Date>2023-09-07</gco:Date>
+  </dateStamp>
+  <metadataStandardName>
+    <gco:CharacterString>ISO 19139 Geographic Information - Metadata - Implementation Specification</gco:CharacterString>
+  </metadataStandardName>
+  <metadataStandardVersion>
+    <gco:CharacterString>2007</gco:CharacterString>
+  </metadataStandardVersion>
+  <spatialRepresentationInfo>
+    <MD_VectorSpatialRepresentation>
+      <topologyLevel>
+        <MD_TopologyLevelCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_TopologyLevelCode" codeListValue="geometryOnly" codeSpace="ISOTC211/19115">geometryOnly</MD_TopologyLevelCode>
+      </topologyLevel>
+      <geometricObjects>
+        <MD_GeometricObjects>
+          <geometricObjectType>
+            <MD_GeometricObjectTypeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_GeometricObjectTypeCode" codeListValue="composite" codeSpace="ISOTC211/19115">composite</MD_GeometricObjectTypeCode>
+          </geometricObjectType>
+          <geometricObjectCount>
+            <gco:Integer>548</gco:Integer>
+          </geometricObjectCount>
+        </MD_GeometricObjects>
+      </geometricObjects>
+    </MD_VectorSpatialRepresentation>
+  </spatialRepresentationInfo>
+  <referenceSystemInfo>
+    <MD_ReferenceSystem>
+      <referenceSystemIdentifier>
+        <RS_Identifier>
+          <code>
+            <gco:CharacterString>EPSG 4326</gco:CharacterString>
+          </code>
+          <codeSpace>
+            <gco:CharacterString>EPSG</gco:CharacterString>
+          </codeSpace>
+          <version>
+            <gco:CharacterString>6.14(3.0.1)</gco:CharacterString>
+          </version>
+        </RS_Identifier>
+      </referenceSystemIdentifier>
+    </MD_ReferenceSystem>
+  </referenceSystemInfo>
+  <identificationInfo>
+    <MD_DataIdentification>
+      <citation>
+        <CI_Citation>
+          <title>
+            <gco:CharacterString>ADMINSITRASI_AR_KABKOTA</gco:CharacterString>
+          </title>
+          <date>
+            <CI_Date>
+              <date>
+                <gco:Date>2023-09-07</gco:Date>
+              </date>
+              <dateType>
+                <CI_DateTypeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_DateTypeCode" codeListValue="revision" codeSpace="ISOTC211/19115">revision</CI_DateTypeCode>
+              </dateType>
+            </CI_Date>
+          </date>
+          <edition>
+            <gco:CharacterString>Edisi Tahun 2023</gco:CharacterString>
+          </edition>
+          <editionDate>
+            <gco:Date>2023-09-07</gco:Date>
+          </editionDate>
+          <citedResponsibleParty>
+            <CI_ResponsibleParty>
+              <individualName>
+                <gco:CharacterString>Astrit Rimayanti</gco:CharacterString>
+              </individualName>
+              <organisationName>
+                <gco:CharacterString>Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+              </organisationName>
+              <positionName>
+                <gco:CharacterString>Kepala Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+              </positionName>
+              <role>
+                <CI_RoleCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_RoleCode" codeListValue="resourceProvider" codeSpace="ISOTC211/19115">resourceProvider</CI_RoleCode>
+              </role>
+            </CI_ResponsibleParty>
+          </citedResponsibleParty>
+          <presentationForm>
+            <CI_PresentationFormCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_PresentationFormCode" codeListValue="mapDigital" codeSpace="ISOTC211/19115">mapDigital</CI_PresentationFormCode>
+          </presentationForm>
+        </CI_Citation>
+      </citation>
+      <abstract>
+        <gco:CharacterString>Geodatabase data batas wilayah administrasi kabupaten/kota edisi September 2023 (merupakan pemutakhiran dari geodatabase batas wilayah administrasi kabupaten/kota bulan Desember tahun 2022. Proses pemutakhiran yang dilakukan antara lain pemutakhiran segmen batas daerah hasil kesepakatan dan yang telah ditetapkan melalui Permendagri, penyesuaian alokasi wilayah administrasi di wilayah Papua, penyesuaian alokasi pulau dan wilayah terapung.Sumber data yang digunakan untuk fitur area batas wilayah administrasi antara lain:(1) Data batas wilayah provinsi dan kabupaten/kota yang belum ditegaskan dari data peta Rupabumi Indonesia skala 1:25.000 dan 1:50.000; (2) Data batas wilayah administrasi kabupaten/kota yang belum ditegaskan hasil kegiatan ajudikasi batas kabupaten/kota tahun 2013 dan 2014; (3) Data batas daerah hasil kesepakatan yang bersumber dari data digital Kemendagri edisi April 2023 untuk wilayah Sumatera, Kalimantan, Jawa, Bali Nusa Tenggara, Maluku, dan Papua; (4) Data batas daerah yang telah ditetapkan dalam Peraturan Menteri Dalam Negeri.Sumber data yang digunakan untuk fitur wilayah administrasi antara lain: (1) Unsur batas wilayah administrasi kabupaten/kota (ADMINISTRASI_LN); (2) IGD Garis Pantai dari Pusat Pemetaan Kelautan dan Lingkungan Pantai edisi Tahun 2022, yang merupakan pemutakhiran garis pantai penetapan tahun 2021; (3) Data batas negara edisi Agustus 2018. Data ini masih terdapat kesalahan topologi pada fitur ADMINISTRASI_LN yang disebabkan oleh garis batas wilayah yang telah ditetapkan dalam Permendagri masih ada yang saling berpotongan dan ujung batasnya masih menggantung atau belum terhubung dengan ujung batas lainnya.</gco:CharacterString>
+      </abstract>
+      <pointOfContact>
+        <CI_ResponsibleParty>
+          <individualName>
+            <gco:CharacterString>Astrit Rimayanti</gco:CharacterString>
+          </individualName>
+          <organisationName>
+            <gco:CharacterString>Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+          </organisationName>
+          <positionName>
+            <gco:CharacterString>Kepala Pusat Pemetaan Batas Wilayah</gco:CharacterString>
+          </positionName>
+          <role>
+            <CI_RoleCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_RoleCode" codeListValue="resourceProvider" codeSpace="ISOTC211/19115">resourceProvider</CI_RoleCode>
+          </role>
+        </CI_ResponsibleParty>
+      </pointOfContact>
+      <resourceMaintenance>
+        <MD_MaintenanceInformation>
+          <maintenanceAndUpdateFrequency>
+            <MD_MaintenanceFrequencyCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_MaintenanceFrequencyCode" codeListValue="annually" codeSpace="ISOTC211/19115">annually</MD_MaintenanceFrequencyCode>
+          </maintenanceAndUpdateFrequency>
+          <updateScope>
+            <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="attribute" codeSpace="ISOTC211/19115">attribute</MD_ScopeCode>
+          </updateScope>
+          <updateScope>
+            <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="feature" codeSpace="ISOTC211/19115">feature</MD_ScopeCode>
+          </updateScope>
+        </MD_MaintenanceInformation>
+      </resourceMaintenance>
+      <descriptiveKeywords>
+        <MD_Keywords>
+          <keyword>
+            <gco:CharacterString>Wilayah Administrasi Kabupaten/Kota Indonesia</gco:CharacterString>
+          </keyword>
+        </MD_Keywords>
+      </descriptiveKeywords>
+      <descriptiveKeywords>
+        <MD_Keywords>
+          <keyword>
+            <gco:CharacterString>Downloadable Data</gco:CharacterString>
+          </keyword>
+          <thesaurusName uuidref="723f6998-058e-11dc-8314-0800200c9a66" />
+        </MD_Keywords>
+      </descriptiveKeywords>
+      <resourceConstraints>
+        <MD_Constraints>
+          <useLimitation>
+            <gco:CharacterString>Data batas yang berstatus indikatif tidak dapat dijadikan referensi hukum.</gco:CharacterString>
+          </useLimitation>
+        </MD_Constraints>
+      </resourceConstraints>
+      <spatialRepresentationType>
+        <MD_SpatialRepresentationTypeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_SpatialRepresentationTypeCode" codeListValue="vector" codeSpace="ISOTC211/19115">vector</MD_SpatialRepresentationTypeCode>
+      </spatialRepresentationType>
+      <spatialResolution>
+        <MD_Resolution>
+          <equivalentScale>
+            <MD_RepresentativeFraction>
+              <denominator>
+                <gco:Integer>50000</gco:Integer>
+              </denominator>
+            </MD_RepresentativeFraction>
+          </equivalentScale>
+        </MD_Resolution>
+      </spatialResolution>
+      <language>
+        <LanguageCode codeList="http://www.loc.gov/standards/iso639-2/php/code_list.php" codeListValue="ind" codeSpace="ISO639-2">ind</LanguageCode>
+      </language>
+      <characterSet>
+        <MD_CharacterSetCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_CharacterSetCode" codeListValue="utf8" codeSpace="ISOTC211/19115">utf8</MD_CharacterSetCode>
+      </characterSet>
+      <topicCategory>
+        <MD_TopicCategoryCode>boundaries</MD_TopicCategoryCode>
+      </topicCategory>
+      <environmentDescription>
+        <gco:CharacterString> Version 6.2 (Build 9200) ; Esri ArcGIS 10.8.1.14362</gco:CharacterString>
+      </environmentDescription>
+      <extent>
+        <EX_Extent>
+          <geographicElement>
+            <EX_GeographicBoundingBox>
+              <extentTypeCode>
+                <gco:Boolean>true</gco:Boolean>
+              </extentTypeCode>
+              <westBoundLongitude>
+                <gco:Decimal>94.971911</gco:Decimal>
+              </westBoundLongitude>
+              <eastBoundLongitude>
+                <gco:Decimal>141.020042</gco:Decimal>
+              </eastBoundLongitude>
+              <southBoundLatitude>
+                <gco:Decimal>-11.007615</gco:Decimal>
+              </southBoundLatitude>
+              <northBoundLatitude>
+                <gco:Decimal>6.076832</gco:Decimal>
+              </northBoundLatitude>
+            </EX_GeographicBoundingBox>
+          </geographicElement>
+          <verticalElement>
+            <EX_VerticalExtent>
+              <minimumValue>
+                <gco:Real>0</gco:Real>
+              </minimumValue>
+              <maximumValue>
+                <gco:Real>0</gco:Real>
+              </maximumValue>
+              <verticalCRS gco:nilReason="other:see_referenceSystemInfo" />
+            </EX_VerticalExtent>
+          </verticalElement>
+        </EX_Extent>
+      </extent>
+    </MD_DataIdentification>
+  </identificationInfo>
+  <contentInfo>
+    <MD_FeatureCatalogueDescription>
+      <complianceCode>
+        <gco:Boolean>true</gco:Boolean>
+      </complianceCode>
+      <language>
+        <LanguageCode codeList="http://www.loc.gov/standards/iso639-2/php/code_list.php" codeListValue="ind" codeSpace="ISO639-2">ind</LanguageCode>
+      </language>
+      <includedWithDataset>
+        <gco:Boolean>true</gco:Boolean>
+      </includedWithDataset>
+      <featureCatalogueCitation>
+        <CI_Citation>
+          <title>
+            <gco:CharacterString>Batas Wilayah Administrasi Kabupaten/Kota Indonesia</gco:CharacterString>
+          </title>
+          <date>
+            <CI_Date>
+              <date>
+                <gco:Date>2023-09-07</gco:Date>
+              </date>
+              <dateType>
+                <CI_DateTypeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#CI_DateTypeCode" codeListValue="revision" codeSpace="ISOTC211/19115">revision</CI_DateTypeCode>
+              </dateType>
+            </CI_Date>
+          </date>
+          <edition>
+            <gco:CharacterString>Edisi Tahun 2023</gco:CharacterString>
+          </edition>
+          <editionDate>
+            <gco:Date>2023-09-07</gco:Date>
+          </editionDate>
+        </CI_Citation>
+      </featureCatalogueCitation>
+    </MD_FeatureCatalogueDescription>
+  </contentInfo>
+  <distributionInfo>
+    <MD_Distribution>
+      <distributionFormat>
+        <MD_Format>
+          <name>
+            <gco:CharacterString>File Geodatabase Feature Class</gco:CharacterString>
+          </name>
+          <version>
+            <gco:CharacterString>1</gco:CharacterString>
+          </version>
+        </MD_Format>
+      </distributionFormat>
+    </MD_Distribution>
+  </distributionInfo>
+  <dataQualityInfo>
+    <DQ_DataQuality>
+      <scope>
+        <DQ_Scope>
+          <level>
+            <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="dataset" codeSpace="ISOTC211/19115">dataset</MD_ScopeCode>
+          </level>
+        </DQ_Scope>
+      </scope>
+      <lineage>
+        <LI_Lineage>
+          <statement>
+            <gco:CharacterString>Data ini merupakan kompilasi batas wilayah administrasi kabupaten/kota dari berbagai sumber data.</gco:CharacterString>
+          </statement>
+          <processStep>
+            <LI_ProcessStep>
+              <description>
+                <gco:CharacterString>Geodatabase data batas wilayah administrasi kabupaten/kota edisi September 2023 merupakan pemutakhiran geodatabase batas wilayah administrasi kabupaten/kota edisi Desember tahun 2022. Proses pemutakhiran yang dilakukan antara lain pembaharuan data batas daerah yang telah ditetapkan dalam Peraturan Menteri Dalam Negeri hingga tahun 2022, hasil kesepakatan hingga April 2023, dan pemutakhiran garis pantai edisi tahun 2022, penyesuaian alokasi wilayah administrasi pulau dan wilayah terapung.</gco:CharacterString>
+              </description>
+            </LI_ProcessStep>
+          </processStep>
+          <source>
+            <LI_Source>
+              <description>
+                <gco:CharacterString>Sumber data yang digunakan untuk fitur garis batas wilayah administrasi antara lain:(1) Data batas wilayah provinsi dan kabupaten/kota yang belum ditegaskan dari data peta Rupabumi Indonesia skala 1:25.000 dan 1:50.000; (2) Data batas wilayah administrasi kabupaten/kota yang belum ditegaskan hasil kegiatan ajudikasi batas kabupaten/kota tahun 2013 dan 2014; (3) Data batas daerah hasil kesepakatan yang bersumber dari data digital Kemendagri edisi April 2023 untuk wilayah Sumatera, Kalimantan, Jawa, Bali Nusa Tenggara, Maluku, dan Papua; (4) Data batas daerah yang telah ditetapkan dalam Peraturan Menteri Dalam Negeri.
+
+Sumber data yang digunakan untuk fitur wilayah administrasi antara lain: (1) Unsur batas wilayah administrasi kabupaten/kota (ADMINISTRASI_LN); (2) IGD Garis Pantai dari Pusat Pemetaan Kelautan dan Lingkungan Pantai edisi Tahun 2022, yang merupakan pemutakhiran garis pantai penetapan tahun 2021; (3) Data batas negara edisi Agustus 2018.
+
+Sumber data untuk alokasi wilayah administrasi pulau antara lain: - Kepmendagri 100.1.1-6117 tahun 2022 tentang Pemberian dan Pemutakhiran Kode, Data Wilayah Administrasi Pemerintahan dan Pulau Tahun 2022.</gco:CharacterString>
+              </description>
+            </LI_Source>
+          </source>
+        </LI_Lineage>
+      </lineage>
+    </DQ_DataQuality>
+  </dataQualityInfo>
+  <applicationSchemaInfo>
+    <MD_ApplicationSchemaInformation>
+      <name gco:nilReason="missing" />
+      <schemaLanguage>
+        <gco:CharacterString>xml</gco:CharacterString>
+      </schemaLanguage>
+      <constraintLanguage gco:nilReason="missing" />
+    </MD_ApplicationSchemaInformation>
+  </applicationSchemaInfo>
+  <metadataMaintenance>
+    <MD_MaintenanceInformation>
+      <maintenanceAndUpdateFrequency>
+        <MD_MaintenanceFrequencyCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_MaintenanceFrequencyCode" codeListValue="annually" codeSpace="ISOTC211/19115">annually</MD_MaintenanceFrequencyCode>
+      </maintenanceAndUpdateFrequency>
+      <updateScope>
+        <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="attribute" codeSpace="ISOTC211/19115">attribute</MD_ScopeCode>
+      </updateScope>
+      <updateScope>
+        <MD_ScopeCode codeList="http://www.isotc211.org/2005/resources/Codelist/gmxCodelists.xml#MD_ScopeCode" codeListValue="feature" codeSpace="ISOTC211/19115">feature</MD_ScopeCode>
+      </updateScope>
+    </MD_MaintenanceInformation>
+  </metadataMaintenance>
+</MD_Metadata>

data/geojson/jatim.geojson

@@ -0,0 +1,45 @@
+c:\Users\Fedi Arta\Downloads\TASWIL5000020230907KABKOTA.xml{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Kota Surabaya",
+        "population": 3000000,
+        "area": 350.7
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [112.6401, -7.2756],
+            [112.6401, -7.2500],
+            [112.6500, -7.2500],
+            [112.6500, -7.2756],
+            [112.6401, -7.2756]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Kota Malang",
+        "population": 900000,
+        "area": 147.5
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [112.6200, -7.9790],
+            [112.6200, -7.9500],
+            [112.6400, -7.9500],
+            [112.6400, -7.9790],
+            [112.6200, -7.9790]
+          ]
+        ]
+      }
+    }
+  ]
+}

requirements.txt

@@ -0,0 +1,12 @@
+Flask
+folium
+geopandas
+pandas
+numpy
+contextily
+matplotlib
+pyproj
+shapely
+requests
+pmdarima
+statsmodels

run.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5555)

scripts/generate_heatmap_geopandas.py

@@ -0,0 +1,152 @@
+#!/usr/bin/env python3
+"""Generate a choropleth heatmap for Jawa Timur kabupaten/kota using GeoPandas.
+
+This script:
+- loads `data/geojson/jatim_kabkota.geojson` (expects a `properties.name` field),
+- optionally merges a CSV of metrics (by `name`),
+- creates a choropleth PNG saved to `app/static/img/heatmap_jatim.png`,
+- writes an augmented GeoJSON to `app/static/geojson/jatim_kabkota_metric.geojson`.
+
+Run: python scripts/generate_heatmap_geopandas.py [--metrics data/metrics.csv]
+"""
+from __future__ import annotations
+
+import argparse
+import os
+import sys
+import random
+
+import geopandas as gpd
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+
+try:
+    import contextily as ctx
+except Exception:
+    ctx = None
+
+try:
+    import matplotlib.patheffects as pe
+except Exception:
+    pe = None
+
+
+def load_geodata(path: str) -> gpd.GeoDataFrame:
+    gdf = gpd.read_file(path)
+    if gdf.crs is None:
+        # most GeoJSONs are in WGS84
+        gdf = gdf.set_crs(epsg=4326, allow_override=True)
+    return gdf
+
+
+def prepare_metric(gdf: gpd.GeoDataFrame, metrics_csv: str | None) -> gpd.GeoDataFrame:
+    gdf = gdf.copy()
+    if metrics_csv and os.path.exists(metrics_csv):
+        dfm = pd.read_csv(metrics_csv)
+        # assume merge key is 'name'
+        if 'name' not in dfm.columns:
+            raise ValueError('metrics CSV must contain a `name` column to join on')
+        gdf = gdf.merge(dfm, on='name', how='left')
+        if 'metric' not in gdf.columns:
+            # user may have different metric column; try to pick the first numeric
+            numeric_cols = dfm.select_dtypes('number').columns.tolist()
+            if numeric_cols:
+                gdf['metric'] = gdf[numeric_cols[0]]
+            else:
+                raise ValueError('metrics CSV provided but no numeric column found to use as metric')
+    else:
+        # fallback: create a reproducible random metric for demonstration
+        random.seed(42)
+        gdf['metric'] = np.random.randint(5, 100, size=len(gdf))
+    # fill missing with 0
+    gdf['metric'] = gdf['metric'].fillna(0).astype(float)
+    return gdf
+
+
+def plot_heatmap(gdf: gpd.GeoDataFrame, out_png: str, out_geojson: str, cmap: str = 'OrRd') -> None:
+    # project to web mercator for basemap / correct area calculations
+    gdf_web = gdf.to_crs(epsg=3857)
+
+    fig, ax = plt.subplots(1, 1, figsize=(12, 12))
+
+    # plot choropleth
+    gdf_web.plot(
+        column='metric',
+        cmap=cmap,
+        linewidth=0.5,
+        edgecolor='white',
+        ax=ax,
+        legend=True,
+        legend_kwds={'shrink': 0.6},
+    )
+
+    # add labels at centroids
+    for idx, row in gdf_web.iterrows():
+        try:
+            cent = row['geometry'].centroid
+            x, y = cent.x, cent.y
+            name = row.get('name') or row.get('NAME') or ''
+            short = str(name).replace('Kab. ', '').replace('Kota ', '')
+            if short:
+                txt = ax.text(
+                    x, y, short,
+                    fontsize=8, ha='center', va='center', color='white'
+                )
+                if pe is not None:
+                    txt.set_path_effects([pe.Stroke(linewidth=2, foreground='black'), pe.Normal()])
+        except Exception:
+            # some geometries may be empty; skip
+            continue
+
+    # add basemap if contextily is available
+    if ctx is not None:
+        try:
+            ctx.add_basemap(ax, source=ctx.providers.CartoDB.Positron)
+        except Exception:
+            # fallback: ignore basemap if provider errors
+            pass
+
+    ax.set_axis_off()
+    ax.set_title('Heatmap: Jawa Timur - Kabupaten/Kota', fontsize=16)
+
+    # ensure output directory exists
+    os.makedirs(os.path.dirname(out_png), exist_ok=True)
+    fig.savefig(out_png, dpi=150, bbox_inches='tight')
+    plt.close(fig)
+
+    # write augmented geojson (keep original CRS WGS84 for web use)
+    try:
+        gdf.to_file(out_geojson, driver='GeoJSON')
+    except Exception as e:
+        print('Warning: failed to write GeoJSON:', e, file=sys.stderr)
+
+
+def main(argv=None):
+    parser = argparse.ArgumentParser()
+    parser.add_argument('--geojson', default=os.path.join('data', 'geojson', 'jatim_kabkota.geojson'))
+    parser.add_argument('--metrics', default=None, help='optional CSV with columns `name` and a numeric metric')
+    parser.add_argument('--out-png', default=os.path.join('app', 'static', 'img', 'heatmap_jatim.png'))
+    parser.add_argument('--out-geojson', default=os.path.join('app', 'static', 'geojson', 'jatim_kabkota_metric.geojson'))
+    parser.add_argument('--cmap', default='OrRd')
+    args = parser.parse_args(argv)
+
+    if not os.path.exists(args.geojson):
+        print('GeoJSON not found at', args.geojson, file=sys.stderr)
+        sys.exit(2)
+
+    gdf = load_geodata(args.geojson)
+    gdf = prepare_metric(gdf, args.metrics)
+
+    # ensure static folders exist
+    os.makedirs(os.path.dirname(args.out_geojson), exist_ok=True)
+    os.makedirs(os.path.dirname(args.out_png), exist_ok=True)
+
+    plot_heatmap(gdf, args.out_png, args.out_geojson, cmap=args.cmap)
+
+    print('Heatmap image written to:', args.out_png)
+    print('Augmented GeoJSON written to:', args.out_geojson)
+
+
+if __name__ == '__main__':
+    main()

scripts/generate_map.py

@@ -0,0 +1,30 @@
+import folium
+import json
+import os
+
+def generate_map(geojson_file, output_file):
+    # Load GeoJSON data
+    with open(geojson_file) as f:
+        geojson_data = json.load(f)
+
+    # Create a base map
+    m = folium.Map(location=[-7.5, 112.5], zoom_start=7)
+
+    # Add GeoJSON overlay
+    folium.GeoJson(
+        geojson_data,
+        name='geojson',
+        tooltip=folium.GeoJsonTooltip(fields=['name'], aliases=['Region:'])
+    ).add_to(m)
+
+    # Add layer control
+    folium.LayerControl().add_to(m)
+
+    # Save the map to an HTML file
+    m.save(output_file)
+    print(f'Map has been generated and saved to {output_file}')
+
+if __name__ == '__main__':
+    geojson_path = os.path.join('data', 'geojson', 'jatim.geojson')
+    output_path = os.path.join('app', 'templates', 'map.html')
+    generate_map(geojson_path, output_path)

test_api.py

@@ -0,0 +1,23 @@
+from app.routes import app
+
+with app.test_client() as client:
+    print('Testing /api/statistics...')
+    response = client.get('/api/statistics')
+    print(f'Status Code: {response.status_code}')
+    
+    if response.status_code != 200:
+        print(f'Error Response:')
+        print(response.get_data(as_text=True)[:1000])
+    else:
+        data = response.get_json()
+        print(f'\n✅ API SUCCESS!')
+        print(f'Total Cases: {data.get("total_cases", 0)}')
+        print(f'Total PN: {data.get("total_pn", 0)}')
+        print(f'City Options: {len(data.get("city_options", []))}')
+        print(f'Year Options: {len(data.get("year_options", []))}')
+        print(f'Crime Types: {len(data.get("crime_types", []))}')
+        
+        if data.get("city_options"):
+            print(f'\nFirst 5 Cities:')
+            for city in data["city_options"][:5]:
+                print(f'  - {city["label"]}')