nubjs.com performance charts

Every performance figure on nubjs.com is a hand-generated SVG, not a charting library. They share one visual system with the homepage's <Bench> panel, and a new chart that does not match it looks broken next to the others.

The six rules (maintainer, 2026-09-08 and 2026-09-12)

The first charts drawn with this skill broke the first four, the next one broke the fifth, and the threadpool figures shipped with the sixth unbroken only because the maintainer asked for the axis to go, so they come before anything else.

1. One direction per figure. A figure is either "higher is better" or "lower is better", never both. A throughput and a latency from the same benchmark are two figures with two stems.
2. No footnotes and no caption line inside the image. A block of small text under the axis reads as a disclaimer, as if the number needed excusing. The fixture and the method go in the page caption, the tweet, or the benchmark README, never in the SVG.
3. The legend is left-aligned with the bar column, on its own line under the heading. Everything at the top of a figure starts at the same x; a right-justified legend under left-justified text reads as misplaced.
4. Cut the words. A heading of two or three words, a muted note of at most a version and the direction, row labels of one or two words. The post or the page supplies the context; the figure supplies the numbers. If a label needs a sentence, the row needs a better name.
5. The ink sits optically balanced in the frame: equal side margins, and generous ones. The eye compares the two horizontal margins first, so the bar column starts where the longest label ends and stops where the longest trailing text meets the padding — the renderer computes both from the rows (gutterFor, fitRight), never from a fixed x, and a label is never padded to fill a gutter. The padding is 56px at the sides and 30px top and bottom (PAD_X, PAD_Y), the sides wider on purpose: a landscape frame needs more side margin than vertical margin to look evenly padded. Both halves of the rule were corrected on the same day, 2026-09-12, on one two-row chart: first "TOO MUCH dead space on the left" (short labels in a gutter sized for long ones, 140px of nothing on the left against 40px on the right), then, once the margins matched at 22px, "it needs more space than that... optical balance" — centered ink that close to the edge reads as cramped. Check it on the raster: the leftmost label and the rightmost note should sit the same, comfortable distance from their edges.
6. A paired chart has no axis: no tick marks, no tick labels. Every bar already carries its value, so an axis repeats the numbers, and with a scale per group its ticks land at different positions from one group to the next, which reads as misaligned. Groups are separated by spacing alone (groupGap), which also closed the gap between the panels of the threadpool figure that read as "a little too much space between each chart" (maintainer, 2026-09-12: "just omit the x axis numbers altogether, and ticks"). The unit therefore lives in the value label (66 req/s, 1,763 Mloops/s), never in a tick.

A chart is the last step, never the first. The number comes from a benchmark under tests/bench/ that survives the methodology in AGENTS.md and the benchmarking skill; the chart only draws it. A figure built on numbers from a loaded machine is worse than no figure, because it ships a claim nobody will re-check.

Where things live