PneumoTRACE

Enter the access password to continue.

Incorrect password. Please try again.

Serotype-specific nowcasts

Nowcasts of the serotype distributions in IPD

These plots explore the evolution of serotype-specific IPD in the United States, including both reported data from the ABCs system (through the most recently reported year) and short-term forecasts (“nowcasts”) for the most recent years. We make two sets of nowcast predictions: one based on a time series model fit to the reported IPD cases through the most recent available year, and a second based on our carriage data combined with a statistical model that generates projections of IPD incidence (see Methods for details). Combined, these two approaches provide a complementary projection of the current distribution of serotypes causing IPD.

As of now, given the small sample size for the carriage data and some minor issues with assays specificity, we would recommend treating the nowcasts based on the IPD data as the most reliable source, with the nowcasts based on carriage data as supplementary information. For future reports, we are working to synthesize these two sources into a single nowcast.

data = transpose(fanRaw)

// Natural sort of serotype names: numeric part first, then any letter suffix.
serotypes = Array.from(new Set(data.map(d => d.st))).sort((a, b) => {
  const na = parseInt(a, 10), nb = parseInt(b, 10);
  if (na !== nb) return na - nb;
  return a < b ? -1 : a > b ? 1 : 0;
})

yearMin = Math.min(...data.map(d => d.year))
yearMax = Math.max(...data.map(d => d.year))

Serotype distribution by age group

Two independent approaches are used to rank serotypes: a time series model fit to reported IPD cases, and a model based on carriage detection combined with published invasiveness estimates (see Methods for details). Use the tabs below to switch between them.

IPD nowcasts

These first plots show the observed or predicted frequency of serotypes causing IPD across the CDC/ABCs sites. The reported CDC data lags by 2-3 years, so we use projections based on time series models to generate the distributions for recent years. For each age group, serotypes are ranked by their observed or predicted IPD incidence (cases per 100,000) and drawn in descending order on a natural-log x-axis, which spreads out the rare serotypes so they can be distinguished. Press Play (or drag the slider) to step through the years. Years up to and including the end of training show the observed incidence as solid bars; later years show the forecast distribution. Each serotype keeps the same colour across every year and age group, so you can follow it as it rises or falls through the ranks. The carriage-based nowcasts are currently based on very small numbers and will become better calibrated as more data accrue

raceYears = Array.from(new Set(data.map(d => d.year))).sort((a, b) => a - b)

raceAges = Array.from(new Map(data.map(d => [d.agegrp, d.age_num])).entries())
  .sort((a, b) => a[1] - b[1])
  .map(e => e[0])

// Stable colour per serotype: concatenate several categorical schemes so a few
// dozen serotypes all get distinct, followable colours.
racePalette = [].concat(
  d3.schemeTableau10, d3.schemeSet2, d3.schemeDark2, d3.schemeSet3, d3.schemePaired
)

raceSerotypes = Array.from(new Set(data.map(d => d.st))).sort((a, b) => {
  const na = parseInt(a, 10), nb = parseInt(b, 10);
  if (na !== nb) return na - nb;
  return a < b ? -1 : a > b ? 1 : 0;
})

colorFor = new Map(raceSerotypes.map((s, i) => [s, racePalette[i % racePalette.length]]))

// Incidence = count / population * 100,000. pop is the age-group denominator
// (identical across serotypes within an age/year), so it rescales counts onto a
// per-100k axis comparable across age groups without changing the ranking.
incOf = (count, pop) => (pop > 0 ? count / pop * 1e5 : 0)

// Fixed log x-axis bounds per age group, based on observed and forecast-mean
// incidence (NOT the long predictive upper tail, which is clipped to the frame).
// The floor is capped to ceiling/1000 so a single ultra-rare serotype-year can't
// stretch the scale across more than ~3 decades. Fixed across years => bars and
// violins stay comparable as the slider advances.
raceIncByAge = (() => {
  const lo = new Map(), hi = new Map();
  for (const a of raceAges) {
    const vals = [];
    for (const d of data) {
      if (d.agegrp !== a || d.band !== 1 || !(d.pop > 0)) continue;
      const o = incOf(d.N_IPD, d.pop), f = incOf(d.mean_pred, d.pop);
      if (o > 0) vals.push(o);
      if (f > 0) vals.push(f);
    }
    const top = vals.length ? d3.max(vals) : 1;
    const bot = vals.length ? d3.min(vals) : top / 100;
    hi.set(a, top);
    lo.set(a, Math.max(bot * 0.8, top / 1000));
  }
  return { lo, hi };
})()

fmtInc = x => x >= 10 ? d3.format(",.0f")(x)
           : x >= 1  ? d3.format(".1f")(x)
           :           d3.format(".2~g")(x)

// Build the violin outline for one forecast cell (all bands of one serotype).
// band i spans quantiles (0.025+0.05(i-1)) .. (0.975-0.05(i-1)). Because the
// plot uses a natural-log x-axis, thickness is the density with respect to
// ln(x) — i.e. the local slope dp/d(ln x) — so equal probability mass occupies
// equal visual width wherever it sits on the scale. Scaled so every violin has
// the same maximum half-thickness.
function violin(bands, r) {
  const raw = [];
  for (const b of bands) {
    if (b.lower_ci > 0) raw.push({ p: 0.025 + 0.05 * (b.band - 1), x: b.lower_ci });
    if (b.upper_ci > 0) raw.push({ p: 0.975 - 0.05 * (b.band - 1), x: b.upper_ci });
  }
  raw.sort((a, b) => a.p - b.p);
  // Rare/low-count serotypes routinely land several adjacent quantiles on the
  // same integer count (e.g. lots of bands with upper_ci = 1). Merge those
  // ties into a single point spanning their combined probability range before
  // estimating density; left un-merged, a run of tied x-values reads as zero
  // density followed by an artificial spike at the next distinct value, which
  // produces a jagged outline and can leave the median sitting outside the
  // visible shape.
  const pts = [];
  for (const pt of raw) {
    const last = pts[pts.length - 1];
    if (last && last.x === pt.x) last.p = pt.p;
    else pts.push({ p: pt.p, x: pt.x });
  }
  const n = pts.length;
  if (n < 3 || (pts[n - 1].x - pts[0].x) <= 0) return [];
  const u = pts.map(pt => Math.log(pt.x));   // work in log space
  const dens = pts.map((_, k) => {
    const k0 = Math.max(0, k - 1), k1 = Math.min(n - 1, k + 1);
    const du = u[k1] - u[k0];
    return du > 0 ? (pts[k1].p - pts[k0].p) / du : 0;
  });
  const maxD = Math.max(...dens) || 1;
  return pts.map((pt, k) => {
    const hw = (k === 0 || k === n - 1) ? 0 : (dens[k] / maxD) * 0.42;
    return { x: pt.x, y1: r - hw, y2: r + hw };
  });
}

// Half-width of a violin polygon (as returned by violin(), above) at a given
// x, by linear interpolation in log-x space between its bracketing points.
// Used to size the median tick so it never visibly overshoots a violin that
// legitimately tapers to a point near the median (e.g. when most of the
// probability mass sits at the log-axis floor and gets excluded from the
// polygon).
function violinHalfWidthAt(poly, x) {
  for (let i = 1; i < poly.length; i++) {
    const a = poly[i - 1], b = poly[i];
    if ((x - a.x) * (x - b.x) <= 0) {
      const t = a.x === b.x ? 0 : (Math.log(x) - Math.log(a.x)) / (Math.log(b.x) - Math.log(a.x));
      const hwA = (a.y2 - a.y1) / 2, hwB = (b.y2 - b.y1) / 2;
      return hwA + (hwB - hwA) * t;
    }
  }
  return 0;
}

viewof topN = Inputs.range([3, 20], {
  step: 1, value: 10, label: "Serotypes per age group", width: 240
})

viewof yearValue = Scrubber(raceYears, {
  delay: 1100, autoplay: false, loop: true,
  initial: raceYears.length - 1,
  format: d => `${d}  ${d > endTraining ? "(forecast)" : "(observed)"}`
})

raceYear = yearValue

raceBadge = html`<div style="font:600 15px sans-serif; margin:0.2em 0 0.6em;">
  <span style="color:var(--pt-dark);">Year ${raceYear}</span>
  <span style="margin-left:0.6em; padding:1px 8px; border-radius:10px; font-size:12px;
        background:${raceYear > endTraining ? '#c19d4333' : '#3a73b333'};
        color:${raceYear > endTraining ? '#8a6e1f' : '#274d78'};">
    ${raceYear > endTraining ? "Forecast (predictive distribution)" : "Observed"}
  </span>
</div>`

raceCharts = {
  const isForecast = raceYear > endTraining;
  const sel = data.filter(d => d.year === raceYear);
  const gap = 14;
  const cols = raceAges.length;
  // Size each panel to the available page width so all age groups stay in one
  // row instead of wrapping on narrower (laptop) screens.
  const panelW = Math.max(220, Math.floor((width - gap * (cols - 1)) / cols));
  const container = html`<div style="display:grid;
    grid-template-columns:repeat(${cols}, 1fr); gap:${gap}px;"></div>`;

  for (const a of raceAges) {
    // Rank serotypes for this age/year by incidence (= count / pop * 100k).
    const ranked = sel.filter(d => d.agegrp === a && d.band === 1)
      .map(d => ({ st: d.st, pop: d.pop,
                   center: incOf(isForecast ? d.mean_pred : d.N_IPD, d.pop) }))
      .filter(d => d.center > 0)
      .sort((x, y) => y.center - x.center)
      .slice(0, topN);

    const order = ranked.map(d => d.st);
    const n = order.length;
    const domMax = raceIncByAge.hi.get(a);
    const domMin = raceIncByAge.lo.get(a);
    const marks = [];
    const labels = [];

    ranked.forEach((d, r) => {
      const color = colorFor.get(d.st);
      if (isForecast) {
        // Convert each band's count CI to incidence before building the violin.
        const bands = sel.filter(z => z.agegrp === a && z.st === d.st)
          .map(z => ({ band: z.band,
                       lower_ci: incOf(z.lower_ci, d.pop),
                       upper_ci: incOf(z.upper_ci, d.pop) }));
        const poly = violin(bands, r);
        if (poly.length >= 3) {
          marks.push(Plot.areaY(poly, {
            x: "x", y1: "y1", y2: "y2", fill: color, fillOpacity: 0.65,
            stroke: color, strokeWidth: 0.6, curve: "basis", clip: true
          }));
          // Cap the tick at the violin's local half-width (with a small
          // visible minimum) so it doesn't overshoot a violin that tapers to
          // a point right at the median.
          const hw = Math.max(violinHalfWidthAt(poly, d.center), 0.06);
          marks.push(Plot.ruleX([{ x: d.center }], {
            x: "x", y1: r - hw, y2: r + hw, stroke: "#222",
            strokeOpacity: 0.55, clip: true
          }));
        } else {
          marks.push(Plot.rectX([{ x: d.center }], {
            x1: domMin, x2: "x", y1: r - 0.32, y2: r + 0.32, fill: color, rx: 1
          }));
        }
      } else {
        // Bars run from the axis floor (a log scale cannot start at 0); the bar
        // END position on the log axis is what encodes the incidence.
        marks.push(Plot.rectX([{ x: d.center }], {
          x1: domMin, x2: "x", y1: r - 0.34, y2: r + 0.34, fill: color, rx: 1
        }));
      }
      labels.push({ r, center: d.center });
    });

    // Incidence in a fixed right-margin column so it never overlaps the bars.
    marks.push(Plot.text(labels, {
      x: domMax, y: "r", text: d => fmtInc(d.center),
      dx: 6, textAnchor: "start", fontSize: 11, fill: "#333"
    }));

    const plot = Plot.plot({
      width: panelW,
      height: Math.max(130, n * 30 + 36),
      marginLeft: 54, marginRight: 52, marginBottom: 34,
      x: { type: "log", base: Math.E, domain: [domMin, domMax],
           label: "IPD per 100,000 (natural-log scale)", grid: true,
           tickFormat: fmtInc },
      y: {
        domain: [-0.6, n - 0.4], reverse: true,
        ticks: d3.range(n), tickFormat: i => order[i] ?? "", tickSize: 0, label: null
      },
      color: { type: "identity" },
      marks
    });

    const card = html`<div>
      <div style="font:600 13px sans-serif; color:var(--pt-navy); margin-bottom:2px;">
        Age: ${a}</div>${plot}</div>`;
    container.append(card);
  }
  return container;
}

// Mike Bostock's Scrubber: a range slider with a Play/Pause button that
// advances through the supplied values; returns the current value.
function Scrubber(values, {
  format = value => value, initial = 0, direction = 1, delay = null,
  autoplay = true, loop = true, loopDelay = null, alternate = false
} = {}) {
  values = Array.from(values);
  const form = html`<form style="font:13px sans-serif; font-variant-numeric:tabular-nums;
      display:flex; height:33px; align-items:center;">
    <button name=b type=button style="margin-right:0.5em; width:5em;"></button>
    <label style="display:flex; align-items:center;">
      <input name=i type=range min=0 max=${values.length - 1} value=${initial}
             step=1 style="width:260px;">
      <output name=o style="margin-left:0.5em;"></output>
    </label>
  </form>`;
  let frame = null, timer = null, interval = null, direction2 = direction;
  function start() {
    form.b.textContent = "Pause";
    if (delay === null) frame = requestAnimationFrame(tick);
    else interval = setInterval(tick, delay);
  }
  function stop() {
    form.b.textContent = "Play";
    if (frame !== null) cancelAnimationFrame(frame), frame = null;
    if (timer !== null) clearTimeout(timer), timer = null;
    if (interval !== null) clearInterval(interval), interval = null;
  }
  function running() { return frame !== null || timer !== null || interval !== null; }
  function tick() {
    if (form.i.valueAsNumber === (direction2 > 0 ? values.length - 1 : 0)) {
      if (!loop) return stop();
      if (alternate) direction2 = -direction2;
      if (loopDelay !== null) {
        if (frame !== null) cancelAnimationFrame(frame), frame = null;
        if (interval !== null) clearInterval(interval), interval = null;
        timer = setTimeout(() => (step(), start()), loopDelay);
        return;
      }
    }
    if (delay === null) frame = requestAnimationFrame(tick);
    step();
  }
  function step() {
    form.i.valueAsNumber =
      (form.i.valueAsNumber + direction2 + values.length) % values.length;
    form.i.dispatchEvent(new CustomEvent("input", { bubbles: true }));
  }
  form.i.oninput = event => {
    if (event && event.isTrusted && running()) stop();
    form.value = values[form.i.valueAsNumber];
    form.o.value = format(form.value, form.i.valueAsNumber, values);
  };
  form.b.onclick = () => {
    if (running()) return stop();
    direction2 = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : direction;
    form.i.valueAsNumber = (form.i.valueAsNumber + direction2) % values.length;
    form.i.dispatchEvent(new CustomEvent("input", { bubbles: true }));
    start();
  };
  form.i.oninput();
  if (autoplay) start(); else stop();
  Inputs.disposal(form).then(stop);
  return form;
}

PCV coverage of IPD by age group

The table shows, for the year selected above, the percentage of all IPD cases in each age group that are caused by serotypes included in each PCV formulation. Percentages use the same observed/forecast IPD counts (and the same year) as the race plots above. We assume that 15B and 15C are interchangeable. For forecast years, values are shown as the median with a 95% uncertainty interval, computed across posterior predictive draws.

vaccineSets = (() => {
  const pcv7 = ['4','6B','9V','14','18C','19F','23F'];
  const pcv10gsk = [...pcv7,'1','5','7F'];
  const pcv13 = [...pcv7,'1','3','5','6A','7F','19A'];
  const pcv15 = [...pcv13,'22F','33F'];
  const pcv20 = [...pcv15,'8','10A','11A','12F','15B'];
  const vax24 = [...pcv20,'2','9N','17F','20'];
  const vax31 = [...vax24,'15A','16F','35B','23A','23B','31','7C'];
  const pcv21 = [...pcv20,'9N'];
  const pcv25 = [...pcv15,'8','9N','10A','12F','15BC','6C','15A','16F','24F','35B'];
  const v116 = ['3','7F','19A','8','9N','10A','12F','15BC','22F','33F','15A','16F',
                '24F','35B','6A','11A','17F','20','23A','23B','31'];
  const pneumosil = ['1','5','6A','6B','7F','9V','14','19A','19F','23F'];

  const defs = new Map([
    ["PCV7 (Pfizer)", pcv7],
    ["PCV10 (GSK)", pcv10gsk],
    ["PCV13 (Pfizer)", pcv13],
    ["PCV15 (Merck)", pcv15],
    ["PCV20 (Pfizer)", pcv20],
    ["VAX-24 (Vaxcyte)/MAPS24 (GSK)", vax24],
    ["VAX-31 (Vaxcyte)", vax31],
    ["PCV21 (Sanofi)", pcv21],
    ["PCV25 (Inventprise)", pcv25],
    ["V116 (Merck)", v116],
    ["PCV10 (SII)", pneumosil]
  ]);

  // The surveillance data lumps serotypes 15B/15C together as "15BC" (see
  // abcs_nowcast_INLA.R), so normalize any plain "15B"/"15C" entries before
  // matching against observed serotypes.
  return new Map(Array.from(defs, ([name, sts]) => [
    name, new Set(sts.map(s => (s === "15B" || s === "15C") ? "15BC" : s))
  ]));
})()

// Total and vaccine-covered IPD (observed or forecast center, band 1) per
// age group, for the year currently selected on the race-plot scrubber.
covRows = {
  const sel = data.filter(d => d.year === raceYear && d.band === 1);
  const isForecast = raceYear > endTraining;
  const totals = new Map(raceAges.map(a => [a, 0]));
  const covered = new Map(Array.from(vaccineSets.keys(), name =>
    [name, new Map(raceAges.map(a => [a, 0]))]
  ));
  for (const d of sel) {
    const center = isForecast ? d.mean_pred : d.N_IPD;
    if (!(center > 0) || !totals.has(d.agegrp)) continue;
    totals.set(d.agegrp, totals.get(d.agegrp) + center);
    for (const [name, set] of vaccineSets) {
      if (set.has(d.st)) {
        const m = covered.get(name);
        m.set(d.agegrp, m.get(d.agegrp) + center);
      }
    }
  }
  return Array.from(vaccineSets.keys()).map(name => {
    const row = { vaccine: name };
    for (const a of raceAges) {
      const tot = totals.get(a);
      row[a] = tot > 0 ? covered.get(name).get(a) / tot * 100 : null;
    }
    return row;
  });
}

pcvCovCI = {
  let rows = [];
  try { rows = transpose(pcvCovRaw); } catch (e) { rows = []; }
  return new Map(rows.map(r => [`${r.vaccine}|${r.agegrp}|${r.year}`, r]));
}

covTable = {
  const f1 = d3.format(".1f");
  const fmtPct = x => x == null ? "–" : `${f1(x)}%`;
  const fmtCell = (row, a) => {
    if (row[a] == null) return "–";
    const ci = raceYear > endTraining ? pcvCovCI.get(`${row.vaccine}|${a}|${raceYear}`) : null;
    return ci && ci.lo != null && ci.hi != null
      ? `${f1(ci.est)}% (${f1(ci.lo)}–${f1(ci.hi)})`
      : fmtPct(row[a]);
  };

  const header = html`<tr>
    <th style="text-align:left; padding:4px 10px; border-bottom:2px solid #333;">Vaccine</th>
    ${raceAges.map(a => html`<th style="text-align:right; padding:4px 10px; border-bottom:2px solid #333;">${a}</th>`)}
  </tr>`;

  const rows = covRows.map(row => html`<tr>
    <td style="padding:4px 10px; border-bottom:1px solid #ddd; font-weight:600;">${row.vaccine}</td>
    ${raceAges.map(a => html`<td style="text-align:right; padding:4px 10px; border-bottom:1px solid #ddd;">${fmtCell(row, a)}</td>`)}
  </tr>`);

  const table = html`<table style="border-collapse:collapse; font:13px sans-serif;">
    <thead>${header}</thead>
    <tbody>${rows}</tbody>
  </table>`;

  return html`<div>
    <div style="font:600 13px sans-serif; margin-bottom:6px;">
      <span style="color:var(--pt-dark);">Year ${raceYear}</span>
      <span style="margin-left:0.6em; padding:1px 8px; border-radius:10px; font-size:12px;
            background:${raceYear > endTraining ? '#c19d4333' : '#3a73b333'};
            color:${raceYear > endTraining ? '#8a6e1f' : '#274d78'};">
        ${raceYear > endTraining ? "Forecast" : "Observed"}
      </span>
    </div>
    ${table}
  </div>`;
}

IPD based on carriage detection

This ranking is based on a model that combines serotypes detected in carriage samples with published serotype-specific invasiveness estimates. Carriage prevalence and invasiveness are each sampled to propagate uncertainty, and the resulting predicted IPD counts are calibrated to the total observed IPD burden in children under 5. Unlike the IPD time-series ranking, this is a single national ranking . The shaded area show the predicted number of IPD cases attributable to each serotype with uncertainty (median, with 95% interval).

carrData = transpose(carrRaw)

// Most recent year with carriage-derived predictions.
carrYear = carrData.length ? Math.max(...carrData.map(d => d.year)) : null

carrSel = carrData.filter(d => d.year === carrYear)

viewof carrTopN = Inputs.range([3, 20], {
  step: 1, value: 10, label: "Serotypes shown", width: 240
})

carrChart = {
  if (!carrSel.length) {
    return html`<p style="font:13px sans-serif; color:#666;">No carriage-based predictions available yet.</p>`;
  }

  // Rank by the predicted median (band 1 carries mean_pred once per serotype).
  const ranked = carrSel.filter(d => d.band === 1 && d.mean_pred > 0)
    .map(d => ({ st: d.st, center: d.mean_pred }))
    .sort((a, b) => b.center - a.center)
    .slice(0, carrTopN);

  const order = ranked.map(d => d.st);
  const n = order.length;

  // Fixed log x-axis bounds from the predicted medians and their widest CI band.
  const vals = [];
  for (const d of carrSel) {
    if (d.band === 1 && d.mean_pred > 0) vals.push(d.mean_pred);
    if (d.lower_ci > 0) vals.push(d.lower_ci);
    if (d.upper_ci > 0) vals.push(d.upper_ci);
  }
  const domMax = vals.length ? d3.max(vals) : 1;
  const domMin = Math.max((vals.length ? d3.min(vals) : domMax / 100) * 0.8, domMax / 1000);

  const marks = [];
  const labels = [];

  ranked.forEach((d, r) => {
    const color = colorFor.get(d.st) ?? "#999";
    // Build a violin from this serotype's quantile bands, same as the IPD forecast years.
    const bands = carrSel.filter(z => z.st === d.st)
      .map(z => ({ band: z.band, lower_ci: z.lower_ci, upper_ci: z.upper_ci }));
    const poly = violin(bands, r);
    if (poly.length >= 3) {
      marks.push(Plot.areaY(poly, {
        x: "x", y1: "y1", y2: "y2", fill: color, fillOpacity: 0.65,
        stroke: color, strokeWidth: 0.6, curve: "basis", clip: true
      }));
      const hw = Math.max(violinHalfWidthAt(poly, d.center), 0.06);
      marks.push(Plot.ruleX([{ x: d.center }], {
        x: "x", y1: r - hw, y2: r + hw, stroke: "#222",
        strokeOpacity: 0.55, clip: true
      }));
    } else {
      marks.push(Plot.rectX([{ x: d.center }], {
        x1: domMin, x2: "x", y1: r - 0.32, y2: r + 0.32, fill: color, rx: 1
      }));
    }
    labels.push({ r, center: d.center });
  });

  marks.push(Plot.text(labels, {
    x: domMax, y: "r", text: d => fmtInc(d.center),
    dx: 6, textAnchor: "start", fontSize: 11, fill: "#333"
  }));

  return Plot.plot({
    width: Math.min(width, 720),
    height: Math.max(130, n * 30 + 36),
    marginLeft: 54, marginRight: 52, marginBottom: 34,
    x: { type: "log", base: Math.E, domain: [domMin, domMax],
         label: "Predicted IPD cases, national (natural-log scale)", grid: true,
         tickFormat: fmtInc },
    y: {
      domain: [-0.6, n - 0.4], reverse: true,
      ticks: d3.range(n), tickFormat: i => order[i] ?? "", tickSize: 0, label: null
    },
    marks
  });
}

Serotype-specific IPD time series

Use the controls below to choose a serotype, switch between incidence (per 100,000) and the proportion of IPD, and restrict the range of years shown. The dashed line marks the end of the training period; years to its right are nowcast/forecast. Observed data come from the CDC’s ABCs surveillance, the ‘nowcasts’ come from a custom time series model.

viewof sero = Inputs.select(serotypes, {
  label: "Serotype",
  value: serotypes.includes("19F") ? "19F" : serotypes[0]
})

viewof scale = Inputs.radio(
  new Map([["IPD per 100,000", "rate"], ["Proportion of IPD", "prop"]]),
  { label: "Scale", value: "rate" }
)

// Single bar carrying two handles. Returns [from, to] (sorted), so the
// plotting code below is unchanged.
viewof yearRange = {
  const min = yearMin, max = yearMax;

  const lo = html`<input type="range" min=${min} max=${max} step="1" value=${min} class="dual-range">`;
  const hi = html`<input type="range" min=${min} max=${max} step="1" value=${max} class="dual-range">`;
  const readout = html`<output style="font-variant-numeric: tabular-nums;"></output>`;

  // Stack both native sliders on one track. The inputs ignore pointer events so
  // the visible track underneath shows through; only the thumbs stay grabbable.
  const css = html`<style>
    .dual-range {
      position:absolute; left:0; top:0; width:100%; height:24px; margin:0;
      background:none; pointer-events:none;
      -webkit-appearance:none; appearance:none;
    }
    .dual-range::-webkit-slider-thumb { pointer-events:auto; -webkit-appearance:auto; appearance:auto; }
    .dual-range::-moz-range-thumb     { pointer-events:auto; }
  </style>`;

  const rail = html`<div style="position:absolute; left:0; top:11px; width:100%; height:3px; background:#ccc; border-radius:2px;"></div>`;
  const fill = html`<div style="position:absolute; top:11px; height:3px; background:steelblue; border-radius:2px;"></div>`;

  const slot = html`<div style="position:relative; height:24px; width:240px;">${rail}${fill}${lo}${hi}</div>`;
  const form = html`<form style="font: 13px sans-serif; display:flex; align-items:center; gap:0.75em;">
    ${css}<label style="width:60px;">Years</label>${slot}${readout}</form>`;

  function update() {
    // Keep the handles from crossing; sort so [from, to] is always ordered.
    let a = +lo.value, b = +hi.value;
    if (a > b) { const t = a; a = b; b = t; }
    const pa = (a - min) / (max - min) * 100;
    const pb = (b - min) / (max - min) * 100;
    fill.style.left = pa + "%";
    fill.style.width = (pb - pa) + "%";
    form.value = [a, b];
    readout.value = `${a} – ${b}`;
    form.dispatchEvent(new CustomEvent("input", { bubbles: true }));
  }

  lo.addEventListener("input", update);
  hi.addEventListener("input", update);

  update();
  return form;
}

ylab = scale === "rate" ? "IPD per 100,000" : "Proportion of IPD"

rows = data
  .filter(d => d.st === sero &&
               d.year >= Math.min(yearRange[0], yearRange[1]) &&
               d.year <= Math.max(yearRange[0], yearRange[1]))
  .map(d => ({
    ...d,
    ymin: scale === "rate" ? d.lower_ci  / d.pop * 100000 : d.lower_ci  / d.offset1,
    ymax: scale === "rate" ? d.upper_ci  / d.pop * 100000 : d.upper_ci  / d.offset1,
    ymid: scale === "rate" ? d.mean_pred / d.pop * 100000 : d.mean_pred / d.offset1,
    yobs: scale === "rate" ? d.N_IPD     / d.pop * 100000 : d.N_IPD     / d.offset1
  }))

// One row per (age group, year) for the median line and observed points.
midRows = rows.filter(d => d.band === 1)

// Facet age groups left-to-right in their natural numeric order.
ageDomain = Array.from(new Map(rows.map(d => [d.agegrp, d.age_num])).entries())
  .sort((a, b) => a[1] - b[1])
  .map(e => e[0])

plot = Plot.plot({
  width: 960,
  height: 320,
  marginLeft: 60,
  marginBottom: 40,
  title: sero,
  x: { label: "Year", tickFormat: "d" },
  y: { label: ylab, grid: true },
  fx: { domain: ageDomain, label: null },
  marks: [
    // Fan: one semi-transparent band per quantile pair; overlap darkens the centre.
    Plot.areaY(rows, {
      x: "year", y1: "ymin", y2: "ymax", fx: "agegrp", z: "band",
      fill: "steelblue",
      fillOpacity: d => 0.05 + (d.band - 1) / 9 * 0.20,
      curve: "linear"
    }),
    Plot.lineY(midRows, {
      x: "year", y: "ymid", fx: "agegrp",
      stroke: "steelblue", strokeWidth: 1.5
    }),
    Plot.dot(midRows, {
      x: "year", y: "yobs", fx: "agegrp",
      r: 2, fill: "black"
    }),
    Plot.ruleX([endTraining + 0.5], { strokeDasharray: "4 3" })
  ]
})

Comparison of predictions based on carriage and IPD

This plot compares, for each serotype, the predicted IPD case count from the time-series nowcast (x-axis, restricted to the national <5 years age band) against the predicted IPD case count from the carriage-based model (y-axis), both for the most recent year with a carriage-based prediction. A serotype predicted by only one of the two approaches is plotted with the other value assumed to be 0 (shown pinned to the axis floor). Points on the dashed 1:1 line indicate agreement between the two independent approaches. Horizontal and vertical bars show the 95% interval for each estimate; hover over a point for details.

compareYear = carrYear

// Time-series nowcast, national "<5 years" band, same year as the carriage-based prediction.
nowcastSel = data.filter(d => d.agegrp === "<5 years" && d.year === compareYear)

nowcastByST = new Map(
  Array.from(new Set(nowcastSel.map(d => d.st)))
    .map(st => {
      const mid = nowcastSel.find(d => d.st === st && d.band === 1);
      if (!mid) return [st, null];
      const center = compareYear > endTraining ? mid.mean_pred : mid.N_IPD;
      return center > 0 ? [st, { center, lower: mid.lower_ci, upper: mid.upper_ci }] : [st, null];
    })
    .filter(([, v]) => v)
)

carrByST = new Map(
  Array.from(new Set(carrSel.map(d => d.st)))
    .map(st => {
      const mid = carrSel.find(d => d.st === st && d.band === 1);
      return mid && mid.mean_pred > 0
        ? [st, { center: mid.mean_pred, lower: mid.lower_ci, upper: mid.upper_ci }]
        : [st, null];
    })
    .filter(([, v]) => v)
)

// Union of serotypes seen by either approach; a serotype missing from one side
// is assumed to be 0 for that side (no CI, since there is no estimate).
compareRows = Array.from(new Set([...nowcastByST.keys(), ...carrByST.keys()]))
  .map(st => {
    const nc = nowcastByST.get(st), cr = carrByST.get(st);
    return {
      st,
      x: nc ? nc.center : 0, xlo: nc ? nc.lower : 0, xhi: nc ? nc.upper : 0,
      y: cr ? cr.center : 0, ylo: cr ? cr.lower : 0, yhi: cr ? cr.upper : 0
    };
  })

compareChart = {
  if (!compareRows.length) {
    return html`<p style="font:13px sans-serif; color:#666;">Not enough overlapping serotypes with both a time-series nowcast and a carriage-based prediction to compare.</p>`;
  }

  // Domain is set from the positive values only; serotypes assumed to be 0 on
  // one side are pinned to the axis floor (domMin) rather than stretching it.
  const positives = [];
  for (const d of compareRows) {
    for (const v of [d.x, d.xhi, d.y, d.yhi]) if (v > 0) positives.push(v);
  }
  const domMax = (positives.length ? d3.max(positives) : 1) * 1.15;
  const domMin = Math.max(
    (positives.length ? d3.min(positives) : domMax / 100) * 0.7,
    domMax / 1000
  );
  // Clamp values (and CI bounds) into the plotted domain, so a 0/assumed-0
  // value or a near-zero lower bound sits at the axis floor instead of
  // breaking the log axis.
  const rows = compareRows.map(d => ({
    ...d,
    x0: d.x, y0: d.y,
    x: Math.max(d.x, domMin), y: Math.max(d.y, domMin),
    // `xlo`/`ylo` are always numeric (0 when there's no estimate on that
    // side), never null/undefined, so `|| d.x`/`|| d.y` here used to
    // substitute the point estimate itself whenever the true lower bound was
    // legitimately 0 (common for rarer serotypes) — collapsing the lower
    // whisker to nothing instead of drawing it down to the axis floor. Just
    // floor the real bound.
    xlo: Math.max(d.xlo, domMin), xhi: Math.min(Math.max(d.xhi, domMin), domMax),
    ylo: Math.max(d.ylo, domMin), yhi: Math.min(Math.max(d.yhi, domMin), domMax)
  }));

  return Plot.plot({
    width: Math.min(width, 640),
    height: 560,
    marginLeft: 58,
    marginBottom: 46,
    x: { type: "log", base: Math.E, domain: [domMin, domMax],
         label: "IPD nowcast, predicted cases (time series, <5 years, natural-log scale)",
         grid: true, tickFormat: fmtInc },
    y: { type: "log", base: Math.E, domain: [domMin, domMax],
         label: "IPD from carriage detection, predicted cases (natural-log scale)",
         grid: true, tickFormat: fmtInc },
    marks: [
      Plot.line([{ x: domMin, y: domMin }, { x: domMax, y: domMax }], {
        x: "x", y: "y", stroke: "#999", strokeDasharray: "4 3"
      }),
      // 95% interval bars: horizontal = nowcast uncertainty, vertical = carriage-based uncertainty.
      Plot.ruleY(rows, { y: "y", x1: "xlo", x2: "xhi", stroke: d => colorFor.get(d.st) ?? "#999", strokeOpacity: 0.5 }),
      Plot.ruleX(rows, { x: "x", y1: "ylo", y2: "yhi", stroke: d => colorFor.get(d.st) ?? "#999", strokeOpacity: 0.5 }),
      Plot.dot(rows, {
        x: "x", y: "y", r: 5.5, fill: d => colorFor.get(d.st) ?? "#999",
        stroke: "white", strokeWidth: 0.8, tip: true,
        title: d => `Serotype ${d.st}\n` +
          `IPD nowcast: ${d.x0 > 0 ? `${fmtInc(d.x0)} (${fmtInc(d.xlo)}-${fmtInc(d.xhi)})` : "0 (no estimate)"}\n` +
          `IPD from carriage: ${d.y0 > 0 ? `${fmtInc(d.y0)} (${fmtInc(d.ylo)}-${fmtInc(d.yhi)})` : "0 (no estimate)"}`
      })
    ]
  });
}

Download the data

Reminder that data should not be disseminated except as laid out in the subscription agreement

Change in IPD cases, last observed year to last forecast year

This figure shows the change in the number of IPD cases for each serotype between the last observed year (2024, reported data) and the last forecast year (2026, median of the predictive distribution). Error bars reflect the 95% uncertainty interval of the forecast. Positive values indicate a predicted increase and negative bars a predicted decrease. Each age group has its own scale.

Figure 1: Predicted absolute change in IPD cases, 2024 to 2026, by serotype and age group, with 95% uncertainty intervals