BoxPlot

Box-and-whisker distributions with an optional point overlay.

A token-driven box plot for comparing the score distributions of a few players (or any groups) at a glance — a short box means a consistent scorer. Each group draws Tukey whiskers, a quartile box (Q1–Q3) tinted in the group `color`, and a median line; pass `showPoints` to overlay every value as a deterministically jittered dot (no SSR/hydration randomness). The y axis uses the padded data extent across all values, every box is keyboard-focusable with a five-number-summary tooltip, and empty input shows an em-dash placeholder.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { BoxPlot } from 'dssoca';

  const groups = [
    { label: 'Ana', values: [20000, 21000, 19500, 22000, 20500] },
    { label: 'Bruno', values: [15000, 18000, 12000, 22000, 9000] },
    { label: 'Caio', values: [17000, 17500, 16800, 18200, 17000] },
  ];
</script>

<BoxPlot {groups} yLabel="Score" />

Props

Prop	Type	Default	Description
`groups`	`BoxGroup[]`	—	Required. One box per group; each has a `label`, `values` (number[]), and optional `color`.
`showPoints`	`boolean`	`true`	Overlay every value as a small jittered dot (deterministic, SSR-safe).
`yLabel`	`string`	—	Y axis caption drawn rotated beside the axis.
`yDomain`	`[number, number]`	—	Force the y domain; defaults to the padded data extent across all values.
`yFormat`	`(y: number) => string`	—	Format a y value for ticks + tooltip.
`height`	`number`	`300`	Intrinsic drawing height in px.
`width`	`number`	`420`	Intrinsic drawing width in px.
`fluid`	`boolean`	`false`	Stretch to the container width via the viewBox.
`tooltip`	`boolean`	`true`	Reveal a five-number-summary tooltip on hover/focus of a box. Each box is keyboard-focusable.
`summary`	`string`	—	Screen-reader summary + accessible name; auto-generated when absent.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.