Upload 2 files

depth_interactive_map_alpha.R

@@ -1185,23 +1185,38 @@ WEB_SPEC <- list(
     list(id = "hazards", label = "Hazards", open = TRUE, items = list(
       list(kind = "layer", value = "crime-choro",
            label = "Criminal incidence by municipality",
-           tooltip = "Rate of crimes per 100,000 people in each municipality. Select crime type using the buttons below. Source: Registro Nacional de Incidencia Delictiva (RNID)",
+           tooltip = list(
+             title = "Criminal incidence",
+             body  = "Rate of crimes per 100,000 people in each municipality. Pick a crime type with the chips below the layer to switch the painted column.",
+             meta  = "Source: Registro Nacional de Incidencia Delictiva (RNID)"
+           ),
            legend = list(type = "ramp", pal = "crime", unit = " /100k",
                          labels = "qualitative"),
            checked = TRUE),
       list(kind = "radios", group = "crime"),
       list(kind = "layer", value = "migrants-pts",
            label = "Deaths during migration",
-           tooltip = "Each dot is a location where migrants went died, recorded by the International Organization for Migration.",
+           tooltip = list(
+             title = "Migrant deaths",
+             body  = "Each dot marks a location where migrants died on their journey. The temporal strip and the cards both report SUM(n_dead), not raw incident counts.",
+             meta  = "Source: IOM Missing Migrants Project"
+           ),
            legend = list(type = "dot", color = COL_YEL, label = "Death location")),
       list(kind = "layer", value = "desap-choro",
            label = "Missing and no located persons per 100k",
-           tooltip = "People officially reported as disappeared and no located in each municipality, shown per 100,000 residents (2010 to 2024). Source:
-           Registro Nacional de Personas Desaparecidas y No Localizadas (RNPDNO)",
+           tooltip = list(
+             title = "Disappearances per 100k",
+             body  = "People officially reported as disappeared and not located in each municipality, normalised per 100,000 residents (2010-2024). Colour ramp uses per-muni percentile breaks.",
+             meta  = "Source: RNPDNO"
+           ),
            legend = list(type = "ramp", pal = "desap", unit = " /100k")),
       list(kind = "layer", value = "fosas-choro",
            label = "Clandestine graves by municipality",
-           tooltip = "Number of clandestine graves and bodies found per municipality. Source: Plataforma Ciudadana de Fosas (2006-2024)",
+           tooltip = list(
+             title = "Clandestine graves",
+             body  = "Number of clandestine pits and recovered bodies per municipality. Annual data -- use the temporal strip to scope to a year range.",
+             meta  = "Source: Plataforma Ciudadana de Fosas (2006-2024)"
+           ),
            legend = list(type = "ramp", pal = "fosas", unit = " pits/bodies",
                          labels = "qualitative")),
       list(kind = "radios", group = "fosas"),
@@ -1232,7 +1247,11 @@ WEB_SPEC <- list(
            legend = list(type = "ramp", pal = "pam", unit = " events")),
       list(kind = "layer", value = "remesas-choro",
            label = "Degree of Migration Intensity MEX-USA (GIIM)",
-           tooltip = "Index measuring the intensity of migration from Mexico to the United States, from none to very high. Source: CONAPO",
+           tooltip = list(
+             title = "Migration intensity (GIIM)",
+             body  = "Composite index from CONAPO: emigration, return, circular and remittance-receiving households per muni. Click a swatch to hide that GIIM bracket.",
+             meta  = "Source: CONAPO Degree of Migration Intensity"
+           ),
            legend = list(type = "cats", pal = "giim", filterable = "remesas")),
       list(kind = "layer", value = "routes-lines",
            label = "Main migration routes through Mexico",
@@ -1256,7 +1275,11 @@ WEB_SPEC <- list(
            legend = list(type = "cats", pal = "infra_cats", filterable = "infra")),
       list(kind = "layer", value = "patp-choro",
            label = "Territorial analysis of poverty",
-           tooltip = "Multi-dimensional poverty analysis, including sociodemographics, infrastructure and government. Source: CONEVAL",
+           tooltip = list(
+             title = "PATP - territorial poverty",
+             body  = "CONEVAL territorial analysis: poverty share, extreme poverty, economic participation, occupation, remittances, road connectivity, predominant rural problem and crime focus. Pick a chip to switch the painted column.",
+             meta  = "Source: CONEVAL PATP 2020 + Poverty Census 2020"
+           ),
            legend = list(type = "ramp", pal = "patp", unit = "",
                          labels = "qualitative"),
            # Variant legends shown when the matching categorical chip is active.
@@ -1327,9 +1350,9 @@ WEB_SPEC <- list(
              ),
              charts = list(
                list(id = "migrants_treemap_cause", label = "Cause of death",
-                    height = "60px"),
+                    height = "40px"),
                list(id = "migrants_treemap_demo",  label = "Demographics (children / female / male)",
-                    height = "44px")
+                    height = "40px")
              )),
         list(title = "Missing persons and not located (RNPDNO)", kind = "stat",
              stats = list(list(id = "n_desap", label = "Disappearances & no located", color = COL_RISK))),
@@ -1387,7 +1410,24 @@ LUCIDE_JS <- tags$head(
         setTimeout(initViewport, 800);
       }, 400);
 
-      // Tooltip: positioned via JS to escape overflow:hidden containers
+      // Tooltip: positioned via JS to escape overflow:hidden containers.
+      // Supports a rich form with header / body / meta when the trigger sets
+      // data-tooltip-title and/or data-tooltip-meta in addition to data-tooltip.
+      // Build the rich tooltip via DOM methods (textContent auto-escapes, no
+      // quoting issues inside the surrounding R-quoted block).
+      function _setRichTooltip(tip, title, body, meta) {
+        while (tip.firstChild) tip.removeChild(tip.firstChild);
+        function add(cls, text) {
+          if (text == null || text === '') return;
+          var d = document.createElement('div');
+          d.className = cls;
+          d.textContent = text;
+          tip.appendChild(d);
+        }
+        add('depth-tooltip-title', title);
+        add('depth-tooltip-body',  body);
+        add('depth-tooltip-meta',  meta);
+      }
       document.addEventListener('mouseover', function(e) {
         var el = e.target.closest('[data-tooltip]');
         if (!el) { hideTooltip(); return; }
@@ -1398,11 +1438,36 @@ LUCIDE_JS <- tags$head(
           tip.className = 'depth-tooltip';
           document.body.appendChild(tip);
         }
-        tip.textContent = el.dataset.tooltip;
-        var r = el.getBoundingClientRect();
-        tip.style.left = (r.right + 8) + 'px';
-        tip.style.top  = (r.top + r.height / 2) + 'px';
+        var title = el.dataset.tooltipTitle;
+        var body  = el.dataset.tooltip;
+        var meta  = el.dataset.tooltipMeta;
+        if (title || meta) {
+          tip.classList.add('is-rich');
+          _setRichTooltip(tip, title, body, meta);
+        } else {
+          tip.classList.remove('is-rich');
+          tip.textContent = body || '';
+        }
         tip.style.display = 'block';
+        // Position to the right of the trigger by default; if there's not
+        // enough room on the right (e.g. element in a left-pinned panel
+        // whose right edge sits near the viewport edge), flip to the left.
+        var r  = el.getBoundingClientRect();
+        var tw = tip.offsetWidth;
+        var th = tip.offsetHeight;
+        var vw = window.innerWidth;
+        var pad = 8;
+        var left = r.right + pad;
+        if (left + tw > vw - pad) left = Math.max(pad, r.left - tw - pad);
+        var top = r.top + r.height / 2;
+        // Clamp vertically too so the (translateY -50%) tooltip stays onscreen.
+        var half = th / 2;
+        if (top - half < pad)        top = pad + half;
+        if (top + half > window.innerHeight - pad)
+          top = window.innerHeight - pad - half;
+        tip.style.left = left + 'px';
+        tip.style.top  = top + 'px';
+        requestAnimationFrame(function() { tip.classList.add('is-visible'); });
       });
       document.addEventListener('mouseout', function(e) {
         if (e.target.closest('[data-tooltip]')) hideTooltip();
@@ -1470,7 +1535,9 @@ LUCIDE_JS <- tags$head(
 
     function hideTooltip() {
       var tip = document.getElementById('depth-tooltip');
-      if (tip) tip.style.display = 'none';
+      if (!tip) return;
+      tip.classList.remove('is-visible');
+      tip.style.display = 'none';
     }
 
     // -- Guided spotlight tour (Driver.js) --------------------------------------
@@ -2380,14 +2447,25 @@ acc_layer <- function(value, label, tooltip = NULL, legend = NULL, checked = FAL
         ),
         span(class = "acc-toggle-text", label)
       ),
-      if (!is.null(tooltip))
+      if (!is.null(tooltip)) {
+        # `tooltip` may be a plain string (legacy form) or a list with
+        # title / body / meta (rich form). Rich-form keys are passed through
+        # as data-* attributes; the JS reads them and renders the structured
+        # layout (.depth-tooltip.is-rich).
+        tip_body  <- if (is.list(tooltip)) tooltip$body  else tooltip
+        tip_title <- if (is.list(tooltip)) tooltip$title else NULL
+        tip_meta  <- if (is.list(tooltip)) tooltip$meta  else NULL
         tags$span(class = "acc-info-wrap",
-          `data-tooltip` = tooltip,
-          role           = "button",
-          tabindex       = "0",
-          `aria-label`   = paste0("Info: ", tooltip),
+          `data-tooltip`       = tip_body,
+          `data-tooltip-title` = tip_title,
+          `data-tooltip-meta`  = tip_meta,
+          role                 = "button",
+          tabindex             = "0",
+          `aria-label`         = paste0("Info: ",
+                                         tip_title %||% substr(tip_body, 1, 60)),
           HTML('<i data-lucide="info" style="width:12px;height:12px;stroke-width:2.5;color:var(--c-text-mid)"></i>')
         )
+      }
     ),
     if (!is.null(legend)) legend,
     if (!is.null(legend_extras)) legend_extras
@@ -4626,58 +4704,62 @@ server <- function(input, output, session) {
                  Female   = "#7E4A86",   # mauve
                  Male     = "#3A4B5C")   # slate
 
-  treemap_layout <- function(df) {
-    # df: data.frame(label, value, color); returns df with xmin/xmax/ymin/ymax
+  # Stacked-bar layout: one horizontal row of segments, widths proportional
+  # to value. Returns the same shape as the treemap layout did (xmin/xmax/
+  # ymin/ymax/value) so downstream code stays small.
+  stacked_bar_layout <- function(df) {
     df <- df[!is.na(df$value) & df$value > 0, , drop = FALSE]
     if (nrow(df) == 0) return(NULL)
     df <- df[order(-df$value), , drop = FALSE]
     total <- sum(df$value)
-    # Top row holds the leader; remainder tiles the bottom row.
-    leader <- df[1, , drop = FALSE]
-    rest   <- if (nrow(df) > 1) df[-1, , drop = FALSE] else NULL
-    leader$xmin <- 0; leader$xmax <- 1
-    leader_share <- leader$value / total
-    leader$ymax <- 1; leader$ymin <- 1 - leader_share
-    if (!is.null(rest) && nrow(rest) > 0) {
-      rest_share <- rest$value / sum(rest$value)
-      rest$xmax <- cumsum(rest_share)
-      rest$xmin <- c(0, head(rest$xmax, -1))
-      rest$ymin <- 0; rest$ymax <- 1 - leader_share
-      rbind(leader, rest)
-    } else {
-      leader$ymin <- 0; leader$ymax <- 1
-      leader
-    }
+    df$pct  <- df$value / total
+    df$xmax <- cumsum(df$pct)
+    df$xmin <- c(0, head(df$xmax, -1))
+    df$ymin <- 0
+    df$ymax <- 1
+    df
   }
 
-  # Compact text inside a treemap cell: short label + smaller %, sized so
-  # they actually fit a ~70px tall card slot. geom_text `size` is in mm;
-  # 2.2mm ~ 6.3pt for the label and 1.8mm ~ 5.1pt for the percentage --
-  # smaller than the surrounding card text, which is the point.
-  treemap_plot <- function(df, pal) {
-    laid <- treemap_layout(df)
+  # Single-row stacked bar: each segment a category, width = its share. Labels
+  # sit centred in the segment; percentages drop to a second line. Narrow
+  # segments fall back to just the percentage. geom_text size is in mm:
+  # 2.4mm ~ 6.8pt label, 2.0mm ~ 5.7pt percentage -- tuned for the ~60px tall
+  # card slot the migrants card gives each chart.
+  stacked_bar_plot <- function(df, pal) {
+    laid <- stacked_bar_layout(df)
     if (is.null(laid)) return(NULL)
-    total <- sum(laid$value)
-    laid$pct  <- round(100 * laid$value / total)
-    laid$cx   <- (laid$xmin + laid$xmax) / 2
-    laid$cy   <- (laid$ymin + laid$ymax) / 2
-    laid$w    <- laid$xmax - laid$xmin
-    # Truncate long labels so they don't crash the cell border. ~13 chars
-    # fits a half-row at the card width; less for narrow cells.
-    max_chars <- pmax(6L, pmin(20L, as.integer(laid$w * 26)))
-    short <- ifelse(nchar(laid$label) > max_chars,
-                    paste0(substr(laid$label, 1L, max_chars - 1L), "."),
-                    laid$label)
-    laid$short <- short
+    laid$pct_int <- round(100 * laid$pct)
+    laid$pct_lbl <- paste0(laid$pct_int, "%")
+    laid$cx      <- (laid$xmin + laid$xmax) / 2
+    laid$w       <- laid$xmax - laid$xmin
+    # Truncate the label to roughly what each segment can fit. Narrower than
+    # ~6% of the bar (~16 px) gets just the percentage; below that, nothing.
+    max_chars <- pmax(0L, as.integer(laid$w * 28))
+    laid$short <- ifelse(nchar(laid$label) > max_chars,
+                          paste0(substr(laid$label, 1L, pmax(1L, max_chars - 1L)), "."),
+                          laid$label)
+    laid$show_label <- laid$w >= 0.10                # ~ 33 px segments and up
+    laid$show_pct   <- laid$w >= 0.06
+    label_df <- laid[laid$show_label, , drop = FALSE]
+    pct_df   <- laid[laid$show_pct,   , drop = FALSE]
+    pct_only <- !pct_df$show_label
     ggplot(laid, aes(xmin = xmin, xmax = xmax,
-                     ymin = ymin, ymax = ymax,
-                     fill = label)) +
-      geom_rect(color = "#ffffff", linewidth = 0.7) +
-      geom_text(aes(x = cx, y = cy + 0.10, label = short),
-                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", family = PLOT_FONT, alpha = 0.85) +
+                     ymin = ymin, ymax = ymax, fill = label)) +
+      # Soft 1px separator: white at low alpha reads on every palette colour
+      # without dominating either segment (#ffffff99 = 60% opacity in R hex).
+      geom_rect(color = "#ffffff99", linewidth = 0.4) +
+      # Label centred high; percentage drops below it.
+      { if (nrow(label_df) > 0)
+        geom_text(data = label_df,
+                  aes(x = cx, y = 0.62, label = short),
+                  size = 2.4, color = "white", family = PLOT_FONT,
+                  fontface = "bold") } +
+      { if (nrow(pct_df) > 0)
+        geom_text(data = pct_df,
+                  aes(x = cx, y = ifelse(pct_only, 0.5, 0.32),
+                      label = pct_lbl),
+                  size = 2.0, color = "white", family = PLOT_FONT,
+                  alpha = 0.9) } +
       scale_fill_manual(values = pal, na.value = "#334155") +
       coord_cartesian(expand = FALSE, xlim = c(0, 1), ylim = c(0, 1)) +
       theme_void() +
@@ -4717,7 +4799,7 @@ server <- function(input, output, session) {
                               value = agg$n_dead,
                               color = unname(CAUSE_PAL[agg$cause_cat]),
                               stringsAsFactors = FALSE)
-    treemap_plot(summary_df, CAUSE_PAL)
+    stacked_bar_plot(summary_df, CAUSE_PAL)
   }, bg = "transparent", res = 110)
 
   output$migrants_treemap_demo <- renderPlot({
@@ -4731,7 +4813,7 @@ server <- function(input, output, session) {
       color = unname(DEMO_PAL),
       stringsAsFactors = FALSE
     )
-    treemap_plot(summary_df, DEMO_PAL)
+    stacked_bar_plot(summary_df, DEMO_PAL)
   }, bg = "transparent", res = 110)
 
   # Shared helper: temporal bar chart by year for point event tables

styles.css

@@ -878,11 +878,14 @@
 }
 
 .acc-toggle-text {
-  font-size: 11.5px;
+  /* 12.5 px is the smallest size that stays comfortably legible at glass-card
+     contrast (c-text-mid on c-glass-1 is ~7.4:1, but the eye reads thinner
+     strokes slower than that ratio suggests). */
+  font-size: 12.5px;
   color: var(--c-text-mid);
   font-family: var(--font-ui);
   transition: color var(--t-fast) var(--ease-out);
-  line-height: 1.4;
+  line-height: 1.45;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -921,8 +924,13 @@
   transition: opacity var(--t-fast) var(--ease-out);
 }
 
-.acc-info-wrap:hover,
-.acc-info-wrap:focus-visible { opacity: 1; outline: none; }
+.acc-info-wrap:hover { opacity: 1; }
+.acc-info-wrap:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
 
 /* -- Layer legends ---------------------------------------------------------- */
 .acc-legend {
@@ -1201,25 +1209,72 @@
 /* -- JS-positioned tooltip (inverted glass) -------------------------------- */
 .depth-tooltip {
   position: fixed;
-  background: oklch(15% 0.012 250 / 0.92);
-  backdrop-filter: blur(12px) saturate(140%);
-  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  background: oklch(15% 0.012 250 / 0.94);
+  backdrop-filter: blur(14px) saturate(150%);
+  -webkit-backdrop-filter: blur(14px) saturate(150%);
   color: oklch(98% 0.003 250);
-  font-size: 11px;
+  font-size: 12.5px;
   font-family: var(--font-ui);
   font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
+  line-height: 1.55;
+  letter-spacing: 0.005em;
+  font-variant-numeric: tabular-nums;
+  padding: 9px 13px;
   border-radius: var(--radius-md);
-  border: 1px solid oklch(100% 0 0 / 0.08);
-  max-width: 260px;
+  border: 1px solid oklch(100% 0 0 / 0.10);
+  max-width: 280px;
   z-index: 99999;
   pointer-events: none;
   transform: translateY(-50%);
   box-shadow: var(--depth-3);
   word-break: break-word;
   display: none;
+  /* Fade in via transition rather than springing the size; the JS pops the
+     element by toggling display, then the next frame the opacity lifts. */
+  opacity: 0;
+  transition: opacity var(--t-fast) var(--ease-out);
+}
+.depth-tooltip.is-visible { opacity: 1; }
+
+/* ---- Rich tooltip variant -------------------------------------------------
+   When a trigger has data-tooltip-title and/or data-tooltip-meta in addition
+   to data-tooltip, JS adds .is-rich and emits structured slots. The layout
+   reads as a tiny card: tinted uppercase title, paragraph body, dim meta
+   footer separated by a hairline divider. */
+.depth-tooltip.is-rich {
+  padding: 0;
+  max-width: 320px;
+}
+.depth-tooltip-title {
+  padding: 9px 14px 6px;
+  font-family: var(--font-ui);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: oklch(82% 0.07 218);     /* soft teal-on-dark; readable, low chroma */
+  border-bottom: 1px solid oklch(100% 0 0 / 0.08);
+}
+.depth-tooltip-body {
+  padding: 8px 14px;
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: oklch(95% 0.003 250);
+}
+.depth-tooltip-meta {
+  padding: 6px 14px 9px;
+  border-top: 1px solid oklch(100% 0 0 / 0.06);
+  font-family: var(--font-ui);
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  color: oklch(70% 0 0);
+  font-variant-numeric: tabular-nums;
 }
+/* When only title+body or only body+meta are provided, suppress the empty
+   border that would otherwise hang under the missing slot. */
+.depth-tooltip-title:last-child,
+.depth-tooltip-body:last-child  { border-bottom: 0; padding-bottom: 9px; }
+.depth-tooltip-meta:first-child { border-top: 0; padding-top: 9px; }
 
 /* -- Hide ALL MapLibre Draw native buttons -------------------------------- */
 /* Custom Lucide-icon buttons in the nav-bar proxy-click these natives via    */
@@ -1980,8 +2035,9 @@ button.mapbox-gl-draw_uncombine { display: none !important; }
   border-radius: var(--radius-md) !important;
   box-shadow: var(--depth-3) !important;
   font-family: var(--font-ui) !important;
-  font-size: 11.5px !important;
+  font-size: 12.5px !important;
   line-height: 1.55 !important;
+  letter-spacing: 0.005em;
   font-variant-numeric: tabular-nums;
   padding: 10px 14px !important;
   max-width: 280px;