Identifying Climate Information Readiness

import { downloadCsvButton, downloadPngButton } from "/helpers/uiComponents.ojs";

import { filterableDataTable } from "/helpers/atlasTable.ojs";

import {
  adminMultiSelect,
  admin0Select,
  admin1Select,
  admin2Select,
} from "/helpers/adminSelectors.ojs";

import { chartStyle, inputTemplate } from "/helpers/std.ojs";

import {
  bivariateMapWithLegend,
  bivariatePalettes,
  makeChoropleth,
  mergeDataToBoundaries,
} from "/helpers/atlasMap.ojs";

import { createSqlBindings, sqlAdminWhere } from "/helpers/sql.js";

OverviewVue d’Ensemble

Reliable Climate Information Services (CIS) depend on a continuous chain of functions: observation, data agreement, prediction and usability. This notebook helps users identify where climate information is reliable enough to inform agricultural decisions and where weak data infrastructure could limit impact.

Les Services de Climat Fiable (CIS) dépendent d’une chaîne continue de fonctions: observation, accord des données, prédiction et utilisabilité. Ce notebook aide les utilisateurs à identifier où les informations climatiques sont fiables pour informer les décisions agricoles et où une infrastructure de données faible pourrait limiter l’impact.

Building the CIS Readiness IndexConstruire l’indice de préparation CIS

This section examines the technical enabling conditions behind climate information services: how densely weather is observed, how well satellite records agree, and how skilful forecasts are at short and long lead times. Each indicator is shown across administrative levels before being combined into the CIS Readiness Index.

Cette section examine les conditions techniques qui sous-tendent les services d’information climatique: la densité des observations météorologiques, le degré d’accord entre les enregistrements satellitaires et la qualité des prévisions à court et à long terme. Chaque indicateur est présenté par niveau administratif avant d’être combiné dans l’indice de préparation CIS.

thresholds = await FileAttachment("/data/cis/thresholds.json").json();

// Centralize threshold keys, labels, and precision for tables and exports.
// TODO: Move English-only labels into data/cis/text/<locale>.json.
CIS_INDICATORS = new Object({
  cis_readiness_index: { threshold: "cis_dfci", label: "CIS Readiness", decimals: 3 },
  wstation_density: { threshold: "WeatherStation_idx", label: "Weather Station", decimals: 3 },
  "cloud-coverage_meanannual": { threshold: "OpticalAvailability_idx", label: "Clear-Sky Availability", decimals: 3 },
  "cv-precipitation_agreement": { threshold: "Precipitation variability agreement", label: "Satellite Agreement", decimals: 1 },
  "short-term_frcst_skill": { threshold: "ShortTerm_idx", label: "Short-term Skill", decimals: 3 },
  seasonal_frcst_skill: { threshold: "LongTerm_idx", label: "Long-term Skill", decimals: 3 },
});

thresholdIndicatorByField = new Object(
  Object.fromEntries(
    Object.entries(CIS_INDICATORS).map(([field, i]) => [field, i.threshold]),
  ),
);

// Build raw/class column pairs; exports can disable formatting or classes.
S11_INDICATORS = ["wstation_density", "cloud-coverage_meanannual"]

indicatorColumns = (row, fields, { format = true, withClass = true } = {}) =>
  Object.fromEntries(
    fields.flatMap((field) => {
      const { label, decimals } = CIS_INDICATORS[field];
      const pairs = [
        [`${label} (Raw)`, format ? fmt(row[field], decimals) : row[field]],
      ];
      if (withClass) {
        pairs.push([
          `${label} (Class)`,
          classifyThreshold(field, row[field], row),
        ]);
      }
      return pairs;
    }),
  );

// Which bivariate cells rank highest, and the string key naming each tier.
bivariatePriority = thresholds.bivariatePriority

thresholdAdminLevel = (rowOrLevel = currentAdminLevel) => {
  if (typeof rowOrLevel === "number") return `admin${rowOrLevel}`;
  if (rowOrLevel?.admin2_name != null) return "admin2";
  if (rowOrLevel?.admin1_name != null) return "admin1";
  return "admin0";
};

thresholdRules = (field, rowOrLevel = currentAdminLevel) =>
  thresholds[thresholdAdminLevel(rowOrLevel)].indicators[
    thresholdIndicatorByField[field]
  ];

classifyThreshold = (field, value, rowOrLevel = currentAdminLevel) => {
  const numericValue = Number(value);
  if (value == null || Number.isNaN(numericValue)) return "No data";

  const rules = thresholdRules(field, rowOrLevel);
  const match = rules.find((rule, index) =>
    "value" in rule
      ? numericValue === rule.value
      : numericValue >= rule.min &&
        (index === rules.length - 1
          ? numericValue <= rule.max
          : numericValue < rule.max),
  );

  return match?.category ?? "No data";
};

classificationBand = (category) => {
  const label = String(category).toLowerCase();
  if (label.includes("no data")) return "no data";
  if (label.includes("weak") || label.includes("low")) return "low";
  if (label.includes("strong") || label.includes("high")) return "high";
  return "moderate";
};

classificationScale = (field, colors) => ({
  type: "categorical",
  domain: thresholdRules(field).map((rule) => rule.category),
  range: colors,
  label: "Classification",
});

/** Interpret short- and long-term RPSS; delta is long minus short. */
classifyForecastSkill = (shortTerm, longTerm) => {
  if (shortTerm == null || longTerm == null)
    return { interpretation: "No data", implication: "Insufficient data" };

  // Positive delta means skill improves with lead time.
  const delta = longTerm - shortTerm;

  if (shortTerm > 0.6 && longTerm > 0.6) {
    return {
      interpretation: "Reliable forecasts at both horizons",
      implication: "Scale CIS for advisories + finance",
    };
  } else if (shortTerm > 0.6 && longTerm < 0.4 && delta < -0.2) {
    return {
      interpretation: "Rapid loss of skill",
      implication: "Limit use to short-term planning",
    };
  } else if (shortTerm < 0.4 && longTerm < 0.4) {
    return {
      interpretation: "Weak predictability",
      implication: "Use climatology / caution",
    };
  } else {
    return {
      interpretation: "Uncertain but usable",
      implication: "Blend with historical averages",
    };
  }
}

// Reuse the selection-resolved admin view from notebook.qmd.
filteredData = {
  const bind = createSqlBindings();
  const adminWhere = sqlAdminWhere({ admin0: selectedAdmin0, admin1: selectedAdmin1 }, bind, {
    iso3: iso3Set,
  });

  const rows = await db.query(
    `
    SELECT *
    FROM cis_data
    WHERE ${adminWhere}
  `,
    bind.params
  );

  return rows;
}

// Join selected boundaries with filtered rows and derive map-specific fields.
// Unmatched boundaries remain available as no-data features.
buildLevelFeatures = (fields, data = filteredData, view = adminView) => {
  const geoData = mergeDataToBoundaries({
    boundaries: view.boundaries,
    data,
    boundaryKey: (feature) => view.adminKey(feature.properties),
    dataKey: view.adminKey,
  });

  return geoData.features.map((feature) => {
    const p = feature.properties;

    return {
      ...feature,
      properties: {
        ...p,
        // Precompute the full map label, including country at admin 2.
        regionName:
          view.level === 0
            ? p.admin0_name
            : view.level === 1
            ? `${p.admin1_name}, ${p.admin0_name}`
            : `${p.admin2_name}, ${p.admin1_name}, ${p.admin0_name}`,
        ...fields(p.data),
      },
    };
  });
}

// Breadcrumb navigation
breadcrumb = {
  const parts = [];

  // Show SSA if no admin0 selected
  if (selectedAdmin0.length === 0) {
    parts.push("Sub-Saharan Africa");
  } else {
    if (selectedAdmin0.length === 1) parts.push(selectedAdmin0[0]);
    else parts.push(`${selectedAdmin0.length} countries`);
  }

  if (selectedAdmin1.length === 1) parts.push(selectedAdmin1[0]);
  else if (selectedAdmin1.length > 1) parts.push(`${selectedAdmin1.length} admin1 regions`);

  if (selectedAdmin2.length === 1) parts.push(selectedAdmin2[0]);
  else if (selectedAdmin2.length > 1)
    parts.push(`${selectedAdmin2.length} admin2 regions (highlighted)`);

  return parts.join(" → ");
}

---

How strong is weather measurement?Quelle est la force de la mesure météorologique?

The assessment uses two complementary indicators of observation capacity. The weather-station density index combines station numbers and spatial coverage with administrative-unit area; higher values indicate stronger and more evenly distributed ground observation, not simply more stations. The clear-sky availability index is the inverse of mean annual cloud cover, so higher values indicate more opportunities for optical satellites to observe the surface. Use both indices to compare relative capacity between places rather than reading them as station counts or percentages.

The optional station layer shows 2025 catalogue records from NOAA, OSCAR, and WMO. The dots help reveal clusters and observation gaps behind the density index, but they do not confirm that a station was operational, reporting regularly, quality-controlled, or accessible in 2025. Multiple catalogues may also describe the same physical station.

L’évaluation utilise deux indicateurs complémentaires de la capacité d’observation. L’indice de densité des stations météorologiques combine leur nombre et leur couverture spatiale avec la superficie des unités administratives ; une valeur élevée indique une observation au sol plus forte et mieux répartie, et non simplement un plus grand nombre de stations. L’indice de disponibilité du ciel dégagé est l’inverse de la couverture nuageuse annuelle moyenne : une valeur élevée indique davantage d’occasions pour les satellites optiques d’observer la surface. Ces indices servent à comparer la capacité relative entre les territoires ; ils ne doivent pas être lus comme des nombres de stations ou des pourcentages.

La couche facultative des stations présente les enregistrements de 2025 provenant des catalogues de la NOAA, d’OSCAR et de l’OMM. Les points permettent de repérer les concentrations et les lacunes d’observation qui sous-tendent l’indice de densité, mais ils ne confirment pas qu’une station était opérationnelle, transmettait régulièrement des données, faisait l’objet d’un contrôle qualité ou que ses données étaient accessibles en 2025. Plusieurs catalogues peuvent également décrire la même station physique.

How to interpret these indicatorsComment interpréter ces indicateurs

Weather-station density index — Combines the number and spatial coverage of catalogued stations with the area of each administrative unit. Higher values indicate stronger and more evenly distributed potential ground coverage, not simply a larger station count.

Clear-sky availability index — The inverse of mean annual cloud cover, on a 0–1 scale. Higher values mean more opportunities for optical satellites to observe the surface; they do not indicate satellite accuracy or ground-station coverage.

Indice de densité des stations météorologiques — Combine le nombre et la répartition spatiale des stations répertoriées avec la superficie de chaque unité administrative. Une valeur élevée indique une couverture potentielle au sol plus forte et mieux répartie, et non simplement un plus grand nombre de stations.

Indice de disponibilité du ciel dégagé — Correspond à l’inverse de la couverture nuageuse annuelle moyenne, sur une échelle de 0 à 1. Une valeur élevée signifie davantage d’occasions pour les satellites optiques d’observer la surface ; elle ne renseigne ni sur la précision satellitaire ni sur la couverture des stations au sol.

adminControls([0, 1, 2])

viewof s11ViewType = Inputs.radio(["Map", "Table"], {
  label: nbText.viewTypeLabel,
  value: "Map",
})

viewof s11MapMode = Inputs.radio(["Raw values", "Classified"], {
  label: nbText.mapModeLabel,
  value: "Raw values",
})

viewof s11ShowStations = {
  const input = Inputs.toggle({
    label: nbText.stationOverlayToggle,
    value: true,
  });
  if (s11ViewType !== "Map") input.style.display = "none";
  return input;
}

// Prepare data for Section 1.1 maps
s11MapData = {
  const features = buildLevelFeatures((d) => ({
    weatherStation: d?.["wstation_density"],
    clearSky: d?.["cloud-coverage_meanannual"],
    weatherStationClass: d
      ? classifyThreshold("wstation_density", d["wstation_density"], d)
      : "No data",
    clearSkyClass: d
      ? classifyThreshold("cloud-coverage_meanannual", d["cloud-coverage_meanannual"], d)
      : "No data",
  }));

  // Show the no-data features rather than an empty map if nothing joined.
  const withData = features.filter(
    (f) => f.properties.weatherStation != null || f.properties.clearSky != null,
  );
  return {
    type: "FeatureCollection",
    features: withData.length ? withData : features,
  };
}

s11StationFeatures = {
  const countries = new Set(admin0Select.map((d) => d.iso3));
  const regions = new Set(admin1Select.map((d) => `${d.iso3}||${d.admin1_name}`));
  const districts = new Set(
    admin2Select.map((d) => `${d.iso3}||${d.admin1_name}||${d.admin2_name}`)
  );

  return weatherStations.features.filter(
    ({ properties: p }) =>
      (!countries.size || countries.has(p.iso3)) &&
      (!regions.size || regions.has(`${p.iso3}||${p.admin1_name}`)) &&
      (!districts.size || districts.has(`${p.iso3}||${p.admin1_name}||${p.admin2_name}`))
  );
}

// Section 1.1 Maps
s11Figure = {
  if (s11ViewType === "Map") {
    const height = 600;
    const useRaw = s11MapMode === "Raw values";
    const stationCount = new Intl.NumberFormat(language.key).format(s11StationFeatures.length);
    const stationSummary = tmpl(nbText.stationRecordsShown, {
      count: stationCount,
    });
    const stationMark = Plot.dot(s11StationFeatures, {
      x: (d) => d.geometry.coordinates[0],
      y: (d) => d.geometry.coordinates[1],
      r: 1.3,
      fill: "#6b1e57",
      fillOpacity: 0.45,
      pointerEvents: "none",
    });

    // No newline after the backtick: htl wraps multi-node templates in an inline
    // <span>, and html-to-image measures 0x0 on those, so the PNG download fails.
    return htl.html`<div style="display: flex; gap: 20px;">
      <div style="flex: 1;">
        <h4 style="margin-bottom: 0;">${nbText.weatherStationLabel}</h4>
        ${
          s11ShowStations
            ? htl.html`
              <div style="align-items: center; color: #4a5568; display: flex; flex-wrap: wrap; font-size: 0.85rem; gap: 0.35rem 0.65rem; margin-bottom: 0.35rem;">
                <span style="align-items: center; display: inline-flex; gap: 0.35rem;">
                  <span aria-hidden="true" style="background: #6b1e57; border-radius: 50%; display: inline-block; height: 0.55rem; opacity: 0.45; width: 0.55rem;"></span>
                  ${nbText.stationLegendLabel}
                </span>
                <span>· ${stationSummary}</span>
              </div>
            `
            : null
        }
        ${makeChoropleth({
          features: s11MapData,
          width: width / 2,
          fill: useRaw
            ? (d) => d.properties.weatherStation
            : (d) => d.properties.weatherStationClass,
          color: useRaw
            ? {
                type: "linear",
                domain: d3.extent(s11MapData.features, (d) => d.properties.weatherStation),
                scheme: "YlGnBu",
                label: "Density",
              }
            : classificationScale("wstation_density", ["#fee5d9", "#fcae91", "#fb6a4a"]),
          channels: {
            region: {
              //TODO: replace this with country, admin1, admin2 (also better titles and translations)
              label: "Region",
              value: (d) => d.properties.regionName,
            },
            weatherStation: {
              label: "Weather Station",
              value: (d) => fmt(d.properties.weatherStation, 3),
            },
            class: {
              label: "Class",
              value: (d) => d.properties.weatherStationClass,
            },
          },
          tooltip: {
            region: true,
            weatherStation: true,
            class: true,
          },
          adminHighlight,
          extraMarks: s11ShowStations ? [stationMark] : [],
        })}
      </div>
      <div style="flex: 1;">
        <h4>${nbText.clearSkyLabel}</h4>
        ${makeChoropleth({
          features: s11MapData,
          width: width / 2,
          height,
          fill: useRaw ? (d) => d.properties.clearSky : (d) => d.properties.clearSkyClass,
          color: useRaw
            ? {
                type: "linear",
                domain: d3.extent(s11MapData.features, (d) => d.properties.clearSky),
                scheme: "YlGnBu",
                label: "Coverage",
              }
            : classificationScale("cloud-coverage_meanannual", ["#fee5d9", "#fcae91", "#fb6a4a"]),
          channels: {
            region: {
              label: "Region",
              value: (d) => d.properties.regionName,
            },
            clearSky: {
              label: nbText.clearSkyLabel,
              value: (d) => fmt(d.properties.clearSky, 3),
            },
            class: {
              label: "Class",
              value: (d) => d.properties.clearSkyClass,
            },
          },
          tooltip: {
            region: true,
            clearSky: true,
            class: true,
          },
          adminHighlight,
        })}
      </div>
    </div>`;
  } else {
    // Table view
    const tableData = filteredData.map((d) => ({
      "Admin Name": adminDisplayName(d),
      ...indicatorColumns(d, S11_INDICATORS),
    }));

    return filterableDataTable(tableData, {
      sort: "Admin Name",
    });
  }
}

// Download buttons for Section 1.1
inputTemplate({ gap: "0.5rem" })([
  ...(s11ViewType === "Map"
    ? [
        downloadPngButton(s11Figure, {
          filename: "cis_observation_capacity",
          label: nbText.downloadFigure,
        }),
      ]
    : []),
  downloadCsvButton(
    filteredData.map((d) => ({
      // This export used to ship with no column identifying the region at all.
      "Admin Name": adminDisplayName(d),
      ...indicatorColumns(d, S11_INDICATORS, { format: false }),
    })),
    { filename: "cis_observation_capacity", label: nbText.downloadLabel }
  ),
])

// Section 1.1 Dynamic Insight

s11Insight = {
  const insightData = onlySelectedAtLevel(filteredData);
  
  const avgWeatherStation = d3.mean(insightData, d => d["wstation_density"]);
  const avgClearSky = d3.mean(insightData, d => d["cloud-coverage_meanannual"]);
  
  const wsClass = classificationBand(classifyThreshold("wstation_density", avgWeatherStation));
  const ccClass = classificationBand(classifyThreshold("cloud-coverage_meanannual", avgClearSky));
  
  // Without the first arm an all-missing selection reported "moderate capacity".
  const capacity =
    wsClass === "no data" || ccClass === "no data"
      ? "no data"
      : wsClass === "high" && ccClass === "high"
        ? "high"
        : wsClass === "low" || ccClass === "low"
          ? "low"
          : "moderate";
  
  return tmpl(nbText.insights.stationDensity, {
    area: breadcrumb,
    density: avgWeatherStation?.toFixed(3),
    clearSky: avgClearSky?.toFixed(3),
    capacity,
  });
}

How consistent is weather data?Quelle est la cohérence des données météorologiques?

Reliable climate information services also depend on consistent satellite data products. This section shows how different satellite rainfall products capture similar patterns of climate variability, which is an indication of trustworthy, well-calibrated observational models. Here, we evaluate the alignment of satellite climate datasets align with each other in Africa. Consistency across data sources reflects observation density and effectiveness of satellite retrieval algorithms. Data sources evaluated: CHIRPS, AgERA5, IMERG, and MSWEP. The consistency level ranges from 0 (no agreement) to 4 (agreement across all evaluated data sources).

Des services d’information climatique fiables reposent également sur des produits de données satellitaires cohérents. Cette section montre dans quelle mesure différents produits satellitaires de précipitations reproduisent des schémas similaires de variabilité climatique, ce qui constitue un indicateur de modèles d’observation fiables et bien calibrés. Nous évaluons ici le degré de concordance entre les jeux de données climatiques satellitaires en Afrique. La cohérence entre les sources de données reflète à la fois la densité des observations et l’efficacité des algorithmes de restitution satellitaire. Sources de données évaluées : CHIRPS, AgERA5, IMERG et MSWEP. Le niveau de cohérence varie de 0 (absence d’accord) à 4 (accord entre toutes les sources de données évaluées).

How to interpret precipitation agreementComment interpréter l’accord sur les précipitations

Agreement score (0–4) — Counts how many of the four precipitation products meet the consistency criterion for an area. A score of 4 means all four agree on the broad pattern of precipitation variability; 0 means none meet the criterion.

What agreement means — Higher agreement gives more confidence that the pattern is not unique to one product. It does not prove that the estimated rainfall amount is correct: products can agree while sharing biases, especially where ground observations are sparse.

Score d’accord (0–4) — Compte le nombre de produits, parmi les quatre, qui satisfont au critère de cohérence pour un territoire. Un score de 4 signifie que les quatre produits s’accordent sur le profil général de variabilité des précipitations ; 0 signifie qu’aucun ne satisfait au critère.

Ce que signifie l’accord — Un accord plus élevé renforce la confiance dans le fait que le profil observé n’est pas propre à un seul produit. Il ne prouve pas que la quantité de pluie estimée est exacte : plusieurs produits peuvent partager les mêmes biais, notamment lorsque les observations au sol sont rares.

adminControls([0, 1, 2])

viewof s12ViewType = Inputs.radio(["Map", "Table"], {
  label: nbText.viewTypeLabel,
  value: "Map",
})

viewof s12MapMode = Inputs.radio(["Raw values", "Classified"], {
  label: nbText.mapModeLabel,
  value: "Raw values",
})

// Prepare data for Section 1.2 map
s12MapData = {
  const features = buildLevelFeatures((d) => {
    const precip = d ? parseFloat(d["cv-precipitation_agreement"]) : null;
    return {
      precipAgreement: precip,
      precipAgreementClass: classifyThreshold("cv-precipitation_agreement", precip, d),
    };
  }).filter((f) => f.properties.precipAgreement != null);

  return { type: "FeatureCollection", features };
}

// Section 1.2 Map/Table
s12Figure = {
  if (s12ViewType === "Map") {
    const useRaw = s12MapMode === "Raw values";
    return makeChoropleth({
      features: s12MapData,
      width: width,
      height: 600,
      fill: useRaw ? (d) => d.properties.precipAgreement : (d) => d.properties.precipAgreementClass,
      color: useRaw
        ? {
            type: "linear",
            domain: d3.extent(s12MapData.features, (d) => d.properties.precipAgreement),
            scheme: "Viridis",
            label: "Agreement",
          }
        : classificationScale("cv-precipitation_agreement", [
            "#fff5eb",
            "#fdd0a2",
            "#fdae6b",
            "#e6550d",
            "#a63603",
          ]),
      channels: {
        region: {
          label: "Region",
          value: (d) => d.properties.regionName,
        },
        satelliteAgreement: {
          label: "Satellite Agreement",
          value: (d) => fmt(d.properties.precipAgreement, 1),
        },
        class: {
          label: "Class",
          value: (d) => d.properties.precipAgreementClass,
        },
      },
      tooltip: {
        region: true,
        satelliteAgreement: true,
        class: true,
      },
      adminHighlight,
    });
  } else {
    const tableData = filteredData.map((d) => ({
      "Admin Name": adminDisplayName(d),
      ...indicatorColumns(d, ["cv-precipitation_agreement"]),
    }));

    return filterableDataTable(tableData, {
      sort: "Admin Name",
    });
  }
}

// Download buttons for Section 1.2
inputTemplate({ gap: "0.5rem" })([
  ...(s12ViewType === "Map"
    ? [
        downloadPngButton(s12Figure, {
          filename: "cis_precipitation_agreement",
          label: nbText.downloadFigure,
        }),
      ]
    : []),
  downloadCsvButton(
    filteredData.map((d) => {
      const adminName = adminDisplayName(d);
      return {
        "Admin Name": adminName,
        "Satellite Agreement": parseFloat(d["cv-precipitation_agreement"]),
        Classification: classifyThreshold(
          "cv-precipitation_agreement",
          d["cv-precipitation_agreement"],
          d
        ),
      };
    }),
    { filename: "cis_precipitation_agreement", label: nbText.downloadLabel }
  ),
])

// Section 1.2 Dynamic Insight
s12Insight = {
  const insightData = onlySelectedAtLevel(filteredData);
  
  const avgAgreement = d3.mean(insightData, d => parseFloat(d["cv-precipitation_agreement"]));
  
  let agreementLevel = "no";
  if (avgAgreement >= 3) agreementLevel = "high";
  else if (avgAgreement >= 1) agreementLevel = "partial";
  
  return tmpl(nbText.insights.dataAgreement, {
    area: breadcrumb,
    agreement: avgAgreement?.toFixed(2),
    level: agreementLevel,
  });
}

---

How reliable are weather predictions?Quelle est la fiabilité des prévisions météorologiques?

Accurate forecasts turn climate observations into actionable insights. We show the strengths of prediction models for both short-term (1 – 2 months) and long-term (11 – 12 months) forecasts. To this end, we computed a composite index of the Ranked Probability Skill Score (RPSS) for precipitation data across six climate models. By varying the lead time from 1 to 12 months, we identified that better performance occurs during months 1-2 and 11-12. Higher values indicate stronger weather forecasts over short and/or long time periods. Additionally, good short-term forecasts help decision-makers with planting, spraying, irrigation, and crop scheduling decisions. Meanwhile, good long-term forecasts support decisions relating to the next rainfall season, such as credit, insurance, infrastructure planning, and variety selection.

Des prévisions précises transforment les observations climatiques en informations exploitables pour la prise de décision. Nous présentons les performances des modèles de prévision à court terme (1 à 2 mois) et à long terme (11 à 12 mois). À cette fin, nous avons calculé un indice composite basé sur le Ranked Probability Skill Score (RPSS) appliqué aux données de précipitations issues de six modèles climatiques. En faisant varier l’horizon de prévision de 1 à 12 mois, nous avons constaté de meilleures performances aux échéances de 1 à 2 mois et de 11 à 12 mois. Des valeurs plus élevées indiquent des prévisions météorologiques plus performantes à court et/ou à long terme. Par ailleurs, des prévisions fiables à court terme aident les décideurs dans les choix liés aux semis, aux traitements phytosanitaires, à l’irrigation et à la planification des cultures. À l’inverse, des prévisions fiables à long terme soutiennent les décisions relatives à la prochaine saison des pluies, telles que l’accès au crédit, l’assurance, la planification des infrastructures et le choix des variétés.

How to interpret forecast skillComment interpréter la performance des prévisions

Short-term skill — Summarizes precipitation forecast performance at 1–2 month lead times. Higher values indicate more useful information for near-term seasonal decisions.

Long-term skill — Summarizes performance at 11–12 month lead times. Higher values suggest more useful early information for planning and preparedness, but not certainty about a particular season.

RPSS and the displayed index — RPSS compares probabilistic forecasts with a reference, usually climatology: positive is better than the reference, zero is equivalent, and negative is worse. The notebook displays an index combined across six models, so use its higher and lower values for comparison rather than applying raw RPSS cut-offs directly.

Performance à court terme — Résume la performance des prévisions de précipitations à un horizon de 1 à 2 mois. Une valeur élevée indique une information plus utile pour les décisions saisonnières à court terme.

Performance à long terme — Résume la performance à un horizon de 11 à 12 mois. Une valeur élevée suggère une information précoce plus utile pour la planification et la préparation, sans pour autant apporter de certitude sur une saison donnée.

Le RPSS et l’indice affiché — Le RPSS compare des prévisions probabilistes à une référence, généralement la climatologie : une valeur positive est meilleure que la référence, zéro est équivalent et une valeur négative est moins bonne. Le notebook affiche un indice combiné pour six modèles ; il convient donc d’utiliser les valeurs élevées et faibles à des fins de comparaison plutôt que d’appliquer directement les seuils du RPSS brut.

adminControls([0, 1, 2])

viewof s13ViewType = Inputs.radio(["Map", "Chart", "Table"], {
  label: nbText.viewTypeLabel,
  value: "Map",
})

viewof s13SortBy = {
  if (s13ViewType === "Map") {
    const input = Inputs.radio(["Short-term skill", "Long-term skill", "Difference (Δ)"], {
      label: nbText.sortByLabel,
      value: "Short-term skill",
    });
    input.style.display = "none";
    return input;
  }
  return Inputs.radio(["Short-term skill", "Long-term skill", "Difference (Δ)"], {
    label: nbText.sortByLabel,
    value: "Short-term skill",
  });
}

// Section 1.3 Map Data Preparation
s13MapData = {
  const features = buildLevelFeatures((d) => {
    const shortTerm = d ? d["short-term_frcst_skill"] : null;
    const longTerm = d ? d["seasonal_frcst_skill"] : null;
    return {
      shortTerm,
      longTerm,
      delta: shortTerm != null && longTerm != null ? longTerm - shortTerm : null,
    };
  }).filter((f) => f.properties.shortTerm != null || f.properties.longTerm != null);

  return { type: "FeatureCollection", features };
}

// Prepare data for Section 1.3
s13Data = {
  const data = filteredData
    .map((d) => {
      const shortTerm = d["short-term_frcst_skill"];
      const longTerm = d["seasonal_frcst_skill"];
      const classification = classifyForecastSkill(shortTerm, longTerm);

      const adminName = adminDisplayName(d);

      return {
        admin: adminName,
        shortTerm: shortTerm,
        longTerm: longTerm,
        delta: shortTerm != null && longTerm != null ? longTerm - shortTerm : null,
        interpretation: classification.interpretation,
        implication: classification.implication,
      };
    })
    .filter((d) => d.shortTerm != null || d.longTerm != null);

  const sortKey =
    { "Short-term skill": "shortTerm", "Long-term skill": "longTerm" }[s13SortBy] ?? "delta";
  return data.sort(descendingDefined((d) => d[sortKey]));
}

// Section 1.3 Map/Chart/Table
s13Figure = {
  if (s13ViewType === "Map") {
    // Three metrics over the same features.
    const panels = [
      {
        key: "shortTerm",
        title: "Short-term Forecast Skill (1–2 mo)",
        label: "Short-term",
        color: { type: "linear", domain: [0, 1], scheme: "RdYlGn", label: "RPSS" },
      },
      {
        key: "longTerm",
        title: "Long-term Forecast Skill (11–12 mo)",
        label: "Long-term",
        color: { type: "linear", domain: [0, 1], scheme: "RdYlGn", label: "RPSS" },
      },
      {
        key: "delta",
        title: "Difference (Long − Short)",
        label: "Difference",
        color: {
          type: "diverging",
          domain: [-0.5, 0.5],
          scheme: "RdBu",
          label: "Δ (Long − Short)",
        },
      },
    ];

    return htl.html`<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 20px;">
      ${panels.map(
        ({ key, title, label, color }) => htl.html`<div style="text-align: center;">
        <h4 style="margin-bottom: 10px; font-size: 14px;">${title}</h4>
        ${makeChoropleth({
          features: s13MapData,
          width: 400,
          height: 450,
          fill: (d) => d.properties[key],
          color,
          channels: {
            region: { label: "Region", value: (d) => d.properties.regionName },
            [key]: { label, value: (d) => fmt(d.properties[key], 3) },
          },
          tooltip: { region: true, [key]: true },
          adminHighlight,
        })}
      </div>`
      )}
    </div>`;
  } else if (s13ViewType === "Chart") {
    const data = s13Data
      .map((d) => {
        const short = d.shortTerm != null ? parseFloat(d.shortTerm) : null;
        const long = d.longTerm != null ? parseFloat(d.longTerm) : null;
        const delta = short != null && long != null ? long - short : null;

        return {
          country: d.admin,
          short: short,
          long: long,
          delta: delta,
        };
      })
      .filter((d) => d.short != null || d.long != null);

    // Descending on the selected metric; delta sorts most positive to most negative.
    const sortKey =
      { "Short-term skill": "short", "Long-term skill": "long" }[s13SortBy] ?? "delta";
    const sorted = data.sort(descendingDefined((d) => d[sortKey]));

    // Flatten each geography into three forecast metrics.
    const longData = sorted
      .flatMap((d) => [
        {
          country: d.country,
          metric: "Short-term RPSS (1–2 mo)",
          value: d.short,
        },
        {
          country: d.country,
          metric: "Long-term RPSS (11–12 mo)",
          value: d.long,
        },
        {
          country: d.country,
          metric: "Δ (Long − Short)",
          value: d.delta,
        },
      ])
      .filter((d) => d.value != null);

    // Reserve a 20px band per geography plus axes.
    const marginTop = 40;
    const marginBottom = 60;
    const height = Math.max(400, sorted.length * 20 + marginTop + marginBottom);

    const countryOrder = sorted.map((d) => d.country);
    const axis = labelAxis(countryOrder, width);

    // Render every band; the chart is already behind a view toggle.
    return Plot.plot({
      style: chartStyle,
      marginLeft: axis.marginLeft,
      marginTop: marginTop,
      marginBottom: marginBottom,
      width: width,
      height: height,
      y: { axis: null },
      x: {
        grid: true,
        axis: "top",
        label: "RPSS or Δ",
      },
      fy: {
        padding: 0, // Set padding to 0 to reduce spacing between bars
        label: null,
        domain: countryOrder, // Use pre-sorted order to maintain sort
        tickFormat: axis.tickFormat,
      },
      color: {
        domain: ["Short-term RPSS (1–2 mo)", "Long-term RPSS (11–12 mo)", "Δ (Long − Short)"],
        range: ["#4477AA", "#EE6677", "#228833"],
        legend: true,
      },
      marks: [
        Plot.axisX({
          anchor: "bottom",
          label: "RPSS or Δ",
        }),
        Plot.barX(longData, {
          x: "value",
          y: "metric",
          fill: "metric",
          fy: "country",
          sort: {
            y: null,
            color: null,
          },
          tip: true,
        }),
        Plot.ruleX([0], { stroke: "black" }),
      ],
    });
  } else {
    const tableData = s13Data.map((d) => ({
      "Admin Name": d.admin,
      "Short-term": fmt(d.shortTerm, 3),
      "Long-term": fmt(d.longTerm, 3),
      Delta: fmt(d.delta, 3),
      Interpretation: d.interpretation,
      "CIS Implication": d.implication,
    }));

    return filterableDataTable(tableData, {
      rows: 20,
    });
  }
}

// Download buttons for Section 1.3
inputTemplate({ gap: "0.5rem" })([
  ...(s13ViewType === "Table"
    ? []
    : [
        downloadPngButton(s13Figure, {
          filename: "cis_forecast_skill",
          label: nbText.downloadFigure,
        }),
      ]),
  downloadCsvButton(
    s13Data.map((d) => ({
      "Admin Name": d.admin,
      "Short-term Skill": d.shortTerm,
      "Long-term Skill": d.longTerm,
      Delta: d.delta,
      Interpretation: d.interpretation,
      "CIS Implication": d.implication,
    })),
    { filename: "cis_forecast_skill", label: nbText.downloadLabel }
  ),
])

// Section 1.3 Dynamic Insight
s13Insight = {
  const insightData = onlySelectedAtLevel(filteredData);
  
  const avgShortTerm = d3.mean(insightData, d => d["short-term_frcst_skill"]);
  const avgLongTerm = d3.mean(insightData, d => d["seasonal_frcst_skill"]);
  
  const classification = classifyForecastSkill(avgShortTerm, avgLongTerm);
  
  return tmpl(nbText.insights.forecastSkill, {
    area: breadcrumb,
    shortTerm: avgShortTerm?.toFixed(3),
    longTerm: avgLongTerm?.toFixed(3),
    interpretation: classification.interpretation.toLowerCase(),
  });
}

Climate Readiness IndexIndice de préparation climatique

To provide a composite measure of climate information services’ data and forecast capacity, we defined the CIS Data and Forecast Capacity Index as the geometric average of the following indices: weather station density index, satellite precipitation variability agreement, short-term and long-term forecast skill. High values indicate places where CIS products are more likely to be supported by better data and skill conditions, i.e. high technical enabling conditions for CIS products. Conversely, low values suggest potential technical bottlenecks, such as, sparse stations, low satellite agreement on precipitation variability, or low forecast skill at short or long lead periods.

Index = f(weather-stations density index, satellite-precipitation variability agreement, short-term and long-term forecast performance indices).

Geometric average among the normalized indices: weather-stations density index, variability agreement on satellite precipitation, short-term (1-2 months) forecast skill, and long-term (11-12 months) forecast skill. Classification will follow percentile-based method proposed in 1.1.

We provided an index of CIS technical enabling conditions (monitoring and forecast skill), not a measure of institutional or operational readiness.

Afin de fournir une mesure composite de la capacité en données et en prévisions des services d’information climatique (CIS), nous avons défini l’Indice de capacité des données et des prévisions des CIS comme la moyenne géométrique des indices suivants : indice de densité des stations météorologiques, concordance de la variabilité des précipitations satellitaires, et performance des prévisions à court et à long terme. Des valeurs élevées indiquent des zones où les produits CIS sont plus susceptibles d’être soutenus par de meilleures conditions de données et de performance des prévisions, c’est-à-dire des conditions techniques favorables au déploiement des CIS. À l’inverse, des valeurs faibles suggèrent des contraintes techniques potentielles, telles que des réseaux de stations clairsemés, une faible concordance entre les produits satellitaires sur la variabilité des précipitations, ou une faible performance des prévisions à court ou à long horizon.

Données : Indice de capacité des données et des prévisions des CIS : Indice = f(indice de densité des stations météorologiques, concordance de la variabilité des précipitations satellitaires, indices de performance des prévisions à court et à long terme).

Moyenne géométrique des indices normalisés : indice de densité des stations météorologiques, concordance de la variabilité des précipitations satellitaires, performance des prévisions à court terme (1 à 2 mois) et à long terme (11 à 12 mois). La classification suit la méthode basée sur les percentiles proposée en section 1.1.

Nous fournissons un indice des conditions techniques favorables aux CIS (capacités d’observation et de prévision), et non une mesure de la préparation institutionnelle ou opérationnelle.

How to interpret the capacity indexComment interpréter l’indice de capacité

What it combines — The index is the geometric mean of four normalized components: weather-station density, precipitation-product agreement, short-term forecast skill, and long-term forecast skill.

Reading the score — Higher values indicate stronger technical conditions for producing climate information. Because the index uses a geometric mean, one weak component pulls down the overall score; a high value requires reasonably balanced performance across all four.

What it leaves out — The index does not assess staffing, funding, governance, advisory quality, trust, or whether information reaches farmers. Its classes compare places at the same administrative level across Sub-Saharan Africa.

Ce qu’il combine — L’indice est la moyenne géométrique de quatre composantes normalisées : densité des stations météorologiques, accord entre les produits de précipitations, performance des prévisions à court terme et performance des prévisions à long terme.

Lecture du score — Une valeur élevée indique de meilleures conditions techniques pour produire de l’information climatique. Comme l’indice utilise une moyenne géométrique, une composante faible fait baisser le score global ; une valeur élevée exige donc des résultats relativement équilibrés pour les quatre composantes.

Ce qu’il ne couvre pas — L’indice n’évalue ni les effectifs, ni le financement, ni la gouvernance, ni la qualité du conseil, ni la confiance, ni la capacité de l’information à atteindre les agriculteurs. Ses classes comparent les territoires au même niveau administratif en Afrique subsaharienne.

adminControls([0, 1, 2])

// Section 1.4 Controls
viewof s14ViewType = Inputs.radio(["Map", "Table"], {
  label: nbText.viewTypeLabel,
  value: "Map",
})

// Prepare data for Section 1.4
s14MapData = {
  const features = buildLevelFeatures((d) => ({
    cisReadiness: d?.["cis_readiness_index"],
    cisReadinessClass: d
      ? classifyThreshold("cis_readiness_index", d["cis_readiness_index"], d)
      : "No data",
    weatherStation: d?.["wstation_density"],
    weatherStationClass: d
      ? classifyThreshold("wstation_density", d["wstation_density"], d)
      : "No data",
    clearSky: d?.["cloud-coverage_meanannual"],
    clearSkyClass: d
      ? classifyThreshold("cloud-coverage_meanannual", d["cloud-coverage_meanannual"], d)
      : "No data",
    precipAgreement: d ? parseFloat(d["cv-precipitation_agreement"]) : null,
    precipAgreementClass: d
      ? classifyThreshold("cv-precipitation_agreement", d["cv-precipitation_agreement"], d)
      : "No data",
    shortTerm: d?.["short-term_frcst_skill"],
    longTerm: d?.["seasonal_frcst_skill"],
  })).filter((f) => f.properties.cisReadiness != null);

  return { type: "FeatureCollection", features };
}

// Section 1.4 Visualization
s14Figure = {
  if (s14ViewType === "Map") {
    return makeChoropleth({
      features: s14MapData,
      width: width,
      height: 600,
      fill: (d) => d.properties.cisReadiness,
      color: {
        type: "linear",
        domain: d3.extent(s14MapData.features, (d) => d.properties.cisReadiness),
        scheme: "RdYlGn",
        label: "CIS Readiness Index",
      },
      channels: {
        region: {
          label: "Region",
          value: (d) => d.properties.regionName,
        },
        cisReadiness: {
          label: "CIS Readiness",
          value: (d) =>
            d.properties.cisReadiness != null
              ? `${d.properties.cisReadiness.toFixed(3)} (Relative to SSA)`
              : "N/A",
        },
        class: {
          label: "Classification",
          value: (d) => d.properties.cisReadinessClass,
        },
        weatherStation: {
          label: "Weather Stn",
          value: (d) => d.properties.weatherStationClass,
        },
        clearSky: {
          label: nbText.clearSkyLabel,
          value: (d) => d.properties.clearSkyClass,
        },
        precipAgreement: {
          label: "Precip Agree",
          value: (d) => d.properties.precipAgreementClass,
        },
      },
      tooltip: {
        region: true,
        cisReadiness: true,
        class: true,
        weatherStation: true,
        clearSky: true,
        precipAgreement: true,
      },
      baseMarkOptions: {
        fillOpacity: 1,
      },
      adminHighlight,
    });
  } else {
    const tableData = filteredData
      .filter((d) => d["cis_readiness_index"] != null)
      .map((d) => ({
        "Admin Name": adminDisplayName(d),
        ...indicatorColumns(d, [
          "cis_readiness_index",
          "wstation_density",
          "cloud-coverage_meanannual",
          "cv-precipitation_agreement",
        ]),
        ...indicatorColumns(d, ["short-term_frcst_skill", "seasonal_frcst_skill"], {
          withClass: false,
        }),
      }));

    return filterableDataTable(tableData, {
      // TODO: Why this tabe go ... when rest horizontal scroll
      sort: "CIS Readiness (Raw)",
      reverse: true,
    });
  }
}

// Download buttons for Section 1.4
inputTemplate({ gap: "0.5rem" })([
  ...(s14ViewType === "Map"
    ? [
        downloadPngButton(s14Figure, {
          filename: "cis_readiness_index",
          label: nbText.downloadFigure,
        }),
      ]
    : []),
  downloadCsvButton(
    filteredData.map((d) => {
      const adminName = adminDisplayName(d);
      return {
        "Admin Name": adminName,
        "CIS Readiness Index": d["cis_readiness_index"],
        "Weather Station Density": d["wstation_density"],
        "Clear-Sky Availability": d["cloud-coverage_meanannual"],
        "Precipitation Agreement": parseFloat(d["cv-precipitation_agreement"]),
        "Short-term Forecast Skill": d["short-term_frcst_skill"],
        "Long-term Forecast Skill": d["seasonal_frcst_skill"],
      };
    }),
    { filename: "cis_readiness_index", label: nbText.downloadLabel }
  ),
])

// Section 1.4 Dynamic Insight
s14Insight = {
  const insightData = onlySelectedAtLevel(filteredData);
  
  const avgReadiness = d3.mean(insightData, d => d["cis_readiness_index"]);
  const readinessClass = classifyThreshold("cis_readiness_index", avgReadiness).toLowerCase();
  
  return tmpl(nbText.insights.readinessIndex, {
    area: breadcrumb,
    readiness: avgReadiness?.toFixed(3),
    class: readinessClass,
  });
}

Where does CIS readiness intersect with climate risk?Où la préparation CIS croise-t-elle le risque climatique?

This section analyzes areas where strong climate information services capacity overlaps with high climate hazard exposure. Priority zones for climate services investment are areas with both high CIS Data & Forecast Capacity and high hazard exposure, as they have the infrastructure to deliver reliable information and the climate risks that make such information valuable for adaptation.

Cette section analyse les zones où une forte capacité des services d’information climatique (CIS) coïncide avec une exposition élevée aux aléas climatiques. Les zones prioritaires pour les investissements dans les services climatiques sont celles qui présentent à la fois une forte capacité en données et en prévisions des CIS et une forte exposition aux aléas, car elles disposent de l’infrastructure nécessaire pour fournir des informations fiables ainsi que de risques climatiques qui rendent ces informations particulièrement utiles pour l’adaptation.

adminControls([0, 1, 2])

S2_HAZARDS = new Object({
  drought: {
    code: "NDD-mean",
    column: "dryDays",
    breaks: [15, 20],
    label: nbText.s2HazardDrought,
    mapTitle: nbText.s2MapTitleDrought,
    severity: nbText.s2HazardDroughtSeverity,
  },
  waterlogging: {
    code: "NDWL0-mean",
    column: "waterloggingDays",
    breaks: [2, 5],
    label: nbText.s2HazardWaterlogging,
    mapTitle: nbText.s2MapTitleWaterlogging,
    severity: nbText.s2HazardWaterloggingSeverity,
  },
})

// Fetch the small hazard slice once; filteredData already scopes the later join.
hazardByAdmin = {
  const bind = createSqlBindings();
  const rows = await db.query(
    `
    SELECT
      admin0_name,
      admin1_name,
      admin2_name,
      hazard,
      value
    FROM hazard_data
    WHERE iso3 IN (${bind.list([...iso3Set])})
      AND hazard IN (${bind.list(Object.values(S2_HAZARDS).map((h) => h.code))})
      AND stat = ${bind.value("mean")}
  `,
    bind.params
  );

  // Pivot mean-only hazard rows into a direct admin-unit lookup.
  const byAdmin = new Map();
  for (const row of rows) {
    const key = `${row.admin0_name}|${row.admin1_name}|${row.admin2_name}`;
    const unit = byAdmin.get(key) ?? {};
    const hazard = Object.values(S2_HAZARDS).find((h) => h.code === row.hazard);
    if (hazard) unit[hazard.column] = parseFloat(row.value);
    byAdmin.set(key, unit);
  }
  return byAdmin;
}

combinedData = {
  const hazardColumns = Object.values(S2_HAZARDS).map((h) => h.column);

  return filteredData
    .map((cis) => {
      const hazard =
        hazardByAdmin.get(`${cis.admin0_name}|${cis.admin1_name}|${cis.admin2_name}`) ?? {};

      return {
        ...cis,
        ...Object.fromEntries(hazardColumns.map((col) => [col, hazard[col] ?? null])),
      };
    })
    .filter((d) => hazardColumns.some((col) => d[col] !== null));
}

// Classify readiness × hazard on the 3×3 palette; missing hazards remain no-data.

function bivariateClassify(readiness, hazardValue, hazardKey, readinessLevel = currentAdminLevel) {

// Comparisons against NaN are all false, so missing values have to be caught
// before the ladder — otherwise they fall through to the most severe class.
  const readinessClass = classifyThreshold("cis_readiness_index", readiness, readinessLevel);

  const numeric = Number(hazardValue);
  const [moderate, severe] = S2_HAZARDS[hazardKey].breaks;
  const hazardClass =
    hazardValue == null || Number.isNaN(numeric)
      ? "No data"
      : numeric < moderate
      ? "Low"
      : numeric < severe
      ? "Moderate"
      : "High";

  return {
    readinessClass,
    hazardClass,
    bivariateClass: hazardClass === "No data" ? "No data" : `${readinessClass} × ${hazardClass}`,
  };
}

// Colour only. What each cell means, and how the cells rank, is policy: see
// bivariatePriority in data/cis/thresholds.json and the s2Priority* strings.
// x = readiness (purple), y = hazard (green).
bivariatePalette = bivariatePalettes.purpleGreen

// The maps still fill by the bivariateClass string, and thresholds.json ranks by
// the same key, so name the palette cells for them. Indices stay the source of
// truth: nothing here is joined on a translated word.
BIVARIATE_CLASSES = ["Low", "Moderate", "High"]

bivariateColors = Object.fromEntries([
  ...bivariatePalette.map((cell) => [
    `${BIVARIATE_CLASSES[cell.x]} × ${BIVARIATE_CLASSES[cell.y]}`,
    cell.color,
  ]),
  // Unfilled rather than grey: the palette's own low-low cell is #e8e8e8, so a
  // grey no-data class would be indistinguishable from "low readiness, low
  // hazard". Its outline below is what keeps the unit visible.
  ["No data", "#fff"],
])

viewof s2HazardType = Inputs.radio(["drought", "waterlogging"], {
  label: nbText.s2HazardSelector,
  value: "drought",
  format: (d) => S2_HAZARDS[d].label,
})

viewof s2ViewToggle = Inputs.radio(["map", "table"], {
  label: nbText.s2ViewToggle,
  value: "map",
  format: (d) => (d === "map" ? nbText.s2ViewMap : nbText.s2ViewTable),
})

s2ProcessedData = {
  const hazardColumn = S2_HAZARDS[s2HazardType].column;

  return combinedData
    .filter((d) => d.cis_readiness_index != null && d[hazardColumn] !== null)
    .map((d) => {
      const classified = bivariateClassify(d.cis_readiness_index, d[hazardColumn], s2HazardType, d);

      return {
        ...d,
        hazardValue: d[hazardColumn],
        ...classified,
      };
    });
}

s2MapData = {
  const level = currentAdminLevel; //TODO: This filtering has to go / be re-used across notebook

  if (level === 0) {
    const grouped = d3.group(s2ProcessedData, (d) => d.gaul0_code);
    return Array.from(grouped.values()).map((group) => {
      const first = group[0];
      const avgReadiness = d3.mean(group, (d) => d.cis_readiness_index);
      const avgHazard = d3.mean(group, (d) => d.hazardValue);
      const classified = bivariateClassify(avgReadiness, avgHazard, s2HazardType, 0);

      return {
        admin0_name: first.admin0_name,
        iso3: first.iso3,
        gaul0_code: first.gaul0_code,
        cis_readiness_index: avgReadiness,
        hazardValue: avgHazard,
        ...classified,
      };
    });
  } else if (level === 1) {
    const grouped = d3.group(s2ProcessedData, (d) => d.gaul1_code);
    return Array.from(grouped.values()).map((group) => {
      const first = group[0];
      const avgReadiness = d3.mean(group, (d) => d.cis_readiness_index);
      const avgHazard = d3.mean(group, (d) => d.hazardValue);
      const classified = bivariateClassify(avgReadiness, avgHazard, s2HazardType, 1);

      return {
        admin0_name: first.admin0_name,
        admin1_name: first.admin1_name,
        iso3: first.iso3,
        gaul0_code: first.gaul0_code,
        gaul1_code: first.gaul1_code,
        cis_readiness_index: avgReadiness,
        hazardValue: avgHazard,
        ...classified,
      };
    });
  } else {
    return s2ProcessedData;
  }
}

// Join at the resolved admin level and retain unmatched no-data features.
s2GeoData = ({
  type: "FeatureCollection",
  features: buildLevelFeatures((row) => ({ ...(row || {}), hasData: Boolean(row) }), s2MapData),
})

s2BivariateMap = {
  if (s2ViewToggle !== "map") return null;
  const hazardName = S2_HAZARDS[s2HazardType].label;

  return makeChoropleth({
    features: s2GeoData,
    width: 775,
    height: 610,
    projection: "mercator",
    fill: (d) => (d.properties.hasData ? d.properties.bivariateClass : "No data"),
    color: {
      type: "categorical",
      legend: false,
      // Insertion order of the palette is the class order the legend expects.
      domain: Object.keys(bivariateColors),
      range: Object.values(bivariateColors),
      label: "Bivariate Class",
    },
    channels: {
      region: {
        label: "Region",
        value: (d) =>
          currentAdminLevel === 0
            ? d.properties.admin0_name
            : currentAdminLevel === 1
            ? `${d.properties.admin1_name}, ${d.properties.admin0_name}`
            : `${d.properties.admin2_name}, ${d.properties.admin1_name}`,
      },
      readiness: {
        label: "Readiness (0-1)",
        value: (d) => fmt(d.properties.cis_readiness_index, 2),
      },
      hazard: {
        label: hazardName,
        value: (d) => fmt(d.properties.hazardValue, 1),
      },
      bivariateClass: {
        label: "Bivariate class",
        value: (d) => d.properties.bivariateClass || "N/A",
      },
    },
    tooltip: {
      region: true,
      readiness: true,
      hazard: true,
      bivariateClass: true,
    },
    baseMarkOptions: {
      stroke: (d) => (d.properties.hasData ? "#fff" : "#bbb"),
    },
    adminHighlight,
  });
}

s2Figure = {
  if (s2ViewToggle === "map") {
    return bivariateMapWithLegend(s2BivariateMap, {
      ...CIS_BIVARIATE_LEGEND,
      yLabel: S2_HAZARDS[s2HazardType].severity,
    });
  } else {
    const hazardName = S2_HAZARDS[s2HazardType].label;

    const tableData = s2MapData.map((d) => {
      const adminName = adminDisplayName(d);

      // Policy rankings come from thresholds.json; wording stays localized.
      // High readiness × high hazard ranks action potential, not warning severity.
      const priority = bivariatePriority[d.bivariateClass] ?? {
        rank: 0,
        textKey: "s2PriorityLow",
      };

      return {
        adminName: adminName,
        readinessRaw: d.cis_readiness_index,
        readinessClass: d.readinessClass,
        hazardRaw: d.hazardValue,
        hazardClass: d.hazardClass,
        bivariateClass: d.bivariateClass,
        priorityRank: priority.rank,
        priorityLevel: nbText[priority.textKey],
      };
    });

    return filterableDataTable(tableData, {
      columns: [
        "adminName",
        "readinessRaw",
        "readinessClass",
        "hazardRaw",
        "hazardClass",
        "priorityLevel",
      ],
      header: {
        adminName: "Admin Name",
        readinessRaw: "CIS Readiness",
        readinessClass: "Readiness Class",
        hazardRaw: hazardName,
        hazardClass: "Hazard Class",
        priorityLevel: nbText.s2PriorityColumn,
      },
      format: {
        readinessRaw: (d) => d.toFixed(2),
        hazardRaw: (d) => d.toFixed(1),
      },
      sort: "priorityRank",
      reverse: true,
    });
  }
}

// Download buttons for Section 2
inputTemplate({ gap: "0.5rem" })([
  ...(s2ViewToggle === "map"
    ? [
        downloadPngButton(s2Figure, {
          filename: `cis_hazard_intersection_${s2HazardType}_admin${currentAdminLevel}`,
          label: nbText.downloadFigure,
        }),
      ]
    : []),
  downloadCsvButton(
    s2MapData.map((d) => {
      const adminName = adminDisplayName(d);

      const hazardName = S2_HAZARDS[s2HazardType].label;

      return {
        "Admin Level": currentAdminLevel === 0 ? "0" : currentAdminLevel === 1 ? "1" : "2",
        "Admin Name": adminName,
        "CIS Readiness Raw": fmt(d.cis_readiness_index, 3),
        "CIS Readiness Class": d.readinessClass,
        [hazardName + " Raw"]: fmt(d.hazardValue, 1),
        [hazardName + " Class"]: d.hazardClass,
        "Bivariate Category": d.bivariateClass,
      };
    }),
    {
      filename: `cis_hazard_intersection_${s2HazardType}_admin${currentAdminLevel}`,
      label: nbText.downloadLabel,
    }
  ),
])

s2Insights = {
  const hazard = S2_HAZARDS[s2HazardType].label;
  const area = breadcrumb;
  const insightData = onlySelectedAtLevel(s2MapData);

  // Keep empty, zero-potential, and positive-potential messages distinct.
  const highHigh = insightData.filter((d) => d.bivariateClass === "High × High");
  const opportunity =
    insightData.length === 0
      ? tmpl(nbText.insights.s2NoData, { area })
      : highHigh.length === 0
      ? tmpl(nbText.insights.s2NoOpportunity, { area, hazard })
      : tmpl(nbText.insights.s2Opportunity, {
          area,
          hazard,
          percent: ((highHigh.length / insightData.length) * 100).toFixed(1),
        });

  // No high-hazard areas is different from a 0% readiness gap.
  const highHazard = insightData.filter((d) => d.hazardClass === "High");
  const lowReadiness = highHazard.filter((d) => d.readinessClass === "Low");
  const gap =
    highHazard.length === 0
      ? tmpl(nbText.insights.s2NoHighHazard, { area, hazard })
      : tmpl(nbText.insights.s2Gap, {
          hazard,
          percent: ((lowReadiness.length / highHazard.length) * 100).toFixed(1),
        });

  return html`
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
      <h4 style="margin-top: 0;">${nbText.s2InsightsHeading}</h4>
      <p style="margin: 10px 0;">
        <strong>${nbText.s2OpportunityLabel}:</strong> ${md([opportunity])}
      </p>
      <p style="margin: 10px 0;"><strong>${nbText.s2GapLabel}:</strong> ${md([gap])}</p>
    </div>
  `;
}

CIS ImplementationMise en œuvre du CIS

Technical capacity only matters where climate information can actually reach people. This section sets the CIS Readiness Index against digital and media access, to show where strong data and forecast capacity coincides with the infrastructure needed to deliver a service.

La capacité technique ne compte que là où l’information climatique peut réellement atteindre les personnes. Cette section met en regard l’indice de préparation CIS et l’accès au numérique et aux médias, afin de montrer où une forte capacité en données et en prévisions coïncide avec les infrastructures nécessaires à la fourniture d’un service.

Where can CIS reach users at scale?Où le CIS peut-il atteindre les utilisateurs à grande échelle?

In order to reach users, climate information services require delivery channels. While the technical capacity to produce relevant climate information has been evaluated, this section examines the intersection of strong CIS Data & Forecast Capacity intersects with digital and broadcast infrastructure. It identifies optimal zones for service delivery and pinpoints areas where limited connectivity.

Afin d’atteindre les utilisateurs, les services d’information climatique nécessitent des canaux de diffusion. Alors que la capacité technique à produire des informations climatiques pertinentes a été évaluée, cette section examine l’intersection entre une forte capacité en données et en prévisions des CIS et les infrastructures numériques et de diffusion. Elle identifie les zones optimales pour la fourniture de services et met en évidence les zones où la connectivité limitée constitue une contrainte.

// Access data stops at admin 1 (s3View), so no district control here. Omitting
// the level cannot affect the sections that do render it — the state is per level.
adminControls([0, 1])

s3AccessDataRaw = {
  const bind = createSqlBindings();
  const adminWhere = sqlAdminWhere({ admin0: selectedAdmin0, admin1: selectedAdmin1 }, bind, {
    maxLevel: 1,
    iso3: iso3Set,
  });

  return await db.query(
    `
    SELECT *
    FROM access_data
    WHERE ${adminWhere}
  `,
    bind.params
  );
}

// Access stops at admin 1; deeper selections highlight regions instead of filtering.
s3View = adminViewFor(1)

// Query readiness at the access level to avoid choosing an arbitrary district row.
s3Readiness = {
  const bind = createSqlBindings();
  const adminWhere = sqlAdminWhere({ admin0: selectedAdmin0, admin1: selectedAdmin1 }, bind, {
    maxLevel: 1,
    iso3: iso3Set,
  });

  return await db.query(`SELECT * FROM cis_data WHERE ${adminWhere}`, bind.params);
}

s3ReadinessByAdmin = new Map(s3Readiness.map((d) => [s3View.adminKey(d), d]))

section3Data = {
  return s3AccessDataRaw
    .map((access) => {
      const cis = s3ReadinessByAdmin.get(s3View.adminKey(access));
      if (!cis) return null;

      // Average available access indicators; preserve an all-missing row as null.
      const combined_access = d3.mean([access.tv, access.internet, access.cellphone]) ?? null;

      return {
        // Label at the resolved level so regions remain distinct.
        label: adminDisplayName(access, s3View.level),
        admin0_name: access.admin0_name,
        admin1_name: access.admin1_name,
        admin2_name: access.admin2_name,
        iso3: access.iso3,
        gaul0_code: access.gaul0_code,
        gaul1_code: access.gaul1_code,
        gaul2_code: access.gaul2_code,
        cis_readiness_index: cis.cis_readiness_index,
        tv_pct: access.tv,
        internet_pct: access.internet,
        cellphone_pct: access.cellphone,
        combined_pct: combined_access,
      };
    })
    .filter((d) => d !== null);
}

// Access Type Selector
viewof s3AccessType = Inputs.radio(["combined", "internet", "tv", "cellphone"], {
  label: nbText.s3AccessSelector,
  value: "combined",
  format: (x) => S3_ACCESS_TYPES[x].label,
})

viewof s3ViewType = Inputs.radio(["map", "dumbbell", "table"], {
  label: nbText.s3ViewToggle,
  value: "map",
  format: (x) =>
    x === "map" ? nbText.s3ViewMap : x === "dumbbell" ? nbText.s3ViewDumbbell : nbText.s3ViewTable,
})

// Map Type Toggle (Only shown when view type is map)
viewof s3MapType = {
  if (s3ViewType !== "map") {
    const input = Inputs.radio(["bivariate"], { label: "Map Type", value: "bivariate" });
    input.style.display = "none";
    return input;
  }
  return Inputs.radio(["bivariate", "univariate"], {
    label: "Map Type",
    value: "bivariate",
    format: (x) => (x === "bivariate" ? "Bivariate (Readiness × Access)" : "Access Distribution"),
  });
}

// Sort By Selector - only shown when view type is not "map"
viewof s3SortBy = {
  if (s3ViewType === "map") {
    // Return a hidden selector that maintains state but isn't displayed
    const input = Inputs.select(["readiness", "combined", "internet", "tv", "cellphone"], {
      label: nbText.s3SortBy,
      value: "readiness",
    });
    input.style.display = "none";
    return input;
  }

  return Inputs.select(["readiness", "combined", "internet", "tv", "cellphone"], {
    label: nbText.s3SortBy,
    value: "readiness",
    format: (x) => (x === "readiness" ? nbText.s3SortReadiness : S3_ACCESS_TYPES[x].label),
  });
}

S3_ACCESS_TYPES = new Object({
  combined: { pct: "combined_pct", label: nbText.s3AccessCombined },
  internet: { pct: "internet_pct", label: nbText.s3AccessInternet },
  tv: { pct: "tv_pct", label: nbText.s3AccessTV },
  cellphone: { pct: "cellphone_pct", label: nbText.s3AccessCellphone },
})

// Convert stored percentages to 0–1 only for readiness comparisons.
s3AccessNorm = (d, key = s3AccessType) => {
  const pct = d[S3_ACCESS_TYPES[key].pct];
  return pct == null || isNaN(pct) ? null : pct / 100;
}

s3CurrentAccessLabel = S3_ACCESS_TYPES[s3AccessType].label

s3AccessCutoffs = {
  const values = section3Data
    .map((d) => s3AccessNorm(d))
    .filter((v) => v !== null && !isNaN(v))
    .sort((a, b) => a - b);

  if (values.length === 0) {
    return { low: 0.33, moderate: 0.67 };
  }

  return {
    low: d3.quantile(values, 0.333),
    moderate: d3.quantile(values, 0.667),
  };
}

classifyS3Readiness = (value, rowOrLevel = s3View.level) =>
  classifyThreshold("cis_readiness_index", value, rowOrLevel)

function bivariateClassifyAccess(readiness, access, accessCutoffs, rowOrLevel = s3View.level) {

// Collapse any missing axis to the palette's single no-data key.
  const readinessClass = classifyS3Readiness(readiness, rowOrLevel);

  let accessClass;
  if (access === null || isNaN(access)) accessClass = "N/A";
  else if (access < accessCutoffs.low) accessClass = "Low";
  else if (access < accessCutoffs.moderate) accessClass = "Moderate";
  else accessClass = "High";

  const missing = accessClass === "N/A" || readinessClass === "No data";

  return {
    readinessClass,
    accessClass,
    bivariateClass: missing ? "N/A" : `${readinessClass} × ${accessClass}`,
  };
}

// Reuse Section 2's palette and add the missing-access key.
s3BivariateColors = ({ ...bivariateColors, "N/A": "#cccccc" })

s3ProcessedData = {
  return section3Data.map((d) => {
    const accessValue = s3AccessNorm(d);
    const classification = bivariateClassifyAccess(
      d.cis_readiness_index,
      accessValue,
      s3AccessCutoffs,
      d
    );

    return {
      ...d,
      accessValue,
      ...classification,
      // Needs both terms: subtracting a null readiness coerces it to 0 and reports
      // the access value itself as the gap.
      gap:
        Number.isFinite(accessValue) && Number.isFinite(d.cis_readiness_index)
          ? accessValue - d.cis_readiness_index
          : null,
    };
  });
}

s3SortedData = {
  if (!s3ProcessedData || s3ProcessedData.length === 0) {
    return [];
  }

  const data = [...s3ProcessedData];

  const value =
    s3SortBy === "readiness" ? (d) => d.cis_readiness_index : (d) => s3AccessNorm(d, s3SortBy);

  return data.sort(descendingDefined(value));
}

s3GeoData = ({
  type: "FeatureCollection",
  // Units with no access data are dropped rather than drawn faded.
  features: buildLevelFeatures(
    (row) => ({ ...(row || {}), hasData: Boolean(row) }),
    s3ProcessedData,
    s3View
  ).filter((f) => f.properties.hasData),
})

function renderS3MapDisplay() {
  if (s3ViewType !== "map") return null;

  if (s3MapType === "univariate") {
    return createS3AccessMap();
  } else {
    return bivariateMapWithLegend(createS3BivariateMap(), {
      ...CIS_BIVARIATE_LEGEND,
      yLabel: s3CurrentAccessLabel,
    });
  }
}

function createS3AccessMap() {
  return makeChoropleth({
    features: s3GeoData,
    width: 775,
    height: 610,
    projection: "mercator",
    fill: (d) => d.properties.accessValue,
    color: {
      type: "linear",
      domain: [0, 1],
      scheme: "Blues",
      label: s3CurrentAccessLabel,
    },
    channels: {
      region: {
        label: s3View.level === 2 ? "District" : s3View.level === 1 ? "Region" : "Country",
        value: (d) => d.properties.regionName || d.properties.admin0_name || "N/A",
      },
      access: {
        label: s3CurrentAccessLabel,
        value: (d) =>
          d.properties.accessValue != null
            ? `${(d.properties.accessValue * 100).toFixed(1)}%`
            : "N/A",
      },
    },
    tooltip: {
      region: true,
      access: true,
    },
    adminHighlight: highlightFor(s3View),
  });
}

// Section 3 bivariate map with diamond legend (matching Section 2 style)
function createS3BivariateMap() {
  if (s3ViewType !== "map") return null;

  return makeChoropleth({
    features: s3GeoData,
    width: 775,
    height: 610,
    fill: (d) => d.properties.bivariateClass,
    color: {
      type: "categorical",
      legend: false,
      domain: Object.keys(s3BivariateColors),
      range: Object.values(s3BivariateColors),
      label: "Bivariate Class",
    },
    channels: {
      region: {
        label: s3View.level === 2 ? "District" : s3View.level === 1 ? "Region" : "Country",
        value: (d) => d.properties.regionName || d.properties.admin0_name || "N/A",
      },
      readiness: {
        label: nbText.s3ReadinessLabel,
        value: (d) => fmt(d.properties.cis_readiness_index, 2),
      },
      readinessClass: {
        label: "Readiness Class",
        value: (d) => d.properties.readinessClass || "N/A",
      },
      access: {
        label: s3CurrentAccessLabel,
        value: (d) =>
          d.properties.accessValue != null
            ? `${(d.properties.accessValue * 100).toFixed(1)}%`
            : "N/A",
      },
      accessClass: {
        label: "Access Class",
        value: (d) => d.properties.accessClass || "N/A",
      },
      category: {
        label: "Category",
        value: (d) => d.properties.bivariateClass || "N/A",
      },
    },
    tooltip: {
      region: true,
      readiness: true,
      readinessClass: true,
      access: true,
      accessClass: true,
      category: true,
    },
    adminHighlight: highlightFor(s3View),
  });
}

function renderS3DumbbellLegend() {
  const items = [
    { symbol: "●", color: "#377eb8", label: nbText.s3ReadinessLabel },
    { symbol: "●", color: "#ff7f00", label: s3CurrentAccessLabel },
    { symbol: "━", color: "#4daf4a", label: nbText.s3PositiveGap },
    { symbol: "━", color: "#e41a1c", label: nbText.s3NegativeGap },
    { symbol: "━", color: "#999999", label: "Similar values" },
  ];

  return html`<div
    style="margin-bottom: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px;"
  >
    <div style="display: flex; gap: 20px; align-items: center; font-size: 12px;">
      ${items.map(
        ({ symbol, color, label }) => html`
          <div><span style="color: ${color};">${symbol}</span> ${label}</div>
        `
      )}
    </div>
  </div>`;
}

function makeS3DumbbellTip() {
  return {
    fontSize: 14,
    channels: {
      area: { label: "Area", value: (d) => d.label },
      readiness: { label: nbText.s3ReadinessLabel, value: (d) => d.cis_readiness_index },
      access: { label: s3CurrentAccessLabel, value: (d) => d.accessValue },
      gap: { label: nbText.s3GapLabel, value: (d) => d.gap },
    },
    format: {
      country: true,
      x: false,
      y: false,
      readiness: (d) => fmt(d, 3),
      access: (d) => (d != null ? `${(d * 100).toFixed(1)}%` : "N/A"),
      gap: (d) => {
        if (d == null || isNaN(d)) return "N/A";
        const label = d > 0 ? nbText.s3PositiveGap : nbText.s3NegativeGap;
        return `${d.toFixed(3)} (${label})`;
      },
    },
  };
}

function renderS3DumbbellPlot(data) {
  const chartHeight = Math.max(600, data.length * 25);
  const dataWithAccess = data.filter((d) => isFiniteNumber(d.accessValue));
  const completeData = dataWithAccess.filter((d) => isFiniteNumber(d.cis_readiness_index));
  const labels = data.map((d) => d.label);
  const axis = labelAxis(labels, 1200);
  const xDomain = d3.extent(
    data
      .flatMap((d) => [d.cis_readiness_index, d.accessValue])
      .filter(isFiniteNumber)
      .map(Number)
  );
  const tip = makeS3DumbbellTip();

  return Plot.plot({
    style: chartStyle,
    width: 1200,
    height: chartHeight,
    marginLeft: axis.marginLeft,
    marginRight: 50,
    marginTop: 80,
    marginBottom: 80,
    x: {
      domain: xDomain,
      label: "Value",
      grid: true,
      axis: "top",
    },
    y: {
      label: null,
      domain: labels,
      tickFormat: axis.tickFormat,
    },
    marks: [
      Plot.axisX({ anchor: "bottom", label: "Value" }),
      Plot.link(completeData, {
        x1: "cis_readiness_index",
        x2: "accessValue",
        y1: "label",
        y2: "label",
        stroke: (d) => {
          if (d.gap == null || isNaN(d.gap)) return "#999999";
          return d.gap > 0.05 ? "#4daf4a" : d.gap < -0.05 ? "#e41a1c" : "#999999";
        },
        strokeWidth: 2,
      }),
      Plot.dot(data, {
        x: "cis_readiness_index",
        y: "label",
        fill: "#377eb8",
        r: 5,
        tip: {
          ...tip,
          format: {
            ...tip.format,
            x: (d) => `Readiness: ${fmt(d, 3)}`,
          },
        },
      }),
      Plot.dot(dataWithAccess, {
        x: "accessValue",
        y: "label",
        fill: "#ff7f00",
        r: 5,
        stroke: "#ff7f00",
        strokeWidth: 2,
        tip,
      }),
    ],
  });
}

function renderS3DumbbellView() {
  return html`<div style="width: 100%; overflow-x: auto;">
    ${renderS3DumbbellLegend()} ${renderS3DumbbellPlot(s3SortedData)} ${renderS3DumbbellLegend()}
  </div>`;
}

function renderS3TableView() {
// Derive access columns from one localized registry.
// TODO: Move remaining English literals into data/cis/text/<locale>.json.
  return filterableDataTable(s3SortedData, {
    columns: [
      "label",
      "iso3",
      "cis_readiness_index",
      "readinessClass",
      ...Object.values(S3_ACCESS_TYPES).map((type) => type.pct),
      "gap",
    ],
    header: {
      label: "Area",
      iso3: "ISO3",
      cis_readiness_index: "CIS Readiness (Raw)",
      readinessClass: "CIS Class",
      ...Object.fromEntries(
        Object.values(S3_ACCESS_TYPES).map((type) => [type.pct, `${type.label} (%)`])
      ),
      gap: nbText.s3GapLabel,
    },
    format: {
      cis_readiness_index: (d) => fmt(d, 3),
      gap: (d) => fmt(d, 3),
      ...Object.fromEntries(
        Object.values(S3_ACCESS_TYPES).map((type) => [type.pct, (d) => fmt(d, 1)])
      ),
    },
    width: {
      label: 150,
      iso3: 60,
    },
  });
}

s3Figure = {
  if (s3ViewType === "map") {
    return html`<div style="width: 100%; overflow-x: auto;">${renderS3MapDisplay()}</div>`;
  } else if (s3ViewType === "dumbbell") {
    return renderS3DumbbellView();
  }
  return renderS3TableView();
}

s3DownloadButton = {
  const safeFormat = (value, decimals) => {
    if (value == null || isNaN(value)) return "N/A";
    return value.toFixed(decimals);
  };

  const filename = `cis_implementation_${s3AccessType}_access`;

  return inputTemplate({ gap: "0.5rem" })([
    ...(s3ViewType === "table"
      ? []
      : [downloadPngButton(s3Figure, { filename, label: nbText.downloadFigure })]),
    downloadCsvButton(
      s3SortedData.map((d) => ({
        Area: d.label || "N/A",
        ISO3: d.iso3 || "N/A",
        "CIS Readiness Raw": safeFormat(d.cis_readiness_index, 3),
        "CIS Readiness Class": d.readinessClass || "N/A",
        "TV Access %": safeFormat(d.tv_pct, 1),
        "Internet Access %": safeFormat(d.internet_pct, 1),
        "Cellphone Access %": safeFormat(d.cellphone_pct, 1),
        "Combined Access %": safeFormat(d.combined_pct, 1),
        "Gap (Access - Readiness)": safeFormat(d.gap, 3),
        "Bivariate Category": d.bivariateClass || "N/A",
      })),
      { filename, label: nbText.downloadLabel }
    ),
  ]);
}

s3Insights = {
  const avgReadiness = d3.mean(section3Data, (d) => d.cis_readiness_index);
  const avgAccess = d3.mean(section3Data, (d) => s3AccessNorm(d));

  // Capacity-access gaps.
  const capacityGaps = s3ProcessedData.filter(
    (d) =>
      d.cis_readiness_index > 0.6 &&
      d.accessValue !== null &&
      !isNaN(d.accessValue) &&
      d.accessValue < 0.4
  );

  // High-readiness, high-access opportunities.
  const optimalZones = s3ProcessedData.filter((d) => d.bivariateClass === "High × High");

  // Reuse the master selection breadcrumb.
  const selectedRegion = breadcrumb || "Sub-Saharan Africa";

  const insight1 = `In ${selectedRegion}, average CIS Readiness is **${avgReadiness.toFixed(
    2
  )}** while ${s3CurrentAccessLabel} averages **${(avgAccess * 100).toFixed(1)}%**.`;

  const insight2 =
    capacityGaps.length > 0
      ? `Countries such as **${capacityGaps
          .slice(0, 2)
          .map((d) => d.label)
          .join(
            " and "
          )}** show strong technical capacity but limited digital reach, highlighting the need for investment in ICT and communication channels to deliver CIS to users.`
      : "Most countries show balanced capacity and access.";

  const insight3 =
    optimalZones.length > 0
      ? `**${optimalZones.length} countries** (${(
          (optimalZones.length / s3ProcessedData.length) *
          100
        ).toFixed(
          1
        )}%) fall in the optimal zone with both high CIS readiness and high ${s3CurrentAccessLabel.toLowerCase()}, representing prime opportunities for scaling climate services.`
      : `No countries currently fall in the optimal zone for ${s3CurrentAccessLabel.toLowerCase()}.`;

  return html`
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
      <h4 style="margin-top: 0;">Key Insights</h4>
      <p style="margin: 10px 0;">${md([insight1])}</p>
      <p style="margin: 10px 0;"><strong>${nbText.s3CapacityGap}:</strong> ${md([insight2])}</p>
      <p style="margin: 10px 0;"><strong>Optimal Zones:</strong> ${md([insight3])}</p>
    </div>
  `;
}

Methods & SourcesMéthodes et Sources

This notebook analyzes Climate Information Services (CIS) readiness across Sub-Saharan Africa using multiple data sources to assess observation capacity, data agreement, forecast skill, and implementation potential.

Data Sources

• CIS Readiness Index: Aggregated from weather station density, precipitation agreement, and short- and long-term forecast skill metrics
• Weather Station Locations: 2025 catalogue records from NOAA, OSCAR, and WMO, filtered to the Atlas countries
• Hazard Data: Historical drought (NDD) and waterlogging (NDWL0) indicators
• Access Data: TV, internet, and cellphone penetration rates by country
• Administrative Boundaries: GAUL 2024 with Adaptation Atlas modifications

Methodology

The CIS Readiness Index is calculated as a normalized composite of four indicators, each scaled to 0-1. The precipitation agreement score is divided by four before it is combined with weather station density and short- and long-term forecast skill. Tercile classifications (Low, Moderate, High) are computed relative to Sub-Saharan African distributions. Bivariate maps overlay readiness with hazard exposure or access infrastructure to identify priority zones.

Ce notebook analyse la préparation aux Services d’Information Climatique (CIS) en Afrique subsaharienne en utilisant plusieurs sources de données pour évaluer la capacité d’observation, l’accord des données, les compétences de prévision et le potentiel de mise en œuvre.

Sources de Données

• Indice de préparation CIS: Agrégé à partir de la densité des stations météorologiques, de l’accord entre les produits de précipitations et de la performance des prévisions à court et à long terme
• Localisation des stations météorologiques: Enregistrements de 2025 provenant des catalogues de la NOAA, d’OSCAR et de l’OMM, filtrés selon les pays de l’Atlas
• Données sur les risques: Indicateurs historiques de sécheresse (NDD) et d’engorgement (NDWL0)
• Données d’accès: Taux de pénétration de la télévision, d’internet et du téléphone portable par pays
• Limites administratives: GAUL 2024 avec modifications de l’Atlas d’Adaptation

Méthodologie

L’indice de préparation CIS est calculé comme un composite normalisé de quatre indicateurs, chacun mis à l’échelle de 0 à 1. Le score d’accord sur les précipitations est divisé par quatre avant d’être combiné à la densité des stations météorologiques et à la performance des prévisions à court et à long terme. Les classifications en terciles (Faible, Modéré, Élevé) sont calculées par rapport aux distributions de l’Afrique subsaharienne. Les cartes bivariées superposent la préparation avec l’exposition aux risques ou l’infrastructure d’accès pour identifier les zones prioritaires.

AcknowledgementsRemerciements

This analysis was developed by the Alliance of Bioversity International and CIAT as part of the Adaptation Atlas initiative. Data processing and visualization use DuckDB, Observable Plot, and D3.js.

Cette analyse a été développée par l’Alliance de Bioversity International et du CIAT dans le cadre de l’initiative Atlas d’Adaptation. Le traitement des données et la visualisation utilisent DuckDB, Observable Plot et D3.js.

ContributorsContributeurs

AuthorsAuteurs

Brayden Youngberg¹, Pete Steward¹, Shalika Vyas¹, Harold Achicanoy¹

Technical DevelopmentDéveloppement technique

Johnson Mwakazi², Brayden Youngberg¹

AffiliationsAffiliations

¹ Alliance Bioversity and CIAT

² Snapp Africa

CitationRéférence

CGIAR. (2026). Identifying Climate Information ReadinessÉvaluer la préparation aux services d'information climatique. Africa Agriculture Adaptation Atlas. https://adaptationatlas.cgiar.org

AppendixAnnexe

Source code

Language

import { lang as Lang } from "/helpers/lang.js";

general_translations = await FileAttachment("/data/shared/generalTranslations.json").json()

languages = [
  { key: "en", label: "English", locale: "en-US" },
  { key: "fr", label: "Français", locale: "fr-FR" },
]

// Language state lives in the navbar switcher; this cell just subscribes.
langKey = Generators.observe((notify) => {
  notify(window.atlasLang ?? "en");
  const onChange = (e) => notify(e.detail);
  window.addEventListener("atlas:lang", onChange);
  return () => window.removeEventListener("atlas:lang", onChange);
})

language = languages.find((l) => l.key === langKey) ?? languages[0]

_lang = Lang.lg(language.key)

import { loadNotebookText, readNotebookConfig } from "/helpers/notebook.js";

notebookConfig = readNotebookConfig()

notebookText = await loadNotebookText(notebookConfig)

nbText = notebookText[language.key]

nbTitle = notebookConfig.title[language.key]

tmpl = (template, values) =>
  Lang.reduceReplaceTemplateItems(
    template,
    Object.entries(values).map(([name, value]) => ({ name, value }))
  )

Admin selectors

adminControls = (levels) =>
  adminMultiSelect(levels, {
    langKey: language.key,
    selectAll: true,
    searchable: { admin1: true, admin2: true },
  })

// Downstream helpers consume plain names; [] means unrestricted.
selectedAdmin0 = admin0Select.map((d) => d.admin0_name)
selectedAdmin1 = admin1Select.map((d) => d.admin1_name)
selectedAdmin2 = admin2Select.map((d) => d.admin2_name)

Data

db = await DuckDBClient.of({
  cis_data: FileAttachment("/data/cis/CIS_nb_data.parquet"),
  access_data: FileAttachment("/data/cis/CIS_access.parquet"),
  hazard_data: FileAttachment("/data/cis/nexgddpHazards_monthMean_jagermeyr_rounded.parquet"),
})

weatherStations = await FileAttachment("/data/cis/weather_stations_2025.geojson").json()

Boundaries

import {
  adminBoundariesForSelection,
  getAdminBoundaries,
  iso3Set,
} from "/components/_atlasBoundaries.ojs";

// Levels 0 and 1 are small (14 KB and 48 KB over the wire) and always drawn.
atlasBoundaries = await getAdminBoundaries([0, 1])

// Lazy-load and memoize admin 2 because it is only needed after region selection.
loadAdmin2Boundaries = {
  let pending = null;
  return () => (pending ??= getAdminBoundaries(2).then((b) => b.admin2));
}

// Fetch deep geometry only when drill-down needs it.
admin2Boundaries = selectedAdmin0.length && selectedAdmin1.length
  ? await loadAdmin2Boundaries()
  : null

// Resolve drill-down once; maxLevel caps shallower datasets and turns deeper
// selections into highlights.
adminViewFor = (maxLevel) =>
  adminBoundariesForSelection({
    boundaries: { ...atlasBoundaries, admin2: admin2Boundaries },
    selection: {
      admin0: selectedAdmin0,
      admin1: selectedAdmin1,
      admin2: selectedAdmin2,
    },
    maxLevel,
  })

adminView = adminViewFor(2)

currentAdminLevel = adminView.level

currentBoundaries = adminView.boundaries

// Build join keys at the drawn admin level.
adminKey = adminView.adminKey

// Build highlight styling from the selection at this view's drawn level.
highlightFor = (view) => {
  const selected = view.selectedAtLevel;
  if (!selected) return null;

  const names = new Set(selected.names);
  return {
    filter: (feature) => names.has(feature.properties[selected.field]),
    stroke: "#000",
    strokeWidth: 2.5,
  };
}

adminHighlight = highlightFor(adminView)

// Share the readiness axis and 3×3 legend geometry between both bivariate
// sections; spread into a bivariateMapWithLegend call.
CIS_BIVARIATE_LEGEND = ({
  colors: bivariatePalette,
  xLabel: nbText.s3ReadinessLabel,
  side: "left",
  gap: "18px",
  width: 220,
  height: 210,
  fontSize: 14,
})

// Narrow insight rows to selections at the view's drawn level.
onlySelectedAtLevel = (rows) => {
  const selected = adminView.selectedAtLevel;
  if (!selected) return rows;

  const names = new Set(selected.names);
  return rows.filter((row) => names.has(row[selected.field]));
}

// Null-safe fixed-point formatting.
fmt = (value, decimals = 3) =>
  value == null || Number.isNaN(Number(value)) ? "N/A" : Number(value).toFixed(decimals)

isFiniteNumber = (value) => value != null && Number.isFinite(Number(value))

descendingDefined = (value) => (a, b) => {
  const av = value(a);
  const bv = value(b);
  if (!isFiniteNumber(av)) return isFiniteNumber(bv) ? 1 : 0;
  if (!isFiniteNumber(bv)) return -1;
  return Number(bv) - Number(av);
}

// Use shorter table/export labels than map tooltips.
adminDisplayName = (d, level = currentAdminLevel) =>
  level === 0
    ? d.admin0_name
    : level === 1
    ? `${d.admin1_name}, ${d.admin0_name}`
    : `${d.admin2_name}, ${d.admin1_name}`

// Estimate label width for Plot's left margin, then truncate at a proportional cap.
// Tooltips retain full labels.
labelAxis = (labels, chartWidth, { share = 0.35, minimum = 120 } = {}) => {
  const perChar = 7;
  const gutter = 12;
  // Avoid spreading thousands of admin-2 label lengths.
  const longest = labels.reduce((n, l) => Math.max(n, String(l).length), 0);
  const cap = Math.max(minimum, Math.round(chartWidth * share));
  const marginLeft = Math.min(cap, Math.max(minimum, longest * perChar + gutter));
  const fits = Math.floor((marginLeft - gutter) / perChar);

  return {
    marginLeft,
    tickFormat: (label) => {
      const name = String(label);
      return name.length > fits ? `${name.slice(0, fits - 1)}…` : name;
    },
  };
}