Plot Surface

The cartesian archetype, assembled.

Preview

About

Fifteen viewers here are the same picture: two quantitative axes, some marks between them, a hover readout. Manhattan, volcano, QQ, embedding, violin, survival, enrichment, CNV, Ramachandran — each rebuilt margins, canvas plumbing, an axis loop, hover state, a11y and chrome, and each ended up subtly different from the others. This is that stack composed once, in two halves so a viewer can take as much as it needs: usePlotSurface is headless and returns the frame, layers and tokens; <PlotSurface> renders the shell around it. Draw callbacks receive the frame at paint time rather than closing over it — the scales don't exist until the hook has run, so a layer that closed over them could never be passed in.

Usage

import { PlotSurface, usePlotSurface } from "@/components/ui/plot-surface"

const surface = usePlotSurface({
  height: 260,
  x: { type: "linear", domain: fcDomain, title: "log₂ fold-change" },
  y: { type: "linear", domain: pDomain, nice: true, title: "−log₁₀ p" },
  layers: [{ name: "cloud", draw: drawPoints, deps: [points] }],
  exports: { filename: "volcano", data: { tsv: () => toTsv(points) } },
})

<PlotSurface surface={surface} title="Differential expression" />