dashboard

michielkallenberg · michielkallenberg · commit a38161964556 · 2026-07-07T22:22:11.000+02:00
diff --git a/cybench/runs/viz/dashboard_template.html b/cybench/runs/viz/dashboard_template.html
@@ -190,10 +190,15 @@
     .region-map-wrap { width: 100%; overflow: hidden; min-height: 280px; }
     .region-map-wrap svg { display: block; width: 100%; height: auto; }
     .region-map-wrap .region {
-      stroke: #fff;
-      stroke-width: 0.6px;
+      stroke: #000;
+      stroke-width: 0.2px;
       transition: fill 0.12s;
     }
+    .region-map-wrap .world-country {
+      fill: #d3d3d3;
+      stroke: #000;
+      stroke-width: 0.15px;
+    }
     .region-map-legend {
       display: flex;
       flex-wrap: wrap;
@@ -210,7 +215,7 @@
       height: 10px;
       border-radius: 3px;
       border: 1px solid var(--border);
-      background: linear-gradient(to right, #440154, #31688e, #35b779, #fde725);
+      background: linear-gradient(to right, #f7fbff, #c6dbef, #6baed6, #2171b5, #08306b);
     }
     .map-year-controls {
       display: flex;
@@ -345,22 +350,43 @@ <h3>Drill-down plots</h3>
     let mapYearSelection = MAP_YEAR_MEAN;
     let mapFeaturesCache = null;
     let mapFeaturesCacheCountry = null;
+    let mapWorldFeaturesCache = null;
 
     const HAS_DYNAMIC_MAPS = Boolean(
       MAP_DATA && MAP_DATA.datasets && Object.keys(MAP_DATA.datasets).length
         && MAP_DATA.geojson_by_country && Object.keys(MAP_DATA.geojson_by_country).length
     );
     const geoCache = new Map();
+    const worldGeoCache = { href: null, features: null };
     const REGION_MAP_WIDTH = 520;
     const REGION_MAP_HEIGHT = 420;
     const REGION_MAP_MARGIN = 10;
-    const REGION_FILL_MISSING = "#f0f0f0";
+    const REGION_FILL_MISSING = "#d3d3d3";
 
     function fmtMap(v, digits = 2) {
       if (v === null || v === undefined || Number.isNaN(v)) return "—";
       return Number(v).toFixed(digits);
     }
 
+    async function loadWorldGeojson() {
+      const href = MAP_DATA.world_geojson_href;
+      if (!href) return null;
+      if (worldGeoCache.href === href && worldGeoCache.features) {
+        return worldGeoCache.features;
+      }
+      try {
+        const geo = await d3.json(href);
+        if (!geo || !geo.features) return null;
+        const features = geo.features.map(f => rewindFeatureForSvg({ ...f }));
+        worldGeoCache.href = href;
+        worldGeoCache.features = features;
+        return features;
+      } catch (err) {
+        console.warn("World GeoJSON load failed:", href, err);
+        return null;
+      }
+    }
+
     async function loadCountryGeojson(country) {
       if (geoCache.has(country)) return geoCache.get(country);
       const href = (MAP_DATA.geojson_by_country || {})[country];
@@ -422,22 +448,17 @@ <h3>Drill-down plots</h3>
       };
     }
 
-    function featuresForDataset(features, ...valueMaps) {
-      const locs = new Set();
-      for (const m of valueMaps) {
-        if (!m) continue;
-        Object.keys(m).forEach(k => locs.add(k));
-      }
-      if (!locs.size) return features || [];
-      return (features || []).filter(f => locs.has(f.properties.loc));
+    function regionsWithData(features, valueByLoc) {
+      if (!features || !valueByLoc) return [];
+      return features.filter(f => valueByLoc[f.properties.loc] != null);
     }
 
     function yieldColor(value, extent) {
       if (value == null || !extent) return REGION_FILL_MISSING;
       const [lo, hi] = extent;
-      if (hi <= lo) return d3.interpolateViridis(0.5);
+      if (hi <= lo) return d3.interpolateBlues(0.55);
       const t = Math.max(0, Math.min(1, (value - lo) / (hi - lo)));
-      return d3.interpolateViridis(t);
+      return d3.interpolateBlues(0.15 + t * 0.85);
     }
 
     function sharedYieldExtent(actualMap, predMap) {
@@ -464,18 +485,22 @@ <h3>Drill-down plots</h3>
 
     function renderRegionChoropleth(
       container,
-      features,
+      regionFeatures,
       valueByLoc,
       extent,
       title,
+      worldFeatures,
     ) {
       container.innerHTML = "";
-      if (!features || !features.length) {
+      if (!regionFeatures || !regionFeatures.length) {
         container.innerHTML = `<p class="muted">${title}: no map geometry.</p>`;
         return;
       }
-      let fitFeatures = featuresForProjectionFit(features);
-      if (!fitFeatures.length) fitFeatures = features;
+      const dataFeatures = regionsWithData(regionFeatures, valueByLoc);
+      let fitFeatures = featuresForProjectionFit(
+        dataFeatures.length ? dataFeatures : regionFeatures,
+      );
+      if (!fitFeatures.length) fitFeatures = regionFeatures;
       const svg = d3.select(container).append("svg")
         .attr("viewBox", `0 0 ${REGION_MAP_WIDTH} ${REGION_MAP_HEIGHT}`)
         .attr("role", "img")
@@ -492,8 +517,15 @@ <h3>Drill-down plots</h3>
         .attr("width", REGION_MAP_WIDTH)
         .attr("height", REGION_MAP_HEIGHT)
         .attr("fill", "#f8f9fa");
+      if (worldFeatures && worldFeatures.length) {
+        svg.selectAll("path.world-country")
+          .data(worldFeatures)
+          .join("path")
+          .attr("class", "world-country")
+          .attr("d", path);
+      }
       svg.selectAll("path.region")
-        .data(features)
+        .data(regionFeatures)
         .join("path")
         .attr("class", "region")
         .attr("d", path)
@@ -502,15 +534,15 @@ <h3>Drill-down plots</h3>
           const v = valueByLoc ? valueByLoc[loc] : null;
           return yieldColor(v, extent);
         })
-        .attr("stroke", "#fff")
-        .attr("stroke-width", 0.5)
         .selectAll("title")
         .data(d => [d])
         .join("title")
         .text(d => {
           const loc = d.properties.loc;
           const v = valueByLoc ? valueByLoc[loc] : null;
-          return v == null ? loc : `${loc}: ${fmtMap(v)}`;
+          return v == null
+            ? `${loc}: outside benchmark`
+            : `${loc}: ${fmtMap(v)}`;
         });
     }
 
@@ -571,8 +603,10 @@ <h3>Drill-down plots</h3>
       const slice = (MAP_DATA.datasets || {})[dataset];
       if (!slice || !mapFeaturesCache) return false;
       const { actual, pred } = mapValuesForSelection(slice, model, yearKey);
-      const features = featuresForDataset(mapFeaturesCache, actual, pred);
-      if (!features.length) return false;
+      if (!regionsWithData(mapFeaturesCache, actual).length
+          && !regionsWithData(mapFeaturesCache, pred).length) {
+        return false;
+      }
       const extent = pooledMapExtent(slice, model);
       const yearSuffix = yearKey === MAP_YEAR_MEAN ? "mean yield" : yearKey;
       if (mapCaptionLeftDyn) {
@@ -583,17 +617,19 @@ <h3>Drill-down plots</h3>
       }
       renderRegionChoropleth(
         regionMapActual,
-        features,
+        mapFeaturesCache,
         actual,
         extent,
         `Ground truth (${yearSuffix})`,
+        mapWorldFeaturesCache,
       );
       renderRegionChoropleth(
         regionMapPred,
-        features,
+        mapFeaturesCache,
         pred,
         extent,
         `Model prediction (${model}, ${yearSuffix})`,
+        mapWorldFeaturesCache,
       );
       if (extent) {
         const label = `${fmtMap(extent[0])} → ${fmtMap(extent[1])}`;
@@ -610,7 +646,10 @@ <h3>Drill-down plots</h3>
       setupMapYearSlider(slice);
       if (mapFeaturesCacheCountry !== country) {
         mapFeaturesCache = await loadCountryGeojson(country);
+        mapWorldFeaturesCache = await loadWorldGeojson();
         mapFeaturesCacheCountry = country;
+      } else if (!mapWorldFeaturesCache) {
+        mapWorldFeaturesCache = await loadWorldGeojson();
       }
       if (!mapFeaturesCache) return false;
       return renderDynamicMapLayers(dataset, model, mapYearSelection);
diff --git a/cybench/runs/viz/region_map_lib.py b/cybench/runs/viz/region_map_lib.py
@@ -46,14 +46,70 @@ def prepare_geometry_for_geojson(geometry: BaseGeometry | None) -> BaseGeometry
     return geometry
 
 
+def export_country_border_geojson(
+    country_code: str,
+    dest: Path,
+    *,
+    scale: str = "50",
+    simplify: float = 0.02,
+) -> Path | None:
+    """Write simplified admin-0 country outline (Natural Earth, default 50m like map PNGs)."""
+    try:
+        from cybench.util.geo import get_country_border_gdf
+    except ImportError:
+        return None
+
+    country = country_code.upper()
+    try:
+        gdf = get_country_border_gdf(country, scale=scale)
+    except (FileNotFoundError, OSError, ValueError):
+        return None
+
+    slim = gdf[["geometry"]].copy()
+    slim["geometry"] = slim.geometry.simplify(simplify, preserve_topology=True)
+    if slim.empty:
+        return None
+    dest.parent.mkdir(parents=True, exist_ok=True)
+    slim.to_file(dest, driver="GeoJSON")
+    return dest
+
+
+def export_world_context_geojson(
+    dest: Path,
+    *,
+    simplify: float = 0.04,
+) -> Path | None:
+    """Simplified global admin-0 backdrop (50m Natural Earth, same source as map PNGs)."""
+    try:
+        import geopandas as gpd
+
+        from cybench.util.geo import world_shape_path, _explode_metropolitan_map_units, _normalize_world_iso
+    except ImportError:
+        return None
+
+    try:
+        world = gpd.read_file(world_shape_path("50")).to_crs(4326)
+    except (FileNotFoundError, OSError, ValueError):
+        return None
+
+    keep = _explode_metropolitan_map_units(_normalize_world_iso(world))
+    keep = keep[["ISO_A2", "geometry"]].copy()
+    keep["geometry"] = keep.geometry.simplify(simplify, preserve_topology=True)
+    if keep.empty:
+        return None
+    dest.parent.mkdir(parents=True, exist_ok=True)
+    keep.to_file(dest, driver="GeoJSON")
+    return dest
+
+
 def export_region_geojson(
     country_code: str,
     dest: Path,
     *,
-    simplify: float = 0.01,
+    simplify: float = 0.005,
     locations: set[str] | frozenset[str] | None = None,
 ) -> Path | None:
-    """Write simplified admin-region GeoJSON for benchmark locations in one country."""
+    """Write simplified admin-region GeoJSON (all units unless ``locations`` is set)."""
     try:
         from cybench.util.geo import get_shapes_from_polygons
     except ImportError:
@@ -243,13 +299,13 @@ def build_region_map_payload(
 
     return {
         "geojson_by_country": {cc: "" for cc in sorted(countries_needed)},
+        "world_geojson_href": "",
         "yield_ranges": CROP_YIELD_RANGES,
         "datasets": datasets,
         "note": (
-            "Maps default to multi-year regional means; use the year slider for single years. "
-            "Map extent covers benchmark regions only. "
-            "Colors autoscale to pooled actual+pred across all years. "
-            "Geometry is simplified admin boundaries from cybench/data/polygons."
+            "Maps mimic matplotlib PNGs: 50m Natural Earth backdrop, all admin units, "
+            "Blues choropleth on benchmark regions. Use the year slider for single years. "
+            "Colors autoscale to pooled actual+pred across all years."
         ),
     }
 
@@ -267,21 +323,21 @@ def bundle_region_map_assets(
     assets_dir = Path(output_dir) / assets_dirname
     assets_dir.mkdir(parents=True, exist_ok=True)
     geojson_by_country: dict[str, str] = {}
-    locs_by_country = benchmark_locs_by_country(map_payload)
+
+    world_dest = assets_dir / "world_countries.geojson"
+    world_exported = export_world_context_geojson(world_dest)
+    world_href = f"{assets_dirname}/{world_dest.name}" if world_exported else ""
 
     for country in map_payload.get("geojson_by_country", {}):
         dest = assets_dir / f"regions_{country}.geojson"
-        exported = export_region_geojson(
-            country,
-            dest,
-            locations=locs_by_country.get(country),
-        )
+        exported = export_region_geojson(country, dest)
         if exported is not None:
             geojson_by_country[country] = f"{assets_dirname}/{dest.name}"
 
     return {
         **map_payload,
         "geojson_by_country": geojson_by_country,
+        "world_geojson_href": world_href,
     }
 
 def write_region_map_sidecar(
diff --git a/tests/runs/test_region_map_lib.py b/tests/runs/test_region_map_lib.py
