Roofline Plotter

A roofline chart for one device. The "roof" is the piecewise function min(peakCompute, bandwidth times intensity). Below the ridge point peakCompute / bandwidth the ceiling is the memory-bandwidth ramp; above it, the ceiling is flat at peak compute. Measured kernels are plotted as labelled dots — kernels below the line are inefficient and get a warning-coloured ring.

Installation

npx shadcn@latest add https://craftbits.dev/r/roofline-plotter.json

Usage

import { RooflinePlotter } from "@craft-bits/core";
 
<RooflinePlotter
  peakCompute={312000}
  bandwidth={1555}
  kernels={[
    { label: "decode b=1", arithmeticIntensity: 2, achievedGflops: 2800 },
    { label: "attention", arithmeticIntensity: 80, achievedGflops: 180000 },
    { label: "gemm 4096", arithmeticIntensity: 512, achievedGflops: 305000 },
  ]}
/>

Drive the highlight from outside:

<RooflinePlotter
  peakCompute={312000}
  bandwidth={1555}
  kernels={kernels}
  currentKernel={selected}
  onCurrentKernelChange={setSelected}
/>

Swap to linear axes when you want the ridge to dominate the picture:

<RooflinePlotter
  peakCompute={312000}
  bandwidth={1555}
  kernels={kernels}
  axisScale="linear"
/>

Understanding the component

1. One piecewise function. Performance for a kernel of intensity I on a device with peak compute P and bandwidth B is min(P, B * I). The ramp on the left is B * I; the ceiling on the right is P. They meet at the ridge intensity P / B.
2. Log-log by default. Roofline plots are conventionally drawn with both axes on a log scale so the memory ramp is a straight line of slope 1. axisScale="linear" is available when the ridge needs to be exaggerated visually.
3. Auto-fit domain. The axis range is seeded from the ridge point — the chart still tells a story with zero kernels — then extended to fit every plotted kernel. Padding is multiplicative under log and additive under linear.
4. Below-roofline rings. Any kernel whose achieved GFLOPS is less than 98 percent of its theoretical ceiling at that intensity gets an outer warning ring. The 2 percent tolerance keeps numerical noise from flagging kernels effectively at the line.
5. Ridge marker. A vertical dashed line drops from the ridge to the x-axis. The region shading either side uses the same warning and success tints as the ramp and ceiling, so the colour story is consistent across the chart.
6. Click-to-highlight legend. Each kernel gets a chip below the chart with its label, hardware-utilisation percentage, and a colour swatch. Click toggles the highlight; controlled and uncontrolled selection are both supported.
7. Spring transitions. Roofline, ridge, dots, rings, and labels all follow with SPRINGS.smooth. prefers-reduced-motion: reduce collapses every spring to an instant swap.

Props

The RooflineKernel shape: { label: string; arithmeticIntensity: number; achievedGflops: number }.

Accessibility

• The figure is role="figure" with a hidden summary of the device parameters, ridge point, and kernel count — screen readers hear the chart's story whenever props change.
• Kernel dots carry SVG <title> so hovering or focus-walking exposes the label, achieved GFLOPS, and intensity in a native tooltip.
• The legend chips are a role="radiogroup" of role="radio" buttons — Tab navigates, Space and Enter toggle the highlight, and :focus-visible paints the accent ring.
• Below-roofline kernels are flagged with both warning colour and an outer ring; the legend chips also report hardware utilisation textually so the picture survives without colour.
• Motion respects prefers-reduced-motion: reduce.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/nn/RooflinePlotter.tsx). Stripped the GPU preset switcher (A100 / H100 / 4090), the place-the-operation interaction, the four-phase narration, the breathing-pulse hint, and the hand-built animate() choreography. Generalised to a pure plotting primitive: device parameters in, labelled kernels out, controlled highlight, log or linear axes, motion-library springs throughout.