Plot Frame

Margins derived from the data, not hand-tuned.

Preview

About

Thirteen viewers here used to declare their own margins — twenty-two distinct magic numbers between them, each somebody eyeballing how wide that plot's y labels happened to be that day. They are wrong the moment the data changes: a Manhattan plot tuned for −log10 p of 8 clips itself the first time a study reports p = 1e-120. The fix is not a better constant. Tick values depend only on the domain, never on the pixel range, so the label strings can be generated and measured before the plot rect exists: domain → ticks → labels → measured width → margin → rect → scale. You pass domains and get back scales already bound to the result.

Usage

import { usePlotFrame } from "@/components/ui/plot-frame"

const { ref, inner, x, y } = usePlotFrame({
  height: 240,
  x: { type: "linear", domain: [-4, 4], title: "log₂ fold-change" },
  y: { type: "log", domain: [1, 1e-12], title: "−log₁₀ p" },
})

<div ref={ref}>…</div>