Upload 2 files

depth_interactive_map_alpha.R

@@ -54,6 +54,29 @@ source("helpers.R")
 
 `%||%` <- function(x, y) if (is.null(x) || length(x) == 0) y else x
 
+# --- Plot fonts -----------------------------------------------------------------
+# ggplot text (treemaps, temporal strip, mini-charts) uses the Rights Lab brand
+# font when showtext + sysfonts are available in the image; otherwise it falls
+# back to the device sans (never Inter). Guarded so a missing package or an
+# offline Google fetch can never break the app at startup.
+PLOT_FONT <- "sans"
+if (requireNamespace("showtext", quietly = TRUE) &&
+    requireNamespace("sysfonts", quietly = TRUE)) {
+  font_ok <- tryCatch({
+    sysfonts::font_add_google("Source Sans 3", "depth_sans")
+    TRUE
+  }, error = function(e) {
+    message("[fonts] Google font fetch failed; using system sans: ",
+            conditionMessage(e))
+    FALSE
+  })
+  if (isTRUE(font_ok)) {
+    PLOT_FONT <- "depth_sans"
+    showtext::showtext_auto()
+    showtext::showtext_opts(dpi = 110)
+  }
+}
+
 # Deployment edit (v10_HF): DuckDB path from env var, baked into the image.
 DB_PATH <- Sys.getenv("DEPTH_DDB_PATH", "/app/depth_mexico.duckdb")
 
@@ -1297,14 +1320,14 @@ WEB_SPEC <- list(
     subtitle = "Summary of main indicators for migrants across Mexico.",
     groups = list(
       list(id = "hazards", label = "Hazards", open = TRUE, cards = list(
-        list(title = "Missing Migrants Incidents (IOM)", kind = "stat",
+        list(title = "Deaths during migration", kind = "stat",
              stats = list(
                list(id = "n_incidents",  label = "Recorded incidents", color = COL_YEL),
                list(id = "n_fatalities", label = "Confirmed dead",     color = COL_RED)
              ),
              charts = list(
                list(id = "migrants_treemap_cause", label = "Cause of death",
-                    height = "70px"),
+                    height = "60px"),
                list(id = "migrants_treemap_demo",  label = "Demographics (children / female / male)",
                     height = "44px")
              )),
@@ -1670,10 +1693,12 @@ LUCIDE_JS <- tags$head(
     };
 
     // Format a ym integer back to year-dash-month (e.g. 2014-03) for the label.
+    var _MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug',
+                   'Sep','Oct','Nov','Dec'];
     function _ymFmt(v) {
       var y = Math.floor(v / 12);
-      var m = (v % 12) + 1;
-      return y + '-' + (m < 10 ? '0' + m : '' + m);
+      var m = v % 12;   // 0 = January (ym packs month - 1)
+      return _MONTHS[m] + ' ' + y;
     }
 
     function syncTemporalStrip(checkedIds) {
@@ -1791,7 +1816,7 @@ LUCIDE_JS <- tags$head(
         if (document.activeElement === startEl) { hi = lo; endEl.value = hi; }
         else                                     { lo = hi; startEl.value = lo; }
       }
-      if (label) label.textContent = _ymFmt(lo) + '  --  ' + _ymFmt(hi);
+      if (label) label.textContent = _ymFmt(lo) + ' to ' + _ymFmt(hi);
       if (fill) {
         var min = parseInt(startEl.min, 10);
         var max = parseInt(startEl.max, 10);
@@ -2706,7 +2731,8 @@ render_panel_groups <- function() {
 
 ui <- page_fillable(
   theme   = bs_theme(version = 5, bg = "#FAFAFB", fg = "#0F172A",
-                     primary = "#006B82", base_font = font_google("Inter")),
+                     primary = "#006B82",
+                     base_font = font_google("Source Sans 3")),
   padding = 0,
   LUCIDE_JS,
   includeCSS("styles.css"),
@@ -4587,14 +4613,18 @@ server <- function(input, output, session) {
   # to the in-polygon subset when one is). Treemap geometry is a 2-row slice-
   # and-dice -- the dominant category gets the top row, smaller categories
   # tile the bottom row. Avoids the treemapify dependency.
-  CAUSE_PAL <- c("Other / unknown"   = "#6b7280",
-                 "Drowning"          = "#0ea5e9",
-                 "Harsh environment" = "#f59e0b",
-                 "Vehicle accident"  = "#a855f7",
-                 "Violence"          = "#ef4444")
-  DEMO_PAL  <- c(Children = "#f97316",
-                 Female   = "#ec4899",
-                 Male     = "#0987A8")
+  # Re-toned to the muted Spatial data palette so the treemaps speak the same
+  # colour language as the map points (no Tailwind-bright sky / red / purple).
+  CAUSE_PAL <- c("Other / unknown"   = "#374151",   # neutral slate (COL_COUNT)
+                 "Drowning"          = "#0987A8",   # teal-blue / water
+                 "Harsh environment" = "#B89307",   # ochre / heat
+                 "Vehicle accident"  = "#7E4A86",   # mauve
+                 "Violence"          = "#9E2A3A")   # brick red
+  # Demographics are nominal (not ordered) and carry no risk valence -- three
+  # distinct muted hues, avoiding the pink = female / blue = male cliche.
+  DEMO_PAL  <- c(Children = "#B89307",   # ochre
+                 Female   = "#7E4A86",   # mauve
+                 Male     = "#3A4B5C")   # slate
 
   treemap_layout <- function(df) {
     # df: data.frame(label, value, color); returns df with xmin/xmax/ymin/ymax
@@ -4642,12 +4672,12 @@ server <- function(input, output, session) {
     ggplot(laid, aes(xmin = xmin, xmax = xmax,
                      ymin = ymin, ymax = ymax,
                      fill = label)) +
-      geom_rect(color = "#0f172a", linewidth = 0.4) +
+      geom_rect(color = "#ffffff", linewidth = 0.7) +
       geom_text(aes(x = cx, y = cy + 0.10, label = short),
-                size = 2.2, color = "white",
+                size = 2.2, color = "white", family = PLOT_FONT,
                 fontface = "bold", lineheight = 0.9) +
       geom_text(aes(x = cx, y = cy - 0.18, label = paste0(pct, "%")),
-                size = 1.9, color = "white", alpha = 0.85) +
+                size = 1.9, color = "white", family = PLOT_FONT, alpha = 0.85) +
       scale_fill_manual(values = pal, na.value = "#334155") +
       coord_cartesian(expand = FALSE, xlim = c(0, 1), ylim = c(0, 1)) +
       theme_void() +
@@ -4727,7 +4757,7 @@ server <- function(input, output, session) {
           geom_point(data = df_sel, aes(x = yr, y = n),
                      color = line_color, size = 1.6, shape = 21,
                      fill = "white", stroke = 0.7)
-      p + theme_minimal(base_size = 8) +
+      p + theme_minimal(base_size = 8, base_family = PLOT_FONT) +
         theme(
           plot.background    = element_rect(fill = "transparent", color = NA),
           panel.background   = element_rect(fill = "transparent", color = NA),
@@ -4782,19 +4812,19 @@ server <- function(input, output, session) {
 
     ggplot(df_all, aes(x = ym, y = n, fill = in_win)) +
       geom_col(width = 1, color = NA) +
-      scale_fill_manual(values = c(`FALSE` = "#ffffff22",
+      scale_fill_manual(values = c(`FALSE` = "#cdd3db",
                                     `TRUE`  = bar_color)) +
       scale_x_continuous(breaks = yr_breaks, labels = yr_labels,
                          limits = c(ym_data_lo - 0.5, ym_data_hi + 0.5),
                          expand = expansion(mult = c(0, 0))) +
       scale_y_continuous(expand = expansion(mult = c(0, 0.05))) +
       labs(x = NULL, y = NULL) +
-      theme_minimal(base_size = 8) +
+      theme_minimal(base_size = 8, base_family = PLOT_FONT) +
       theme(plot.background  = element_rect(fill = "transparent", color = NA),
             panel.background = element_rect(fill = "transparent", color = NA),
             panel.grid       = element_blank(),
             axis.title       = element_blank(),
-            axis.text.x      = element_text(size = 7.5, color = "#94a3b8"),
+            axis.text.x      = element_text(size = 7.5, color = "#475569"),
             axis.text.y      = element_blank(),
             axis.ticks       = element_blank(),
             legend.position  = "none",

styles.css

@@ -3,7 +3,7 @@
    Renamed from 10.08_styles.css on 2026-05-20.
    ============================================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&family=Barlow+Condensed:wght@500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap');
 
 /* -- Design tokens --------------------------------------------------------- */
 :root {
@@ -61,17 +61,18 @@
   /* Glass blur */
   --blur-glass: saturate(140%) blur(14px);
 
-  /* Typography — Inter throughout, mono only for stats / coordinates */
-  --font-ui:    'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
+  /* Typography — Rights Lab brand: Source Sans 3 (UI/body),
+     Barlow Condensed (display/labels/wordmark), Source Code Pro (data/coords) */
+  --font-ui:    'Source Sans 3', system-ui, -apple-system, sans-serif;
+  --font-mono:  'Source Code Pro', 'SF Mono', ui-monospace, monospace;
 
-  /* Back-compat aliases — keep legacy class refs working */
-  --font-label: var(--font-ui);
+  /* Condensed display face for labels + wordmark; body falls back to UI font */
+  --font-label: 'Barlow Condensed', 'Source Sans 3', system-ui, sans-serif;
   --font-body:  var(--font-ui);
 
   /* Motion — Spatial spring */
   --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
+  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* calmed: ease-out, no overshoot */
   --t-fast: 140ms; --t-base: 220ms; --t-slow: 320ms;
 
   /* Radii */
@@ -421,9 +422,9 @@
 }
 
 .stat-val {
-  font-family: var(--font-mono);
+  font-family: var(--font-ui);
   font-size: 30px;
-  font-weight: 600;
+  font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
   margin-bottom: 4px;
@@ -628,7 +629,6 @@
 }
 
 .ind-card:hover {
-  transform: translateY(-1px);
   box-shadow: var(--depth-2);
 }
 
@@ -1358,9 +1358,10 @@ button.mapbox-gl-draw_uncombine { display: none !important; }
 
 /* ---- Brand ---- */
 .nav-brand {
-  font-size: 20px;
-  font-weight: 900;
-  letter-spacing: 0.16em;
+  font-family: var(--font-label);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--c-text);
   padding: 0 var(--space-2);
@@ -2512,10 +2513,10 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
   margin-left: auto;
   margin-right: auto;
   z-index: 950;
-  background: oklch(15% 0.012 250 / 0.92);
-  backdrop-filter: blur(12px) saturate(140%);
-  -webkit-backdrop-filter: blur(12px) saturate(140%);
-  border: 1px solid oklch(100% 0 0 / 0.12);
+  background: var(--c-glass-2);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-md);
   box-shadow: var(--depth-3);
   padding: 6px 12px 8px;
@@ -2558,8 +2559,8 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
 .temporal-play-btn,
 .temporal-reset-btn {
   background: transparent;
-  color: oklch(95% 0 0);
-  border: 1px solid oklch(100% 0 0 / 0.18);
+  color: var(--c-text-mid);
+  border: 1px solid var(--c-glass-stroke);
   cursor: pointer;
   font-family: var(--font-ui);
   transition: background var(--t-fast) var(--ease-out),
@@ -2586,8 +2587,9 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
 }
 .temporal-play-btn:hover,
 .temporal-reset-btn:hover {
-  background: oklch(100% 0 0 / 0.10);
-  border-color: oklch(100% 0 0 / 0.3);
+  background: var(--c-glass-hover);
+  border-color: var(--c-glass-stroke-strong);
+  color: var(--c-text);
 }
 .temporal-play-btn:focus-visible,
 .temporal-reset-btn:focus-visible {
@@ -2609,7 +2611,7 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
   top: 50%;
   transform: translateY(-50%);
   height: 3px;
-  background: oklch(100% 0 0 / 0.2);
+  background: var(--c-glass-stroke-strong);
   border-radius: 2px;
   pointer-events: none;
 }
@@ -2644,8 +2646,8 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
   height: 14px;
   border-radius: 50%;
   background: #ffffff;
-  border: 2px solid oklch(15% 0.012 250);
-  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.4);
+  border: 2px solid var(--c-accent);
+  box-shadow: var(--depth-1);
   cursor: pointer;
   margin-top: 0;
 }
@@ -2655,8 +2657,8 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
   height: 14px;
   border-radius: 50%;
   background: #ffffff;
-  border: 2px solid oklch(15% 0.012 250);
-  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.4);
+  border: 2px solid var(--c-accent);
+  box-shadow: var(--depth-1);
   cursor: pointer;
 }
 .temporal-slider-input::-webkit-slider-runnable-track,
@@ -2670,12 +2672,12 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
 .temporal-slider-start { z-index: 1; }
 
 .temporal-year-label {
-  color: oklch(95% 0 0);
+  color: var(--c-text);
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
   font-size: 12px;
   font-weight: 500;
-  min-width: 110px;
+  min-width: 150px;
   text-align: center;
   letter-spacing: -0.01em;
   flex-shrink: 0;