diff --git a/src/components/map/FingerprintPlot.tsx b/src/components/map/FingerprintPlot.tsx
new file mode 100644
index 0000000..a1d0511
--- /dev/null
+++ b/src/components/map/FingerprintPlot.tsx
@@ -0,0 +1,369 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  formatSeriesValue,
+  TIME_SERIES_PLOT_HEIGHT,
+  timeSeriesChartTheme,
+} from "@/components/map/timeSeriesChartConfig";
+import {
+  dayIndexTicks,
+  FINGERPRINT_HOUR_TICKS,
+  fingerprintColorScale,
+  fingerprintLegendStops,
+  formatDayTick,
+  formatIsoDate,
+  symmetricAbsMax,
+  yearRangesInWindow,
+} from "@/lib/map/fingerprintScale";
+import { ZARR_TIME } from "@/lib/zarr/timeRange";
+import { useTheme } from "@/providers/ThemeProvider";
+
+type FingerprintPlotProps = {
+  values: Float32Array;
+  units?: string | null;
+  hoursPerDay?: number;
+};
+
+/**
+ * Canvas gutters (CSS px). The left gutter widens when transposed, since date
+ * labels ("Mon 'yy") sit on the left then, versus 2-digit hours by default.
+ */
+const AXIS_LEFT_DEFAULT = 34;
+const AXIS_LEFT_TRANSPOSED = 54;
+const AXIS_BOTTOM = 18;
+const AXIS_TOP = 4;
+const AXIS_RIGHT = 6;
+
+const axisLeftFor = (transposed: boolean) =>
+  transposed ? AXIS_LEFT_TRANSPOSED : AXIS_LEFT_DEFAULT;
+
+type HoverCell = {
+  left: number;
+  top: number;
+  day: number;
+  hour: number;
+  value: number;
+  absoluteDay: number;
+};
+
+/**
+ * Fingerprint plot: an hour-of-day by day heatmap of the pixel's flux, colored by
+ * a diverging scale centered on zero. Consumes the same flat
+ * `[day x hoursPerDay]` `Float32Array` the line chart receives and indexes
+ * `values[day * hoursPerDay + hour]` instead of averaging over the hour axis.
+ *
+ * Controls: flip the axes (hour<->day), single out one calendar year of the
+ * loaded window, and hover a cell to read its date/hour/value.
+ */
+export function FingerprintPlot({
+  values,
+  units,
+  hoursPerDay = 24,
+}: FingerprintPlotProps) {
+  const { isLight } = useTheme();
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [width, setWidth] = useState(0);
+  const [transposed, setTransposed] = useState(false);
+  const [selectedYear, setSelectedYear] = useState<number | null>(null);
+  const [hover, setHover] = useState<HoverCell | null>(null);
+
+  const nDays = Math.floor(values.length / hoursPerDay);
+  const absMax = useMemo(() => symmetricAbsMax(values), [values]);
+
+  // The window always ends at the last day of the archive, so its first day sits
+  // `totalDays - nDays` into the absolute time axis.
+  const baseDay = ZARR_TIME.totalDays - nDays;
+  const years = useMemo(
+    () => yearRangesInWindow(baseDay, nDays),
+    [baseDay, nDays],
+  );
+
+  // Local day range currently in view: the whole window, or one selected year.
+  // Derived defensively, so a selection that falls outside the current window
+  // simply reads as "All" without needing an effect to reset the stored value.
+  const activeYear = years.find((range) => range.year === selectedYear) ?? null;
+  const dayLo = activeYear ? activeYear.startDay : 0;
+  const dayHi = activeYear ? activeYear.endDay : nDays - 1;
+  const nSel = Math.max(1, dayHi - dayLo + 1);
+
+  useEffect(() => {
+    const node = wrapperRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      setWidth(Math.floor(entries[0]?.contentRect.width ?? 0));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width === 0 || nDays === 0) return;
+
+    const height = TIME_SERIES_PLOT_HEIGHT;
+    const dpr =
+      typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+
+    const axisLeft = axisLeftFor(transposed);
+    const plotW = Math.max(1, width - axisLeft - AXIS_RIGHT);
+    const plotH = Math.max(1, height - AXIS_TOP - AXIS_BOTTOM);
+    const scale = fingerprintColorScale(isLight);
+
+    // Map a local day index (dayLo..dayHi) to a fill color at the given hour.
+    const cellColor = (dayLocal: number, hour: number) =>
+      scale(values[dayLocal * hoursPerDay + hour] as number, absMax);
+
+    if (!transposed) {
+      // x = day, y = hour (hour 0 at the bottom).
+      const rowY = (fromTop: number) =>
+        AXIS_TOP + Math.floor((fromTop * plotH) / hoursPerDay);
+      for (let px = 0; px < plotW; px++) {
+        const dayLocal = Math.min(dayHi, dayLo + Math.floor((px / plotW) * nSel));
+        for (let hour = 0; hour < hoursPerDay; hour++) {
+          const color = cellColor(dayLocal, hour);
+          if (color === "transparent") continue;
+          const fromTop = hoursPerDay - 1 - hour;
+          const yTop = rowY(fromTop);
+          const yBot = rowY(fromTop + 1);
+          ctx.fillStyle = color;
+          ctx.fillRect(axisLeft + px, yTop, 1, Math.max(1, yBot - yTop));
+        }
+      }
+    } else {
+      // x = hour (0 at the left), y = day (first day at the top).
+      const colX = (hour: number) =>
+        axisLeft + Math.floor((hour * plotW) / hoursPerDay);
+      for (let py = 0; py < plotH; py++) {
+        const dayLocal = Math.min(dayHi, dayLo + Math.floor((py / plotH) * nSel));
+        for (let hour = 0; hour < hoursPerDay; hour++) {
+          const color = cellColor(dayLocal, hour);
+          if (color === "transparent") continue;
+          const xLeft = colX(hour);
+          const xRight = colX(hour + 1);
+          ctx.fillStyle = color;
+          ctx.fillRect(xLeft, AXIS_TOP + py, Math.max(1, xRight - xLeft), 1);
+        }
+      }
+    }
+
+    // Axis labels.
+    const { tick } = timeSeriesChartTheme(isLight);
+    ctx.fillStyle = tick;
+    ctx.font = "11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+
+    const dayTicks = dayIndexTicks(nSel).map((offset) => dayLo + offset);
+    const dayFrac = (dayLocal: number) =>
+      nSel <= 1 ? 0 : (dayLocal - dayLo) / (nSel - 1);
+
+    if (!transposed) {
+      // Hours down the left, dates along the bottom.
+      const rowY = (fromTop: number) =>
+        AXIS_TOP + (fromTop * plotH) / hoursPerDay;
+      ctx.textAlign = "right";
+      ctx.textBaseline = "middle";
+      for (const hour of FINGERPRINT_HOUR_TICKS) {
+        const fromTop = hoursPerDay - 1 - hour;
+        ctx.fillText(String(hour), axisLeft - 6, (rowY(fromTop) + rowY(fromTop + 1)) / 2);
+      }
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      for (const dayLocal of dayTicks) {
+        const x = clampLabelX(axisLeft + dayFrac(dayLocal) * plotW, plotW, axisLeft);
+        ctx.fillText(formatDayTick(baseDay + dayLocal), x, AXIS_TOP + plotH + 4);
+      }
+    } else {
+      // Dates down the left, hours along the bottom.
+      ctx.textAlign = "right";
+      ctx.textBaseline = "middle";
+      for (const dayLocal of dayTicks) {
+        const y = AXIS_TOP + dayFrac(dayLocal) * plotH;
+        ctx.fillText(
+          formatDayTick(baseDay + dayLocal),
+          axisLeft - 6,
+          Math.max(AXIS_TOP + 6, Math.min(AXIS_TOP + plotH - 6, y)),
+        );
+      }
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      for (const hour of FINGERPRINT_HOUR_TICKS) {
+        const x = axisLeft + ((hour + 0.5) * plotW) / hoursPerDay;
+        ctx.fillText(String(hour), x, AXIS_TOP + plotH + 4);
+      }
+    }
+  }, [
+    values,
+    absMax,
+    nDays,
+    nSel,
+    dayLo,
+    dayHi,
+    baseDay,
+    hoursPerDay,
+    isLight,
+    width,
+    transposed,
+  ]);
+
+  if (nDays === 0) return null;
+
+  const legend = fingerprintLegendStops(isLight);
+
+  const handleMove = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const axisLeft = axisLeftFor(transposed);
+    const plotW = Math.max(1, width - axisLeft - AXIS_RIGHT);
+    const plotH = Math.max(1, TIME_SERIES_PLOT_HEIGHT - AXIS_TOP - AXIS_BOTTOM);
+    const inX = x - axisLeft;
+    const inY = y - AXIS_TOP;
+    if (inX < 0 || inX >= plotW || inY < 0 || inY >= plotH) {
+      setHover(null);
+      return;
+    }
+
+    let dayLocal: number;
+    let hour: number;
+    if (!transposed) {
+      dayLocal = Math.min(dayHi, dayLo + Math.floor((inX / plotW) * nSel));
+      hour = hoursPerDay - 1 - Math.min(hoursPerDay - 1, Math.floor((inY / plotH) * hoursPerDay));
+    } else {
+      hour = Math.min(hoursPerDay - 1, Math.floor((inX / plotW) * hoursPerDay));
+      dayLocal = Math.min(dayHi, dayLo + Math.floor((inY / plotH) * nSel));
+    }
+
+    setHover({
+      left: x,
+      top: y,
+      day: dayLocal,
+      hour,
+      value: values[dayLocal * hoursPerDay + hour] as number,
+      absoluteDay: baseDay + dayLocal,
+    });
+  };
+
+  return (
+    <div className="w-full min-w-0">
+      <div className="mb-2 flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          onClick={() => setTransposed((prev) => !prev)}
+          className="rounded-md border border-editor-border px-2 py-0.5 text-[11.5px] font-semibold text-editor-fg-secondary transition-colors hover:text-editor-fg-primary"
+          aria-pressed={transposed}
+          title="Swap the hour and day axes"
+        >
+          ⇄ Flip axes
+        </button>
+        {years.length > 1 ? (
+          <div className="flex flex-wrap items-center gap-1" role="group" aria-label="Year">
+            <YearChip
+              label="All"
+              active={selectedYear === null}
+              onClick={() => setSelectedYear(null)}
+            />
+            {years.map((range) => (
+              <YearChip
+                key={range.year}
+                label={String(range.year)}
+                active={selectedYear === range.year}
+                onClick={() => setSelectedYear(range.year)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div ref={wrapperRef} className="relative w-full min-w-0">
+        <canvas
+          ref={canvasRef}
+          className="w-full"
+          role="img"
+          aria-label="Diurnal fingerprint heatmap"
+          onMouseMove={handleMove}
+          onMouseLeave={() => setHover(null)}
+        />
+        {hover ? (
+          <div
+            className="pointer-events-none absolute z-10 -translate-x-1/2 rounded-md border border-editor-border bg-editor-bg-primary px-2 py-1 font-mono text-[11px] leading-tight text-editor-fg-secondary shadow-md"
+            style={{
+              left: Math.max(48, Math.min(width - 48, hover.left)),
+              top: Math.max(0, hover.top - 52),
+            }}
+          >
+            <div className="text-editor-fg-primary">
+              {formatIsoDate(hover.absoluteDay)} · {String(hover.hour).padStart(2, "0")}:00
+            </div>
+            <div>
+              {Number.isFinite(hover.value)
+                ? `${formatSeriesValue(hover.value)}${units ? ` ${units}` : ""}`
+                : "no data"}
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        <span className="font-mono text-[11px] tabular-nums text-editor-fg-tertiary">
+          {formatSeriesValue(-absMax)}
+        </span>
+        <span
+          className="h-2 flex-1 rounded-full"
+          style={{
+            background: `linear-gradient(to right, ${legend.uptake}, ${legend.mid}, ${legend.release})`,
+          }}
+          aria-hidden="true"
+        />
+        <span className="font-mono text-[11px] tabular-nums text-editor-fg-tertiary">
+          {formatSeriesValue(absMax)}
+        </span>
+      </div>
+      <p className="mt-2 font-mono text-xs leading-normal text-editor-fg-tertiary">
+        {nSel.toLocaleString()} days × {hoursPerDay} hours
+        {units ? ` · ${units}` : ""}
+      </p>
+    </div>
+  );
+}
+
+/** Keep a bottom-axis date label inside the plot width. */
+function clampLabelX(x: number, plotW: number, axisLeft: number): number {
+  return Math.max(axisLeft + 12, Math.min(axisLeft + plotW - 12, x));
+}
+
+function YearChip({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={`rounded px-1.5 py-0.5 font-mono text-[11px] tabular-nums transition-colors ${
+        active
+          ? "bg-accent text-white"
+          : "text-editor-fg-tertiary hover:text-editor-fg-secondary"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/src/components/map/FingerprintPlotLoading.tsx b/src/components/map/FingerprintPlotLoading.tsx
new file mode 100644
index 0000000..e5c260c
--- /dev/null
+++ b/src/components/map/FingerprintPlotLoading.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { TIME_SERIES_PLOT_HEIGHT } from "@/components/map/timeSeriesChartConfig";
+
+/**
+ * Placeholder matching the fingerprint canvas footprint so the loading branch
+ * keeps the same height as the rendered plot, mirroring TimeSeriesPlotLoading.
+ */
+export function FingerprintPlotLoading() {
+  return (
+    <div className="w-full min-w-0" aria-hidden="true">
+      <div
+        className="w-full animate-pulse rounded-md bg-editor-bg-secondary"
+        style={{ height: TIME_SERIES_PLOT_HEIGHT }}
+      />
+      <div className="mt-3 h-2 w-full animate-pulse rounded-full bg-editor-bg-secondary" />
+    </div>
+  );
+}
diff --git a/src/components/map/MapReadout.tsx b/src/components/map/MapReadout.tsx
index e9d97cf..1e2c91f 100644
--- a/src/components/map/MapReadout.tsx
+++ b/src/components/map/MapReadout.tsx
@@ -1,13 +1,18 @@
 "use client";
 
+import { useState } from "react";
 import type { GridSpec, MapSelection } from "@/types/map";
 import { formatCoordinate, formatGeoPoint } from "@/lib/map/geogrid";
 import { DEFAULT_GRID_SPEC, ZARR_STORE } from "@/lib/constants/store";
 import { ZARR_TIME } from "@/lib/zarr/timeRange";
 import { TimeSeriesPlot } from "@/components/map/TimeSeriesPlot";
 import { TimeSeriesPlotLoading } from "@/components/map/TimeSeriesPlotLoading";
+import { FingerprintPlot } from "@/components/map/FingerprintPlot";
+import { FingerprintPlotLoading } from "@/components/map/FingerprintPlotLoading";
 import { ProgressBar } from "@/components/ui/ProgressBar";
 
+type PlotView = "line" | "fingerprint";
+
 type SeriesProgress = { loaded: number; total: number };
 
 type MapReadoutProps = {
@@ -36,6 +41,7 @@ export function MapReadout({
   seriesValues,
   seriesUnits,
 }: MapReadoutProps) {
+  const [plotView, setPlotView] = useState<PlotView>("line");
   const historyLabel =
     historyYears === 1 ? "Last 1 year" : `Last ${historyYears} years`;
 
@@ -89,27 +95,39 @@ export function MapReadout({
   const chart = (
     <section aria-live="polite">
       <div className="mb-3 flex items-baseline justify-between gap-3">
-        <span className={SECTION_LABEL}>Daily mean</span>
-        {!loadingSeries && !seriesError && seriesValues && seriesUnits ? (
-          <span className={META}>{seriesUnits}</span>
-        ) : null}
+        <span className={SECTION_LABEL}>
+          {plotView === "line" ? "Daily mean" : "Diurnal fingerprint"}
+        </span>
+        <PlotViewToggle view={plotView} onChange={setPlotView} />
       </div>
 
       {loadingSeries ? (
         <div className="grid gap-3">
           <SeriesLoader progress={seriesProgress} />
-          <TimeSeriesPlotLoading historyYears={historyYears} />
+          {plotView === "line" ? (
+            <TimeSeriesPlotLoading historyYears={historyYears} />
+          ) : (
+            <FingerprintPlotLoading />
+          )}
         </div>
       ) : seriesError ? (
         <p className="text-[13px] leading-[1.55] text-editor-fg-tertiary">
           {seriesError}
         </p>
       ) : seriesValues ? (
-        <TimeSeriesPlot
-          values={seriesValues}
-          units={seriesUnits}
-          hoursPerDay={ZARR_TIME.hoursPerDay}
-        />
+        plotView === "line" ? (
+          <TimeSeriesPlot
+            values={seriesValues}
+            units={seriesUnits}
+            hoursPerDay={ZARR_TIME.hoursPerDay}
+          />
+        ) : (
+          <FingerprintPlot
+            values={seriesValues}
+            units={seriesUnits}
+            hoursPerDay={ZARR_TIME.hoursPerDay}
+          />
+        )
       ) : null}
     </section>
   );
@@ -152,6 +170,46 @@ export function MapReadout({
   );
 }
 
+function PlotViewToggle({
+  view,
+  onChange,
+}: {
+  view: PlotView;
+  onChange: (view: PlotView) => void;
+}) {
+  const options: { id: PlotView; label: string }[] = [
+    { id: "line", label: "Line" },
+    { id: "fingerprint", label: "Fingerprint" },
+  ];
+  return (
+    <div
+      className="inline-flex rounded-md border border-editor-border p-0.5"
+      role="tablist"
+      aria-label="Plot view"
+    >
+      {options.map((option) => {
+        const active = option.id === view;
+        return (
+          <button
+            key={option.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(option.id)}
+            className={`rounded-[5px] px-2 py-0.5 text-[11.5px] font-semibold transition-colors ${
+              active
+                ? "bg-accent text-white"
+                : "text-editor-fg-tertiary hover:text-editor-fg-secondary"
+            }`}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 function Fact({ label, value }: { label: string; value: string }) {
   return (
     <div className="grid min-w-0 gap-0.5">
diff --git a/src/lib/map/fingerprintScale.test.ts b/src/lib/map/fingerprintScale.test.ts
new file mode 100644
index 0000000..1657db2
--- /dev/null
+++ b/src/lib/map/fingerprintScale.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  dayIndexTicks,
+  fingerprintColorScale,
+  formatIsoDate,
+  symmetricAbsMax,
+  yearRangesInWindow,
+} from "@/lib/map/fingerprintScale";
+
+describe("symmetricAbsMax", () => {
+  it("returns the largest absolute finite value", () => {
+    expect(symmetricAbsMax([-3, 1, 2])).toBe(3);
+    expect(symmetricAbsMax([0.5, -0.2, 4.1])).toBeCloseTo(4.1, 10);
+  });
+
+  it("ignores NaN and non-finite entries", () => {
+    expect(symmetricAbsMax([NaN, -2, Infinity, 1])).toBe(2);
+  });
+
+  it("returns 0 for an all-missing series", () => {
+    expect(symmetricAbsMax([NaN, NaN])).toBe(0);
+    expect(symmetricAbsMax([])).toBe(0);
+  });
+});
+
+describe("fingerprintColorScale", () => {
+  const scale = fingerprintColorScale(true);
+
+  it("maps non-finite values to transparent", () => {
+    expect(scale(NaN, 5)).toBe("transparent");
+    expect(scale(Infinity, 5)).toBe("transparent");
+  });
+
+  it("gives negative and positive extremes distinct hues", () => {
+    const uptake = scale(-5, 5);
+    const release = scale(5, 5);
+    expect(uptake).not.toBe(release);
+    expect(uptake).toMatch(/^rgb\(/);
+    expect(release).toMatch(/^rgb\(/);
+  });
+
+  it("collapses to the neutral midpoint at zero", () => {
+    expect(scale(0, 5)).toBe(scale(0, 5));
+    // With no spread every value is neutral, not an endpoint.
+    expect(scale(3, 0)).toBe(scale(-3, 0));
+  });
+});
+
+describe("dayIndexTicks", () => {
+  it("spans both ends and dedupes", () => {
+    const ticks = dayIndexTicks(365);
+    expect(ticks[0]).toBe(0);
+    expect(ticks[ticks.length - 1]).toBe(364);
+  });
+
+  it("handles degenerate windows", () => {
+    expect(dayIndexTicks(1)).toEqual([0]);
+    expect(dayIndexTicks(0)).toEqual([0]);
+  });
+});
+
+describe("time mapping", () => {
+  it("maps day 0 to the 2001-01-01 origin", () => {
+    expect(formatIsoDate(0)).toBe("2001-01-01");
+    expect(formatIsoDate(364)).toBe("2001-12-31");
+  });
+
+  it("splits a window into contiguous calendar years", () => {
+    // A 400-day window starting mid-2001 spans 2001 and 2002.
+    const ranges = yearRangesInWindow(180, 400);
+    expect(ranges.map((r) => r.year)).toEqual([2001, 2002]);
+    expect(ranges[0].startDay).toBe(0);
+    expect(ranges[1].endDay).toBe(399);
+    // Ranges are contiguous and non-overlapping.
+    expect(ranges[1].startDay).toBe(ranges[0].endDay + 1);
+  });
+});
diff --git a/src/lib/map/fingerprintScale.ts b/src/lib/map/fingerprintScale.ts
new file mode 100644
index 0000000..a22d2c3
--- /dev/null
+++ b/src/lib/map/fingerprintScale.ts
@@ -0,0 +1,174 @@
+/**
+ * Color scale and axis helpers for the fingerprint plot (hour-of-day x day
+ * heatmap of NEE flux). NEE is signed: negative means uptake (the ecosystem is a
+ * sink), positive means release (a source). We therefore use a diverging ramp
+ * that is symmetric around zero, so the sign reads at a glance and midday uptake
+ * separates cleanly from nighttime respiration.
+ *
+ * Colors are hardcoded and `isLight`-branched, matching the existing
+ * `timeSeriesChartTheme` pattern rather than pulling from CSS variables.
+ */
+
+import { dayIndexToUTCDate } from "@/lib/zarr/timeRange";
+
+export type Rgb = readonly [number, number, number];
+
+/*
+ * Poles follow the geoscience-standard "vik" diverging convention (Crameri's
+ * perceptually uniform, colourblind-safe scientific colour maps): a cool blue
+ * for uptake and a warm red for release, so warm reading as CO2 emission matches
+ * how signed anomaly fields are shown in the flux/climate literature. Dark-mode
+ * poles are lifted so they stay legible on the dark surface.
+ */
+
+/** Uptake (negative) end: blue. */
+const UPTAKE_LIGHT: Rgb = [33, 102, 172]; // #2166ac
+const UPTAKE_DARK: Rgb = [106, 168, 224]; // #6aa8e0
+
+/** Release (positive) end: red. */
+const RELEASE_LIGHT: Rgb = [178, 24, 43]; // #b2182b
+const RELEASE_DARK: Rgb = [232, 114, 76]; // #e8724c
+
+/**
+ * Zero end is a neutral gray kept distinct from both the panel background and
+ * from transparent gaps, so a near-zero cell never looks like missing data.
+ */
+const MID_LIGHT: Rgb = [235, 235, 231];
+const MID_DARK: Rgb = [66, 66, 64];
+
+function lerpChannel(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t);
+}
+
+function lerpRgb(a: Rgb, b: Rgb, t: number): Rgb {
+  return [
+    lerpChannel(a[0], b[0], t),
+    lerpChannel(a[1], b[1], t),
+    lerpChannel(a[2], b[2], t),
+  ];
+}
+
+function rgbString(rgb: Rgb): string {
+  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+}
+
+/** Endpoint swatches for a legend, matching what the scale produces at ±absMax. */
+export function fingerprintLegendStops(isLight: boolean): {
+  uptake: string;
+  mid: string;
+  release: string;
+} {
+  return {
+    uptake: rgbString(isLight ? UPTAKE_LIGHT : UPTAKE_DARK),
+    mid: rgbString(isLight ? MID_LIGHT : MID_DARK),
+    release: rgbString(isLight ? RELEASE_LIGHT : RELEASE_DARK),
+  };
+}
+
+/**
+ * Build a diverging color function. `absMax` is the symmetric extent (see
+ * {@link symmetricAbsMax}); values outside `[-absMax, absMax]` clamp to the
+ * endpoints. Non-finite values (NaN over ocean / missing pixels) are transparent
+ * so gaps read as gaps.
+ */
+export function fingerprintColorScale(
+  isLight: boolean,
+): (value: number, absMax: number) => string {
+  const uptake = isLight ? UPTAKE_LIGHT : UPTAKE_DARK;
+  const release = isLight ? RELEASE_LIGHT : RELEASE_DARK;
+  const mid = isLight ? MID_LIGHT : MID_DARK;
+
+  return (value, absMax) => {
+    if (!Number.isFinite(value)) return "transparent";
+    if (absMax <= 0) return rgbString(mid);
+    const t = Math.max(-1, Math.min(1, value / absMax));
+    const end = t < 0 ? uptake : release;
+    return rgbString(lerpRgb(mid, end, Math.abs(t)));
+  };
+}
+
+/**
+ * Largest absolute finite value, so the diverging scale can be centered on zero.
+ * NaN-safe; returns 0 for an all-missing series.
+ */
+export function symmetricAbsMax(values: ArrayLike<number>): number {
+  let max = 0;
+  for (let i = 0; i < values.length; i++) {
+    const v = values[i];
+    if (Number.isFinite(v)) {
+      const a = Math.abs(v);
+      if (a > max) max = a;
+    }
+  }
+  return max;
+}
+
+/** Hour-of-day gridlines/labels worth annotating on the hour axis. */
+export const FINGERPRINT_HOUR_TICKS = [0, 6, 12, 18] as const;
+
+const SHORT_MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+] as const;
+
+/** A contiguous run of local day indices (inclusive) belonging to one calendar year. */
+export type YearRange = {
+  year: number;
+  /** Local index of the first day of this year within the loaded window. */
+  startDay: number;
+  /** Local index of the last day of this year within the loaded window. */
+  endDay: number;
+};
+
+/**
+ * Split the loaded window into the calendar years it spans. `base` is the
+ * absolute day index of the window's first day (0 = the time-axis origin); days
+ * are contiguous and chronological, so each year is a single inclusive range.
+ */
+export function yearRangesInWindow(base: number, nDays: number): YearRange[] {
+  const ranges: YearRange[] = [];
+  for (let local = 0; local < nDays; local++) {
+    const year = dayIndexToUTCDate(base + local).getUTCFullYear();
+    const last = ranges[ranges.length - 1];
+    if (last && last.year === year) {
+      last.endDay = local;
+    } else {
+      ranges.push({ year, startDay: local, endDay: local });
+    }
+  }
+  return ranges;
+}
+
+/** Compact "Mon 'yy" label for an axis tick at absolute day `absoluteDay`. */
+export function formatDayTick(absoluteDay: number): string {
+  const date = dayIndexToUTCDate(absoluteDay);
+  return `${SHORT_MONTHS[date.getUTCMonth()]} '${String(
+    date.getUTCFullYear(),
+  ).slice(2)}`;
+}
+
+/** ISO date (YYYY-MM-DD) for a tooltip readout. */
+export function formatIsoDate(absoluteDay: number): string {
+  return dayIndexToUTCDate(absoluteDay).toISOString().slice(0, 10);
+}
+
+/** Evenly spaced day-index ticks for the x axis (deduped, inclusive of ends). */
+export function dayIndexTicks(nDays: number, count = 6): number[] {
+  if (nDays <= 1) return [0];
+  const span = nDays - 1;
+  const ticks: number[] = [];
+  for (let i = 0; i < count; i++) {
+    ticks.push(Math.round((i / (count - 1)) * span));
+  }
+  return [...new Set(ticks)];
+}
diff --git a/src/lib/zarr/timeRange.ts b/src/lib/zarr/timeRange.ts
index 0673048..3e78263 100644
--- a/src/lib/zarr/timeRange.ts
+++ b/src/lib/zarr/timeRange.ts
@@ -3,6 +3,20 @@ import type { AxisSlice } from "@/lib/zarr/chunks";
 
 export const DEFAULT_HISTORY_YEARS = 1;
 
+/**
+ * Calendar origin of the time axis, mirroring the store's time coordinate
+ * (`units: "days since 2001-01-01"`). Kept as a constant alongside the other
+ * hardcoded time facts; a day index maps to `origin + index days`.
+ */
+export const ZARR_TIME_ORIGIN_UTC = Date.UTC(2001, 0, 1);
+
+const MS_PER_DAY = 86_400_000;
+
+/** Absolute day index (0 = origin) to its UTC calendar date. */
+export function dayIndexToUTCDate(absoluteDay: number): Date {
+  return new Date(ZARR_TIME_ORIGIN_UTC + absoluteDay * MS_PER_DAY);
+}
+
 export const ZARR_TIME = {
   totalDays: ZARR_STORE.dimensions.time,
   hoursPerDay: ZARR_STORE.dimensions.hour,