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.
// jscpd:ignore-start: each example is a snippet the gallery shows whole, so each keeps its own seeded sample
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());
// jscpd:ignore-end
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";

// jscpd:ignore-start: each example is a snippet the gallery shows whole, so each keeps its own seeded sample
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());
// jscpd:ignore-end
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";

// jscpd:ignore-start: each example is a snippet the gallery shows whole, so each keeps its own seeded sample
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());
// jscpd:ignore-end
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: 30 }, () => ({ 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 30 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.",
});

// Parts of a whole in two levels: each top-level group takes a color and a header with its total.
import { treemap } from "enarratio/plot";

const spending = [
  { group: "Housing", item: "Rent or mortgage", dollars: 1420 },
  { group: "Housing", item: "Utilities", dollars: 310 },
  { group: "Housing", item: "Insurance", dollars: 140 },
  { group: "Transport", item: "Car payment", dollars: 520 },
  { group: "Transport", item: "Fuel", dollars: 210 },
  { group: "Transport", item: "Transit", dollars: 60 },
  { group: "Food", item: "Groceries", dollars: 610 },
  { group: "Food", item: "Eating out", dollars: 290 },
  { group: "Health", item: "Premiums", dollars: 380 },
  { group: "Health", item: "Out of pocket", dollars: 120 },
  { group: "Other", item: "Savings", dollars: 400 },
  { group: "Other", item: "Leisure", dollars: 180 },
  { group: "Other", item: "Clothing", dollars: 110 },
];

export default treemap({
  data: spending,
  path: ["group", "item"],
  value: "dollars",
  valueLabel: "Dollars a month",
  formatValue: (v) => `$${v.toLocaleString("en-US")}`,
  title: "Where a monthly budget of $4,750 goes",
  alt: "Treemap of a $4,750 monthly household budget: housing takes $1,870 (39%), mostly rent; food $900, transport $790, other spending $690 (of which $400 is savings) and health $500.",
  caption: "Illustrative data.",
});

// Parts of a whole in levels, read from the center out: each group keeps its color in every ring.
import { sunburst } from "enarratio/plot";

const reads = [
  { kingdom: "Bacteria", phylum: "Bacillota", reads: 41200 },
  { kingdom: "Bacteria", phylum: "Bacteroidota", reads: 28900 },
  { kingdom: "Bacteria", phylum: "Pseudomonadota", reads: 9800 },
  { kingdom: "Bacteria", phylum: "Actinomycetota", reads: 6100 },
  { kingdom: "Bacteria", phylum: "Verrucomicrobiota", reads: 2400 },
  { kingdom: "Archaea", phylum: "Methanobacteriota", reads: 3100 },
  { kingdom: "Archaea", phylum: "Thermoproteota", reads: 400 },
  { kingdom: "Eukaryota", phylum: "Ascomycota", reads: 1900 },
  { kingdom: "Eukaryota", phylum: "Basidiomycota", reads: 700 },
  { kingdom: "Viruses", phylum: "Uroviricota", reads: 4300 },
  { kingdom: "Viruses", phylum: "Phixviricota", reads: 1200 },
];

export default sunburst({
  data: reads,
  path: ["kingdom", "phylum"],
  value: "reads",
  valueLabel: "Reads",
  title: "Classified reads in one stool sample",
  alt: "Sunburst of 100,000 classified reads: bacteria make up 88%, led by Bacillota (41%) and Bacteroidota (29%); viruses 5.5%, archaea 3.5% and eukaryotes 2.6%.",
  caption: "Illustrative data.",
});

// Stages of a process: each bar prints its count and share of the first stage, and each gap the
// share of the previous stage that carried on.
import { funnelChart } from "enarratio/plot";

const enrollment = [
  { stage: "Invited", people: 12000 },
  { stage: "Opened the invitation", people: 7450 },
  { stage: "Screened", people: 3120 },
  { stage: "Eligible", people: 1890 },
  { stage: "Consented", people: 1240 },
  { stage: "Enrolled", people: 1105 },
];

export default funnelChart({
  data: enrollment,
  stage: "stage",
  value: "people",
  valueLabel: "People",
  title: "From invitation to enrollment in a vaccine trial",
  alt: "Funnel of trial recruitment: of 12,000 people invited, 1,105 (9.2%) enrolled. The largest drop is from opening the invitation to screening, where 42% carried on; 89% of those who consented enrolled.",
  caption: "Illustrative data.",
});

// Flows from stage to stage: each band is as thick as what it carries.
import { sankeyDiagram } from "enarratio/plot";

const patients = [
  { from: "Referred", to: "Seen in clinic", patients: 820 },
  { from: "Referred", to: "Did not attend", patients: 140 },
  { from: "Walk-in", to: "Seen in clinic", patients: 310 },
  { from: "Seen in clinic", to: "Treated as outpatient", patients: 760 },
  { from: "Seen in clinic", to: "Admitted", patients: 290 },
  { from: "Seen in clinic", to: "Referred on", patients: 80 },
  { from: "Admitted", to: "Discharged home", patients: 240 },
  { from: "Admitted", to: "Transferred", patients: 50 },
];

export default sankeyDiagram({
  data: patients,
  from: "from",
  to: "to",
  value: "patients",
  valueLabel: "Patients",
  title: "Where clinic patients went in one quarter",
  alt: "Sankey diagram of 1,270 patients: 1,130 were seen in clinic (820 referred, 310 walk-ins) and 140 referrals did not attend. Of those seen, 760 were treated as outpatients, 290 admitted and 80 referred on; 240 of the admitted went home.",
  caption: "Illustrative data.",
});

// Flows among a few groups: each arc is what a group sends, each ribbon what flows each way.
import { chordDiagram } from "enarratio/plot";

const regions = ["Northeast", "Midwest", "South", "West"];
// Thousands of people who moved between regions in a year: rows send, columns receive.
const moves = [
  [0, 52, 310, 98],
  [41, 0, 265, 140],
  [128, 190, 0, 230],
  [62, 118, 290, 0],
];

export default chordDiagram({
  data: moves.flatMap((row, i) =>
    row.flatMap((thousands, j) =>
      thousands > 0 ? [{ from: regions[i] as string, to: regions[j] as string, thousands }] : [],
    ),
  ),
  from: "from",
  to: "to",
  value: "thousands",
  valueLabel: "Thousands of people",
  title: "Moves between US regions in one year",
  alt: "Chord diagram of moves between four US regions: the South gains most, receiving 865,000 people and sending 548,000. The largest single flow is 310,000 from the Northeast to the South.",
  caption: "Illustrative data.",
});

// A few profiles over several measures on one scale: each series an outline, the second dashed.
import { radarChart } from "enarratio/plot";

const assays = [
  { method: "PCR", sensitivity: 98, specificity: 99, speed: 40, cost: 35, ease: 45 },
  { method: "Antigen test", sensitivity: 72, specificity: 97, speed: 95, cost: 90, ease: 95 },
];

export default radarChart({
  data: assays,
  label: "method",
  axes: ["sensitivity", "specificity", "speed", "cost", "ease"],
  axisLabels: {
    sensitivity: "Sensitivity",
    specificity: "Specificity",
    speed: "Speed",
    cost: "Low cost",
    ease: "Ease of use",
  },
  max: 100,
  title: "Two diagnostic tests, scored out of 100",
  alt: "Radar chart scoring PCR and an antigen test out of 100: PCR leads on sensitivity (98 to 72), both are near 100 on specificity, and the antigen test leads on speed, cost and ease of use, each by 45 to 55 points.",
  caption: "Illustrative scores.",
});

// One reading against its scale, with qualitative bands and a target.
import { gaugeChart } from "enarratio/plot";

export default gaugeChart({
  value: 87,
  min: 0,
  max: 100,
  label: "Beds occupied (%)",
  target: 85,
  bands: [
    { to: 85, label: "normal" },
    { to: 95, label: "busy" },
    { to: 100, label: "full" },
  ],
  lowerIsBetter: true,
  formatValue: (v) => `${v}%`,
  title: "Hospital bed occupancy today",
  alt: "Gauge: 87% of beds are occupied, in the busy band, above the 85% target.",
  caption: "Illustrative data.",
});

// Several measures, each a bar against its target over qualitative bands (Few's bullet graph).
import { bulletChart } from "enarratio/plot";

const lab = [
  { measure: "Samples processed", done: 1840, goal: 2000, scale: 2400 },
  { measure: "Same-day results (%)", done: 91, goal: 95, scale: 100 },
  { measure: "Results within 24 h (%)", done: 78, goal: 90, scale: 100 },
];

export default bulletChart({
  data: lab,
  label: "measure",
  value: "done",
  target: "goal",
  max: "scale",
  bands: (row) => [
    { to: row.scale * 0.6, label: "poor" },
    { to: row.scale * 0.85, label: "fair" },
    { to: row.scale, label: "good" },
  ],
  title: "Laboratory performance this month",
  alt: "Bullet chart of three lab measures: 1,840 samples processed against a goal of 2,000, 91% same-day results against 95%, and 78% of results within 24 hours against 90%. Each misses its target; same-day results are in the good band, the other two in the fair band.",
  caption: "Illustrative data. Bands are fixed shares of each scale.",
});

// Many items over several measures: one axis per measure, one line per item, two highlighted.
import { parallelCoordinates } from "enarratio/plot";

const strains = [
  { strain: "A1", growth: 0.42, yield: 3.1, tolerance: 41, ph: 6.8 },
  { strain: "A2", growth: 0.38, yield: 2.7, tolerance: 44, ph: 6.6 },
  { strain: "B1", growth: 0.55, yield: 4.0, tolerance: 37, ph: 7.1 },
  { strain: "B2", growth: 0.61, yield: 4.4, tolerance: 35, ph: 7.3 },
  { strain: "C1", growth: 0.29, yield: 2.2, tolerance: 47, ph: 6.4 },
  { strain: "C2", growth: 0.33, yield: 2.4, tolerance: 46, ph: 6.5 },
  { strain: "D1", growth: 0.49, yield: 3.6, tolerance: 39, ph: 6.9 },
  { strain: "D2", growth: 0.52, yield: 3.5, tolerance: 40, ph: 7.0 },
  { strain: "E1", growth: 0.45, yield: 3.0, tolerance: 42, ph: 6.7 },
  { strain: "E2", growth: 0.58, yield: 4.1, tolerance: 36, ph: 7.2 },
  { strain: "F1", growth: 0.36, yield: 2.9, tolerance: 45, ph: 6.6 },
  { strain: "F2", growth: 0.4, yield: 3.2, tolerance: 43, ph: 6.8 },
];

export default parallelCoordinates({
  data: strains,
  label: "strain",
  axes: ["growth", "yield", "tolerance", "ph"],
  axisLabels: {
    growth: "Growth (per h)",
    yield: "Yield (g/L)",
    tolerance: "Heat limit (°C)",
    ph: "Best pH",
  },
  highlight: ["B2", "C1"],
  title: "Twelve yeast strains on four traits",
  alt: "Parallel coordinates of 12 yeast strains: growth and yield rise together, and both fall as heat tolerance rises. B2 grows fastest (0.61 per hour) and yields most but tolerates least heat; C1 is the reverse.",
  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 = [
  ["Rivera", "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 = [
  ["Rivera", "Okafor"],
  ["Rivera", "Lindqvist"],
  ["Okafor", "Lindqvist"],
  ["Rivera", "Ramos"],
  ["Ramos", "Chen"],
  ["Chen", "Haddad"],
  ["Ramos", "Haddad"],
  ["Chen", "Novak"],
  ["Novak", "Ibarra"],
  ["Rivera", "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. Rivera and Ramos are the hubs, with four co-authors each. Rivera 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.",
});