ScatterPlot

Two-axis scatter with optional quadrants and bubble sizing.

A token-driven scatter plot for comparing entities on two metrics at once. Each datum is a dot positioned by `x`/`y`, optionally sized by `size` (sqrt-scaled so area is true) and tinted by `color`. Pass `xRef`/`yRef` to split the plane into quadrants and `quadrantLabels` to caption them — ideal for "high score vs low wins"-style comparisons. Axes use the padded data extent (not forced to zero), every point is keyboard-focusable with an accessible 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 { ScatterPlot } from 'dssoca';

  const points = [
    { label: 'Ana', x: 8.9, y: 7.5, size: 27 },
    { label: 'Bruno', x: 8.5, y: 5.7, size: 14 },
    { label: 'Caio', x: 7.7, y: 4.5, size: 7 },
  ];
</script>

<ScatterPlot
  {points}
  xRef={8}
  yRef={5}
  xLabel="Consistency"
  yLabel="Power rating"
  quadrantLabels={{ tr: 'steady star', br: 'spiky' }}
/>

Props

Prop	Type	Default	Description
`points`	`ScatterPoint[]`	—	Required. Each point has a `label`, `x`, `y`, and optional `size` (bubble area) and `color`.
`xLabel`	`string`	—	X axis caption drawn under the axis.
`yLabel`	`string`	—	Y axis caption drawn rotated beside the axis.
`xRef`	`number`	—	Dashed vertical reference line at this x (e.g. the median) — splits into quadrants.
`yRef`	`number`	—	Dashed horizontal reference line at this y — splits into quadrants.
`quadrantLabels`	`{ tl?; tr?; bl?; br? }`	—	Corner captions for the four quadrants (reads best with xRef + yRef).
`xDomain`	`[number, number]`	—	Force the x domain; defaults to the padded data extent.
`yDomain`	`[number, number]`	—	Force the y domain; defaults to the padded data extent.
`xFormat`	`(x: number) => string`	—	Format an x value for ticks + tooltip.
`yFormat`	`(y: number) => string`	—	Format a y value for ticks + tooltip.
`showLabels`	`boolean`	`true`	Draw each point's label next to its dot.
`height`	`number`	`320`	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 tooltip on hover/focus of a point. Each point 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.