Enarratio gallery

// Entries per year by type, counted from one row per entry: the CV's overview chart.
import { barChart } from "enarratio/plot";

const entries = [
  ...Array.from({ length: 3 }, () => ({ year: 2019, type: "Publications" })),
  { year: 2019, type: "Talks" },
  ...Array.from({ length: 4 }, () => ({ year: 2020, type: "Publications" })),
  { year: 2020, type: "Grants" },
  ...Array.from({ length: 2 }, () => ({ year: 2021, type: "Talks" })),
  ...Array.from({ length: 5 }, () => ({ year: 2021, type: "Publications" })),
  ...Array.from({ length: 6 }, () => ({ year: 2022, type: "Publications" })),
  ...Array.from({ length: 2 }, () => ({ year: 2022, type: "Grants" })),
  ...Array.from({ length: 3 }, () => ({ year: 2022, type: "Talks" })),
  ...Array.from({ length: 4 }, () => ({ year: 2023, type: "Publications" })),
  ...Array.from({ length: 4 }, () => ({ year: 2023, type: "Talks" })),
  ...Array.from({ length: 7 }, () => ({ year: 2024, type: "Publications" })),
  { year: 2024, type: "Grants" },
  ...Array.from({ length: 2 }, () => ({ year: 2024, type: "Talks" })),
];

export default barChart({
  id: "entries-by-year",
  data: entries,
  x: "year",
  series: "type",
  seriesDomain: ["Publications", "Grants", "Talks"],
  directLabels: true,
  xLabel: "Year",
  yLabel: "Entries",
  title: "Entries per year",
  alt: "Stacked bars of CV entries per year from 2019 to 2024. Publications lead every year except 2023, when talks matched them; 2024 is the busiest year with 10 entries.",
  caption: "Illustrative data.",
  source: "Sample CV",
  byline: "Sample Lab",
});

// Selecting a year: bars filter by category, link to a filtered page without script, and thin their labels.
import { barChart } from "enarratio/plot";

const types = ["Publications", "Grants", "Talks"] as const;
const entries = Array.from({ length: 22 }, (_, i) => 2005 + i).flatMap((year, i) =>
  types.flatMap((type, t) =>
    Array.from({ length: (i * (t + 2) + t * 3) % 5 }, () => ({ year, type })),
  ),
);

export default barChart({
  id: "entries-by-year-select",
  data: entries,
  x: "year",
  series: "type",
  seriesDomain: [...types],
  xDomain: Array.from({ length: 22 }, (_, i) => 2005 + i),
  filterBy: "x",
  href: (year) => `?year=${year}`,
  maxXTicks: 8,
  xLabel: "Year",
  yLabel: "Entries",
  title: "Entries per year, 2005 to 2026",
  alt: "Stacked bars of CV entries per year from 2005 to 2026, by type. Every year has between 3 and 12 entries, peaking at 12 every fifth year: 2007, 2012, 2017 and 2022.",
  caption:
    "Illustrative data. Clicking a bar selects its year; with scripts off, each bar links to that year.",
});

// Runs per day on a time axis: no pre-formatted labels, and quiet days stay in the picture.
import { barChart } from "enarratio/plot";

const sites = ["Austin", "Boston", "Chicago"] as const;
// A run is one row with a time. Enarratio puts each in its day and counts them; days with no
// runs (13 and 14 June) still get a slot.
const runs = Array.from({ length: 20 * 6 }, (_, i) => {
  const day = Math.floor(i / 6);
  const weekend = day % 7 === 4 || day % 7 === 5;
  return { day, hour: 6 + (i % 6) * 3, site: sites[(i + day) % 3] as string, weekend };
})
  .filter((r) => !r.weekend || r.hour === 6)
  .filter((r) => !(r.day === 4 || r.day === 5))
  .map((r) => ({
    at: new Date(Date.UTC(2026, 5, 9 + r.day, r.hour)).toISOString(),
    site: r.site,
  }));

export default barChart({
  id: "runs-per-day",
  data: runs,
  x: "at",
  xType: "time",
  interval: "day",
  series: "site",
  xLabel: "Day",
  yLabel: "Runs",
  title: "Analysis runs per day, by site",
  alt: "Analysis runs per day at three sites, 9 to 28 June 2026. Most days have six runs, two from each site. There are none on 13 and 14 June, and one run on each of 20, 21, 27 and 28 June.",
  caption: "Illustrative data. Every day between the first and last run has a bar slot.",
});

// Two measurements per category, side by side.
import { barChart } from "enarratio/plot";

const results = [
  { assay: "Plaque", method: "Manual", hours: 72 },
  { assay: "Plaque", method: "Automated", hours: 48 },
  { assay: "TCID50", method: "Manual", hours: 120 },
  { assay: "TCID50", method: "Automated", hours: 96 },
  { assay: "qPCR", method: "Manual", hours: 6 },
  { assay: "qPCR", method: "Automated", hours: 4 },
];

export default barChart({
  data: results,
  x: "assay",
  y: "hours",
  series: "method",
  layout: "grouped",
  xLabel: "Assay",
  yLabel: "Hours to result",
  title: "Time to result by assay",
  alt: "Grouped bars of hours to result for three assays. Automation saves a day on plaque assays (72 to 48 hours) and TCID50 (120 to 96), and two hours on qPCR (6 to 4).",
  caption: "Illustrative data.",
});

// A ranking with long category names reads best as horizontal bars.
import { barChart } from "enarratio/plot";

const pages = [
  { page: "Teaching and mentoring", views: 1840 },
  { page: "Publications", views: 1320 },
  { page: "Influenza surveillance notes", views: 960 },
  { page: "Curriculum vitae", views: 720 },
  { page: "Contact", views: 310 },
];

export default barChart({
  data: pages,
  x: "page",
  y: "views",
  orientation: "horizontal",
  xLabel: null,
  yLabel: "Views",
  title: "Most viewed pages",
  alt: "Horizontal bars ranking five pages by views: Teaching and mentoring leads with 1,840, then Publications 1,320, surveillance notes 960, the CV 720 and Contact 310.",
});

// Signed changes about zero, sorted, each labeled with its sign.
import { divergingBarChart } from "enarratio/plot";

const change = [
  { county: "Ashe", points: 4.2 },
  { county: "Buncombe", points: 2.8 },
  { county: "Catawba", points: 1.1 },
  { county: "Durham", points: -0.6 },
  { county: "Forsyth", points: -1.9 },
  { county: "Guilford", points: 0.4 },
  { county: "Haywood", points: -3.4 },
  { county: "Iredell", points: 2.1 },
];

export default divergingBarChart({
  data: change,
  x: "county",
  y: "points",
  sort: "descending",
  positiveLabel: "Rose",
  negativeLabel: "Fell",
  xLabel: null,
  yLabel: "Change in vaccination rate (percentage points)",
  title: "Vaccination rate change, 2024 to 2025",
  alt: "Change in vaccination rate by county from 2024 to 2025: five counties rose, led by Ashe at +4.2 points, and three fell, the most Haywood at −3.4 points.",
  caption: "Illustrative data.",
});

// Grouped bars with 95% confidence intervals as error bars.
import { barChart } from "enarratio/plot";

const assays = [
  { strain: "PR8", treatment: "Control", titer: 6.1, lo: 5.6, hi: 6.6 },
  { strain: "PR8", treatment: "Antiviral", titer: 3.9, lo: 3.2, hi: 4.6 },
  { strain: "WSN", treatment: "Control", titer: 6.8, lo: 6.4, hi: 7.2 },
  { strain: "WSN", treatment: "Antiviral", titer: 4.4, lo: 3.9, hi: 4.9 },
  { strain: "Cal09", treatment: "Control", titer: 5.7, lo: 5.1, hi: 6.3 },
  { strain: "Cal09", treatment: "Antiviral", titer: 5.0, lo: 4.3, hi: 5.7 },
];

export default barChart({
  data: assays,
  x: "strain",
  y: "titer",
  series: "treatment",
  layout: "grouped",
  errorBars: { lower: "lo", upper: "hi", label: "95% CI" },
  xLabel: "Strain",
  yLabel: "Titer (log10 PFU/mL)",
  title: "Viral titer with and without antiviral",
  alt: "Mean viral titer for three strains, control against antiviral, with 95% confidence intervals: the antiviral lowers titer by about 2.3 log10 for PR8 and WSN, with intervals far apart, and by 0.7 for Cal09, where the intervals overlap.",
  caption: "Illustrative data. Error bars are 95% confidence intervals of the mean, n = 6.",
});

// A bridge from one total to another through increases and decreases.
import { waterfallChart } from "enarratio/plot";

const budget = [
  { item: "2025 budget", amount: 1200, total: true },
  { item: "New grant", amount: 340 },
  { item: "Indirect costs", amount: 85 },
  { item: "Ended award", amount: -260 },
  { item: "Equipment", amount: -140 },
  { item: "Salaries", amount: -95 },
  { item: "2026 budget", amount: null, total: true },
];

export default waterfallChart({
  data: budget,
  x: "item",
  y: "amount",
  total: "total",
  xLabel: null,
  yLabel: "Thousands of dollars",
  title: "Lab budget, 2025 to 2026",
  alt: "Waterfall from the 2025 lab budget of $1,200k to the 2026 budget of $1,130k: a new grant adds $340k and indirect costs $85k, while an ended award removes $260k, equipment $140k and salaries $95k.",
  caption: "Illustrative data.",
});

// Weekly counts over time, with a gap, a threshold and an event marker.
import { lineChart } from "enarratio/plot";

const counties = ["Travis", "Hays", "Williamson"] as const;
const base = { Travis: 42, Hays: 18, Williamson: 27 };
const weekly = counties.flatMap((county) =>
  Array.from({ length: 16 }, (_, week) => {
    const wave = Math.round(base[county] * (1 + 0.9 * Math.exp(-(((week - 9) / 3) ** 2))));
    // Hays did not report in week 6: a gap, not a zero.
    const cases = county === "Hays" && week === 6 ? null : wave;
    return { week: new Date(Date.UTC(2025, 9, 6 + week * 7)), county, cases };
  }),
);

export default lineChart({
  id: "weekly-cases",
  data: weekly,
  x: "week",
  y: "cases",
  series: "county",
  xLabel: "Week starting",
  yLabel: "Positive tests",
  references: [{ y: 60, label: "Alert threshold" }],
  markers: [{ x: "2025-11-24", label: "Holiday" }],
  directLabels: true,
  title: "Weekly positive tests by county",
  subtitle: "One line per county. The dashed line is the alert threshold.",
  alt: "All three counties peaked in the week of 8 December, and only Travis passed the alert threshold of 60.",
  caption:
    "Drag across the chart, or hold Shift with the arrow keys, to pick a range. Hays did not report in the week of 17 November.",
  notes: "A positive test is one lab-confirmed result.",
  source: {
    name: "Sample health department (illustrative data)",
    href: "https://example.com/data",
  },
});

// A forecast the caller computed: dashed after 24 February, with its 95% interval as a band.
import { lineChart } from "enarratio/plot";

// Observed daily visits, then a forecast made elsewhere (here: a straight trend with a widening
// interval). Enarratio draws the numbers it is given; it does not estimate them.
const days = Array.from({ length: 28 }, (_, i) => {
  const at = new Date(Date.UTC(2026, 1, 3 + i));
  const trend = 120 + i * 3 + 8 * Math.sin(i / 2);
  const forecast = i > 20;
  const spread = forecast ? 6 + (i - 20) * 4 : 0;
  return {
    day: at,
    visits: Math.round(trend),
    lower: forecast ? Math.round(trend - spread) : null,
    upper: forecast ? Math.round(trend + spread) : null,
  };
});

export default lineChart({
  id: "visits-forecast",
  data: days,
  x: "day",
  y: "visits",
  band: { lower: "lower", upper: "upper", label: "95% interval" },
  forecastFrom: "2026-02-23",
  forecastLabel: "Forecast",
  xLabel: "Day",
  yLabel: "Visits",
  title: "Daily visits and a one-week forecast",
  alt: "Daily visits from 3 February to 2 March 2026, rising from about 120 to about 207. From 24 February the line is a forecast: it continues the rise to about 207 by 2 March, with a 95% interval that widens from plus or minus 10 to plus or minus 34.",
  caption: "Illustrative data. The forecast and its interval were computed outside Enarratio.",
});

// A line chart with a highlighted range, a note and an arrow.
import { lineChart } from "enarratio/plot";

const weekly = [12, 14, 13, 18, 26, 41, 63, 88, 104, 97, 81, 60, 44, 33, 25, 21].map(
  (visits, i) => ({ week: new Date(Date.UTC(2025, 9, 6 + 7 * i)), visits }),
);

export default lineChart({
  data: weekly,
  x: "week",
  y: "visits",
  xLabel: null,
  yLabel: "ILI visits",
  annotations: [
    { type: "range", axis: "x", from: "2025-12-22", to: "2026-01-12", label: "Winter break" },
    { type: "note", x: "2025-12-01", y: 104, text: "Peak, 104 visits", dx: 64, dy: 28 },
  ],
  title: "Influenza-like illness visits, fall 2025",
  alt: "Weekly influenza-like illness visits from October 2025 to January 2026 rise from 12 to a peak of 104 in the week of 1 December, then fall to 21.",
  caption: "Illustrative data.",
});

// Stacked areas: parts of a whole over time.
import { areaChart } from "enarratio/plot";

const activities = ["Research", "Teaching", "Service"] as const;
const hours = {
  Research: [22, 20, 18, 24, 26, 25],
  Teaching: [12, 14, 16, 10, 9, 12],
  Service: [6, 6, 7, 6, 5, 6],
};
const monthly = activities.flatMap((activity) =>
  hours[activity].map((h, i) => ({
    month: new Date(Date.UTC(2025, 8 + i, 1)),
    activity,
    hours: h,
  })),
);

export default areaChart({
  data: monthly,
  x: "month",
  y: "hours",
  series: "activity",
  xLabel: "Month",
  yLabel: "Hours per week",
  title: "Where the week goes",
  alt: "Stacked areas of weekly hours by activity from September 2025 to February 2026. Research is the largest share throughout, rising to 26 hours in January; teaching peaks at 16 hours in November; service stays near 6.",
  caption: "Illustrative data.",
});

// Each month stacked to 100%: how the whole divides as its total changes.
import { areaChart } from "enarratio/plot";

const months = ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06"];
const share: Record<string, number[]> = {
  H1N1pdm09: [52, 46, 38, 30, 24, 20],
  H3N2: [38, 42, 44, 40, 36, 30],
  "B/Victoria": [10, 12, 18, 30, 40, 50],
};
const detections = Object.entries(share).flatMap(([subtype, counts]) =>
  counts.map((count, i) => ({ month: `${months[i]}-01`, subtype, count })),
);

export default areaChart({
  data: detections,
  x: "month",
  y: "count",
  series: "subtype",
  percent: true,
  xLabel: null,
  title: "Influenza detections by subtype",
  alt: "Share of influenza detections by subtype, January to June 2025: H1N1pdm09 falls from 52% to 20%, H3N2 stays near 40%, and B/Victoria rises from 10% to half of detections.",
  caption: "Illustrative data. Each month adds to 100%.",
});

// One line chart per region on shared scales, so panels compare by position.
import { smallMultiples } from "enarratio/plot";

const regions: Record<string, number[]> = {
  Northeast: [4, 6, 9, 15, 22, 18, 12, 8],
  Southeast: [7, 11, 16, 21, 19, 14, 10, 7],
  Midwest: [3, 4, 6, 10, 16, 23, 19, 13],
  Southwest: [5, 7, 8, 9, 11, 10, 9, 8],
  West: [2, 3, 5, 8, 12, 17, 21, 18],
  Northwest: [1, 2, 3, 5, 8, 12, 15, 16],
};
const weekly = Object.entries(regions).flatMap(([region, values]) =>
  values.map((rate, i) => ({ region, week: i + 1, rate })),
);

export default smallMultiples({
  chart: "line",
  data: weekly,
  facet: "region",
  x: "week",
  y: "rate",
  xLabel: "Week of season",
  yLabel: "Positivity (%)",
  title: "Influenza positivity by region",
  alt: "Six panels of weekly influenza positivity on shared scales: the Southeast peaks first, at 21% in week 4, the Northeast at 22% in week 5, the Midwest at 23% in week 6, and the West and Northwest last, near weeks 7 and 8; the Southwest stays flat near 10%.",
  caption: "Illustrative data.",
});

// One bar chart per clinic on a shared scale, stacked by visit type.
import { smallMultiples } from "enarratio/plot";

const rows: [string, string, number, number][] = [
  ["North", "Q1", 120, 40],
  ["North", "Q2", 135, 52],
  ["North", "Q3", 128, 61],
  ["North", "Q4", 150, 70],
  ["Central", "Q1", 210, 35],
  ["Central", "Q2", 198, 41],
  ["Central", "Q3", 205, 44],
  ["Central", "Q4", 220, 48],
  ["South", "Q1", 80, 72],
  ["South", "Q2", 92, 88],
  ["South", "Q3", 101, 97],
  ["South", "Q4", 110, 115],
];
const visits = rows.flatMap(([clinic, quarter, inPerson, video]) => [
  { clinic, quarter, type: "In person", visits: inPerson },
  { clinic, quarter, type: "Video", visits: video },
]);

export default smallMultiples({
  chart: "bar",
  data: visits,
  facet: "clinic",
  x: "quarter",
  y: "visits",
  series: "type",
  xLabel: null,
  yLabel: "Visits",
  title: "Clinic visits by quarter",
  alt: "Three panels of quarterly visits on a shared scale: Central is busiest, about 250 a quarter, nearly all in person; North grows from 160 to 220 with video rising; South grows from 152 to 225, with video overtaking in-person visits in the fourth quarter.",
  caption: "Illustrative data.",
});

// Two measurements per sample, grouped, with a regression line on a log axis.
import { scatterPlot } from "enarratio/plot";

const isolates = [
  { id: "A1", clade: "2.3.4.4b", ct: 18.2, titer: 5.2e6 },
  { id: "A2", clade: "2.3.4.4b", ct: 21.5, titer: 6.1e5 },
  { id: "A3", clade: "2.3.4.4b", ct: 24.9, titer: 4.8e4 },
  { id: "A4", clade: "2.3.4.4b", ct: 27.3, titer: 9.5e3 },
  { id: "A5", clade: "2.3.4.4b", ct: 30.8, titer: 7.2e2 },
  { id: "B1", clade: "2.3.2.1c", ct: 19.4, titer: 2.1e6 },
  { id: "B2", clade: "2.3.2.1c", ct: 22.8, titer: 1.9e5 },
  { id: "B3", clade: "2.3.2.1c", ct: 26.1, titer: 2.4e4 },
  { id: "B4", clade: "2.3.2.1c", ct: 29.6, titer: 1.6e3 },
];

export default scatterPlot({
  data: isolates,
  x: "ct",
  y: "titer",
  series: "clade",
  label: "id",
  yType: "log",
  regression: true,
  xLabel: "Cycle threshold (Ct)",
  yLabel: "Infectious titer (PFU/mL)",
  title: "Ct value against infectious titer",
  alt: "Scatter plot of nine isolates from two clades: infectious titer falls about tenfold for every 3.3 Ct cycles in both clades, from about 5 million PFU/mL at Ct 18 to about 700 at Ct 31.",
  caption: "Illustrative data. Each series has its own symbol as well as its own color.",
});

// Points sized by a third measurement, with a legend of reference sizes.
import { scatterPlot } from "enarratio/plot";

const sites = [
  { site: "Asheville", samples: 120, positivity: 8.1, wastewater: 42 },
  { site: "Boone", samples: 45, positivity: 5.2, wastewater: 18 },
  { site: "Charlotte", samples: 410, positivity: 11.4, wastewater: 96 },
  { site: "Durham", samples: 260, positivity: 9.8, wastewater: 61 },
  { site: "Greensboro", samples: 300, positivity: 7.4, wastewater: 55 },
  { site: "Raleigh", samples: 380, positivity: 12.6, wastewater: 88 },
  { site: "Wilmington", samples: 150, positivity: 6.3, wastewater: 30 },
];

export default scatterPlot({
  data: sites,
  x: "wastewater",
  y: "positivity",
  size: "samples",
  sizeLabel: "Samples",
  label: "site",
  xLabel: "Wastewater signal (copies per person, thousands)",
  yLabel: "Test positivity (%)",
  title: "Wastewater signal and test positivity by site",
  alt: "Bubble chart of seven sites: test positivity rises with wastewater signal, from 5.2% at Boone (signal 18, 45 samples) to 12.6% at Raleigh (signal 88, 380 samples); larger sites sit to the upper right.",
  caption: "Illustrative data. Bubble area shows the number of samples.",
});

// A histogram of one measurement, with a density curve over it.
import { histogram } from "enarratio/plot";

// A fixed sample, so the gallery draws the same chart every time.
let seed = 7;
const random = (): number => {
  seed = (seed * 16807) % 2147483647;
  return seed / 2147483647;
};
const normal = (mean: number, sd: number): number =>
  mean + sd * Math.sqrt(-2 * Math.log(random())) * Math.cos(2 * Math.PI * random());
const cells = Array.from({ length: 240 }, () => ({
  diameter: Math.round(normal(12.4, 1.8) * 10) / 10,
}));

export default histogram({
  data: cells,
  x: "diameter",
  thresholds: 14,
  density: true,
  xLabel: "Cell diameter (µm)",
  title: "Cell diameters",
  alt: "Histogram of 240 cell diameters: one peak near 12.5 µm, roughly symmetric, with nearly all cells between 8 and 17 µm.",
  caption: "Illustrative data.",
});

// Smoothed distributions of one measurement, compared on shared axes.
import { densityPlot } from "enarratio/plot";

let seed = 11;
const random = (): number => {
  seed = (seed * 16807) % 2147483647;
  return seed / 2147483647;
};
const normal = (mean: number, sd: number): number =>
  mean + sd * Math.sqrt(-2 * Math.log(random())) * Math.cos(2 * Math.PI * random());
const groups = { "Wild type": [24, 3], ΔNS1: [31, 4], "PA-X null": [27, 6] } as const;
const ct = Object.entries(groups).flatMap(([virus, [mean, sd]]) =>
  Array.from({ length: 80 }, () => ({ virus, ct: Math.round(normal(mean, sd) * 10) / 10 })),
);

export default densityPlot({
  data: ct,
  x: "ct",
  series: "virus",
  xLabel: "Cycle threshold (Ct)",
  title: "Ct values by virus",
  alt: "Density of Ct values for three viruses, 80 samples each: wild type peaks near Ct 24, PA-X null near 27 and spreads widest, and ΔNS1 peaks latest, near 32.",
  caption: "Illustrative data.",
});

// Box plots by group, every value drawn beside its box.
import { boxPlot } from "enarratio/plot";

const weights: Record<string, number[]> = {
  Chow: [24.1, 25.3, 23.8, 26.0, 24.7, 25.1, 23.2, 24.9, 25.8, 24.4],
  "High fat": [29.4, 31.2, 28.7, 33.5, 30.1, 32.0, 29.9, 30.6, 38.2, 31.4],
  "High fat + drug": [26.2, 27.8, 25.9, 28.4, 27.1, 26.6, 29.0, 27.4, 26.8, 22.1],
};
const mice = Object.entries(weights).flatMap(([diet, values]) =>
  values.map((weight) => ({ diet, weight })),
);

export default boxPlot({
  data: mice,
  x: "diet",
  y: "weight",
  points: true,
  xLabel: "Diet",
  yLabel: "Body weight at 12 weeks (g)",
  title: "Body weight by diet",
  alt: "Box plots of body weight for three diets, ten mice each: chow has a median of 24.8 g, high fat 30.9 g with one heavy mouse at 38.2 g, and high fat with the drug 27.0 g with one light mouse at 22.1 g.",
  caption:
    "Illustrative data. Boxes span the quartiles; whiskers reach the furthest value within 1.5 IQR.",
});

// Every value as a point, spread in a beeswarm so none hides another.
import { stripPlot } from "enarratio/plot";

let seed = 3;
const random = (): number => {
  seed = (seed * 16807) % 2147483647;
  return seed / 2147483647;
};
const normal = (mean: number, sd: number): number =>
  mean + sd * Math.sqrt(-2 * Math.log(random())) * Math.cos(2 * Math.PI * random());
const cohorts = { "18 to 49": [62, 10], "50 to 64": [70, 9], "65 and over": [78, 7] } as const;
const scores = Object.entries(cohorts).flatMap(([age, [mean, sd]]) =>
  Array.from({ length: 40 }, () => ({ age, score: Math.min(100, Math.round(normal(mean, sd))) })),
);

export default stripPlot({
  data: scores,
  x: "age",
  y: "score",
  colorByGroup: true,
  xLabel: "Age group",
  yLabel: "Knowledge score",
  title: "Vaccine knowledge scores by age",
  alt: "Beeswarm of knowledge scores for 40 people in each of three age groups: scores rise with age, centered near 62 for 18 to 49, 70 for 50 to 64 and 78 for 65 and over, with the youngest group the most spread.",
  caption: "Illustrative data.",
});

// A dot plot: two values per item, told apart by color and symbol.
import { dotPlot } from "enarratio/plot";

const rates = [
  { state: "Georgia", year: "2015", rate: 41 },
  { state: "Georgia", year: "2025", rate: 52 },
  { state: "Ohio", year: "2015", rate: 44 },
  { state: "Ohio", year: "2025", rate: 49 },
  { state: "Oregon", year: "2015", rate: 39 },
  { state: "Oregon", year: "2025", rate: 55 },
  { state: "Texas", year: "2015", rate: 37 },
  { state: "Texas", year: "2025", rate: 46 },
  { state: "Vermont", year: "2015", rate: 51 },
  { state: "Vermont", year: "2025", rate: 58 },
];

export default dotPlot({
  data: rates,
  y: "state",
  x: "rate",
  series: "year",
  sort: "descending",
  xLabel: "Adults vaccinated against influenza (%)",
  title: "Influenza vaccination by state",
  alt: "Dot plot of adult influenza vaccination in five states, 2015 and 2025: every state rose, Oregon the most, from 39% to 55%, and Vermont stays highest at 58%.",
  caption: "Illustrative data.",
});

// Ranges from low to high, with the median marked.
import { rangePlot } from "enarratio/plot";

const analytes = [
  { analyte: "Hemoglobin (g/dL)", low: 11.8, high: 16.4, median: 14.1 },
  { analyte: "White cells (10³/µL)", low: 4.1, high: 10.9, median: 6.8 },
  { analyte: "Platelets (10⁴/µL)", low: 15.2, high: 39.6, median: 25.3 },
  { analyte: "Glucose (mmol/L)", low: 3.9, high: 7.2, median: 5.1 },
  { analyte: "Creatinine (mg/dL)", low: 0.6, high: 1.3, median: 0.9 },
];

export default rangePlot({
  data: analytes,
  y: "analyte",
  low: "low",
  high: "high",
  value: "median",
  valueLabel: "median",
  xLabel: "Value in the analyte's unit",
  title: "Central 95% of values in the cohort",
  alt: "Range of the central 95% of values for five blood analytes, with medians: hemoglobin 11.8 to 16.4 g/dL, white cells 4.1 to 10.9, platelets 15.2 to 39.6, glucose 3.9 to 7.2 mmol/L and creatinine 0.6 to 1.3 mg/dL.",
  caption: "Illustrative data. The tick marks the median.",
});

// Two values per item joined by a line, the ends told apart by fill as well as color.
import { dumbbellPlot } from "enarratio/plot";

const coverage = [
  { country: "Brazil", y2015: 72, y2025: 84 },
  { country: "India", y2015: 61, y2025: 89 },
  { country: "Kenya", y2015: 55, y2025: 71 },
  { country: "Peru", y2015: 80, y2025: 77 },
  { country: "Viet Nam", y2015: 68, y2025: 90 },
];

export default dumbbellPlot({
  data: coverage,
  y: "country",
  from: "y2015",
  to: "y2025",
  fromLabel: "2015",
  toLabel: "2025",
  sort: "change",
  xLabel: "Measles first-dose coverage (%)",
  title: "Measles vaccine coverage, 2015 and 2025",
  alt: "Dumbbell plot of measles first-dose coverage in five countries: India rose most, from 61% to 89%, Viet Nam from 68% to 90%, Kenya from 55% to 71% and Brazil from 72% to 84%, while Peru fell from 80% to 77%.",
  caption: "Illustrative data. Hollow circles are 2015, filled ones 2025.",
});

// A slope chart: each item's value at two times, labeled at both ends.
import { slopeChart } from "enarratio/plot";

const programs = [
  { program: "Biology", y2020: 412, y2025: 486 },
  { program: "Chemistry", y2020: 238, y2025: 251 },
  { program: "Microbiology", y2020: 118, y2025: 176 },
  { program: "Physics", y2020: 164, y2025: 142 },
  { program: "Public health", y2020: 196, y2025: 263 },
  { program: "Statistics", y2020: 92, y2025: 134 },
];

export default slopeChart({
  data: programs,
  label: "program",
  from: "y2020",
  to: "y2025",
  fromLabel: "2020",
  toLabel: "2025",
  title: "Enrolled majors, 2020 and 2025",
  alt: "Slope chart of majors in six programs between 2020 and 2025: five grew, Biology most, from 412 to 486, then Public health from 196 to 263, while Physics fell from 164 to 142.",
  caption: "Illustrative data.",
});

// Parts of one whole, as a donut: at most six slices, each labeled with its share.
import { pieChart } from "enarratio/plot";

const replies = [
  { answer: "Very confident", count: 412 },
  { answer: "Somewhat confident", count: 538 },
  { answer: "Not very confident", count: 201 },
  { answer: "Not at all confident", count: 87 },
  { answer: "Not sure", count: 46 },
];

export default pieChart({
  data: replies,
  label: "answer",
  value: "count",
  donut: true,
  centerLabel: "1,284 replies",
  title: "Confidence in vaccine safety",
  alt: "Donut chart of 1,284 survey replies: 74% are very or somewhat confident in vaccine safety (32% and 42%), 16% not very confident, 7% not at all, and 4% not sure.",
  caption: "Illustrative data.",
});

// A grid of values on the theme's sequential ramp.
import { heatmap } from "enarratio/plot";

const cohorts = ["Jan", "Feb", "Mar", "Apr", "May"];
const retention = cohorts.flatMap((cohort, c) =>
  Array.from({ length: 5 - c }, (_, m) => ({
    cohort,
    month: `M${m}`,
    retained: m === 0 ? 100 : Math.round(100 * 0.82 ** m - c * 2),
  })),
);

export default heatmap({
  data: retention,
  x: "month",
  y: "cohort",
  value: "retained",
  valueLabel: "% retained",
  xDomain: ["M0", "M1", "M2", "M3", "M4"],
  thresholds: [50, 60, 70, 85],
  xLabel: "Months since joining",
  yLabel: "Cohort",
  title: "Retention by cohort",
  alt: "Retention heatmap for five monthly cohorts: every cohort starts at 100% and falls about 18 points a month, reaching 45% at month four for the January cohort.",
  caption: "Illustrative data.",
});

// A table with an inline bar, heat cells and a sparkline in every row.
import { tableChart } from "enarratio";

const sites = [
  { site: "Asheville", tests: 1840, positivity: 8.2, change: 1.4, weeks: [5, 6, 6, 7, 8, 8.2] },
  { site: "Charlotte", tests: 5120, positivity: 11.6, change: 2.9, weeks: [7, 8, 9, 10, 11, 11.6] },
  {
    site: "Durham",
    tests: 3310,
    positivity: 9.1,
    change: -0.8,
    weeks: [10, 10.4, 9.9, 9.6, 9.3, 9.1],
  },
  {
    site: "Greensboro",
    tests: 2470,
    positivity: 6.4,
    change: -1.6,
    weeks: [8.2, 8, 7.4, 7, 6.8, 6.4],
  },
  {
    site: "Wilmington",
    tests: 1290,
    positivity: 4.9,
    change: 0.3,
    weeks: [4.5, 4.6, 4.4, 4.8, 4.7, 4.9],
  },
];

export default tableChart({
  data: sites,
  columns: [
    { field: "site", label: "Site" },
    { field: "tests", label: "Tests", kind: "bar" },
    { field: "positivity", label: "Positivity (%)", kind: "heat" },
    { field: "change", label: "Change (points)", kind: "bar" },
    { field: "weeks", label: "Last six weeks", kind: "sparkline" },
  ],
  title: "Testing by site this week",
  alt: "Testing at five sites this week: Charlotte runs the most tests, 5,120, and has the highest positivity, 11.6%, up 2.9 points; Wilmington has the lowest, 4.9%; positivity fell at Durham and Greensboro.",
  caption: "Illustrative data. Every cell prints its value; bars and colors repeat it.",
});

// A force-directed network, laid out on the server.
import { networkChart } from "enarratio/science";

const people = [
  ["Edwards", "Virology"],
  ["Okafor", "Virology"],
  ["Lindqvist", "Virology"],
  ["Ramos", "Epidemiology"],
  ["Chen", "Epidemiology"],
  ["Haddad", "Epidemiology"],
  ["Novak", "Statistics"],
  ["Ibarra", "Statistics"],
  ["Mbeki", "Public health"],
  ["Sato", "Public health"],
] as const;
const pairs = [
  ["Edwards", "Okafor"],
  ["Edwards", "Lindqvist"],
  ["Okafor", "Lindqvist"],
  ["Edwards", "Ramos"],
  ["Ramos", "Chen"],
  ["Chen", "Haddad"],
  ["Ramos", "Haddad"],
  ["Chen", "Novak"],
  ["Novak", "Ibarra"],
  ["Edwards", "Novak"],
  ["Haddad", "Mbeki"],
  ["Mbeki", "Sato"],
  ["Ramos", "Sato"],
  ["Lindqvist", "Ibarra"],
] as const;

export default networkChart({
  nodes: people.map(([id, group]) => ({ id, group })),
  links: pairs.map(([source, target]) => ({ source, target })),
  title: "Co-authorship network",
  alt: "Network of ten co-authors in four fields. Edwards and Ramos are the hubs, with four co-authors each. Edwards links the virus team to statistics and epidemiology. Ramos links epidemiology to public health.",
  caption: "Illustrative data. Links are co-authored papers.",
});

// Hemagglutination inhibition titers by timepoint on a two-fold dilution axis.
import { titerPlot } from "enarratio/science";

const titers: Record<string, number[]> = {
  "Day 0": [5, 5, 10, 10, 10, 20, 20, 40, 10, 10, 20, 10],
  "Day 14": [40, 80, 80, 160, 160, 160, 320, 80, 40, 160, 320, 640],
  "Day 28": [80, 160, 160, 320, 320, 320, 640, 160, 80, 320, 640, 1280],
  "Day 180": [20, 40, 40, 80, 80, 80, 160, 40, 20, 80, 160, 320],
};
const sera = Object.entries(titers).flatMap(([timepoint, values]) =>
  values.map((hai) => ({ timepoint, hai })),
);

export default titerPlot({
  data: sera,
  group: "timepoint",
  titer: "hai",
  dilution: { start: 10, factor: 2 },
  groupLabel: "Timepoint",
  titerLabel: "HAI titer",
  title: "HAI titers after vaccination",
  alt: "HAI titers for 12 participants at four timepoints. The geometric mean titer rises from about 12 at day 0 to about 270 at day 28, then wanes to about 67 by day 180. Two day 0 samples were below the 1:10 limit of detection.",
  caption:
    "Illustrative data. Bars are geometric mean titers with 95% confidence intervals; hollow points are below the limit of detection, plotted at half the limit.",
});

// A viral genome map: features to scale, arrows by strand, overlaps stacked into lanes.
import { genomeTrack } from "enarratio/science";

export default genomeTrack({
  length: 9719,
  features: [
    { name: "5' LTR", start: 1, end: 634, type: "LTR" },
    { name: "gag", start: 790, end: 2292, strand: 1, type: "Gene" },
    { name: "pol", start: 2085, end: 5096, strand: 1, type: "Gene" },
    { name: "vif", start: 5041, end: 5619, strand: 1, type: "Accessory" },
    { name: "vpr", start: 5559, end: 5850, strand: 1, type: "Accessory" },
    { name: "tat", start: 5831, end: 6045, strand: 1, type: "Accessory" },
    { name: "rev", start: 5970, end: 6045, strand: 1, type: "Accessory" },
    { name: "vpu", start: 6062, end: 6310, strand: 1, type: "Accessory" },
    { name: "env", start: 6225, end: 8795, strand: 1, type: "Gene" },
    { name: "nef", start: 8797, end: 9417, strand: 1, type: "Accessory" },
    { name: "3' LTR", start: 9086, end: 9719, type: "LTR" },
    { name: "asp", start: 7270, end: 8260, strand: -1, type: "Antisense" },
  ],
  typeDomain: ["Gene", "Accessory", "Antisense", "LTR"],
  title: "HIV-1 HXB2 genome",
  alt: "Map of the 9,719-nucleotide HIV-1 HXB2 genome: long terminal repeats at both ends; the gag, pol and env genes on the forward strand, overlapping at their junctions; six accessory genes between pol and env and after env; and the antisense asp gene on the reverse strand inside env.",
  caption:
    "Coordinates approximate the HXB2 reference (GenBank K03455) and are rounded for display.",
});

// Dose-response curves: four-parameter logistic fits with the IC50 marked.
import { doseResponse } from "enarratio/science";

const doses = [0.01, 0.03, 0.1, 0.3, 1, 3, 10, 30];
const curve = (ic50: number, hill: number, dose: number): number =>
  100 / (1 + (dose / ic50) ** hill);
// Three replicates per dose, offset by a fixed pattern of noise.
const noise = [-3.1, 1.8, 0.9, -1.2, 2.6, -0.4, 1.1, -2.2, 0.3];
const wells = (["Oseltamivir", "Baloxavir"] as const).flatMap((compound, c) =>
  doses.flatMap((dose, d) =>
    [0, 1, 2].map((r) => ({
      compound,
      dose,
      activity:
        Math.round(
          (curve(c === 0 ? 1.2 : 0.09, 1.1 + 0.3 * c, dose) + (noise[(d * 3 + r + c) % 9] ?? 0)) *
            10,
        ) / 10,
    })),
  ),
);

export default doseResponse({
  data: wells,
  dose: "dose",
  response: "activity",
  group: "compound",
  midpointLabel: "IC50",
  doseLabel: "Concentration (µM)",
  responseLabel: "Polymerase activity (% of control)",
  title: "Inhibition of viral polymerase activity",
  alt: "Dose-response curves for two antivirals, three replicates at eight concentrations: activity falls from about 100% to near 0 for both, baloxavir at about a fourteenth the concentration of oseltamivir, with IC50s near 0.09 µM and 1.2 µM.",
  caption: "Illustrative data.",
});

// Kaplan-Meier survival curves with censor marks and the number at risk.
import { survivalPlot } from "enarratio/science";

// Remission times in weeks for 6-MP and placebo (Freireich et al. 1963, Gehan 1965); a + marks censoring.
const arms: Record<string, string> = {
  "6-MP": "6 6 6 6+ 7 9+ 10 10+ 11+ 13 16 17+ 19+ 20+ 22 23 25+ 32+ 32+ 34+ 35+",
  Placebo: "1 1 2 2 3 4 4 5 5 8 8 8 8 11 11 12 12 15 17 22 23",
};
const patients = Object.entries(arms).flatMap(([arm, times]) =>
  times.split(" ").map((t) => ({ arm, weeks: Number.parseInt(t, 10), relapsed: !t.endsWith("+") })),
);

export default survivalPlot({
  data: patients,
  time: "weeks",
  event: "relapsed",
  group: "arm",
  timeLabel: "Weeks",
  survivalLabel: "Remaining in remission",
  title: "Remission in childhood leukemia",
  alt: "Kaplan-Meier curves of remission for 21 patients on 6-MP and 21 on placebo: every placebo patient relapsed by week 23, with half by week 8, while on 6-MP 12 were censored and the estimate stays at 0.45 from week 23.",
  caption: "Freireich et al. (1963) as tabulated by Gehan (1965).",
});

// A forest plot: study estimates with intervals, and the pooled estimate as a diamond.
import { forestPlot } from "enarratio/science";

const trials = [
  { trial: "Alvarez 2019", or: 0.72, lo: 0.51, hi: 1.02 },
  { trial: "Becker 2020", or: 0.85, lo: 0.66, hi: 1.09 },
  { trial: "Chen 2021", or: 0.61, lo: 0.4, hi: 0.93 },
  { trial: "Diallo 2022", or: 1.04, lo: 0.7, hi: 1.55 },
  { trial: "Evans 2023", or: 0.78, lo: 0.63, hi: 0.97 },
  { trial: "Fischer 2024", or: 0.69, lo: 0.46, hi: 1.04 },
];

export default forestPlot({
  data: trials,
  label: "trial",
  estimate: "or",
  lower: "lo",
  upper: "hi",
  log: true,
  pooled: "random",
  estimateLabel: "Odds ratio of hospitalization (95% CI)",
  favors: ["Favors vaccine", "Favors placebo"],
  title: "Vaccination and hospitalization, six trials",
  alt: "Forest plot of six trials: five odds ratios fall below 1, two of their intervals clear of it, and one, Diallo 2022, sits just above 1; the pooled random-effects odds ratio is about 0.79, with an interval below 1.",
  caption: "Illustrative data.",
});

// A phylogenetic tree from Newick, tips colored by clade, support at the nodes.
import { phylogeneticTree } from "enarratio/science";

const newick =
  "((((A/duck/Ohio/2024:0.012,A/chicken/Iowa/2024:0.009)98:0.006,A/cow/Texas/2024:0.015)87:0.011,(A/gull/Maine/2023:0.018,A/fox/Vermont/2023:0.021)92:0.009)100:0.024,((A/duck/Hokkaido/2022:0.016,A/swan/Niigata/2022:0.013)95:0.019,A/goose/Guangdong/1996:0.052)76:0.008);";

export default phylogeneticTree({
  tree: newick,
  groups: {
    "A/duck/Ohio/2024": "2.3.4.4b, B3.13",
    "A/chicken/Iowa/2024": "2.3.4.4b, B3.13",
    "A/cow/Texas/2024": "2.3.4.4b, B3.13",
    "A/gull/Maine/2023": "2.3.4.4b, other",
    "A/fox/Vermont/2023": "2.3.4.4b, other",
    "A/duck/Hokkaido/2022": "2.3.4.4b, Asia",
    "A/swan/Niigata/2022": "2.3.4.4b, Asia",
    "A/goose/Guangdong/1996": "Ancestral",
  },
  title: "H5N1 hemagglutinin phylogeny",
  alt: "Rectangular phylogenetic tree of eight H5N1 hemagglutinin sequences: the three 2024 B3.13 viruses from a duck, a chicken and a cow cluster together with 98 and 87 support, beside two 2023 New England viruses; two 2022 Japanese viruses group with the 1996 Guangdong goose virus on the longest branch.",
  caption: "Illustrative tree and branch lengths.",
});

// A primitive as a whole figure (the default): title, generated description, drawing, table and CSV.
import { sparkline } from "enarratio";

export default sparkline({
  values: [4, 5, 7, 11, 8, 10],
  label: "Entries per year, 2019 to 2024",
  area: true,
});

// Small primitives with the same styling: progress rings inline, and an uptime strip as a figure.
import { progressRing, type UptimeStatus, uptimeStrip } from "enarratio";

const hours = Array.from({ length: 48 }, (_, i): UptimeStatus => {
  if (i < 4) return "unknown";
  if (i === 30) return "down";
  return i === 29 || i === 31 ? "degraded" : "up";
});

export default `<div class="primitives">
${progressRing({ value: 7, max: 12, label: "Chapters drafted", inline: true })}
${progressRing({ value: 0.92, label: "Tests passing", size: 56, inline: true })}
${uptimeStrip({ slots: hours, label: "Site, last 48 hours" })}
</div>`;