Loading…

Dither Scatter

beta

A bubble scatter drawn in dithered cells: floating bubbles sized by value that glide between data sets, with a per-point readout.

Data
1 file
1 npm package
Accessibility notes
Draws on a canvas

Playground

Installation

The CLI installs dither-canvas as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add dither-scatter

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { DitherScatter } from "@/components/ui/dither-scatter";

Examples

Every example the tests run, live and operable, side by side.

Default
Traffic Scatter Bubbles
Gallery
Pinned Point
With Visible Table
Static

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DitherScatter>

Prop	Type	Default
`data` (required)	`readonly DitherScatterDatum[]`	—
`label` (required) What the chart shows. Names the image, the points and the data table.	`string`	—
`activeIndex` The pinned point (controlled); null pins none.	`number \| null`	—
`animate`	`boolean`	`true`
`categoryLabel` Header of the data table's point column.	`string`	`"Point"`
`cell`	`number`	`3`
`defaultActiveIndex`	`number \| null`	`null`
`description` Replaces the generated summary in the image's accessible name.	`string`	—
`formatValue`	`(value: number) => string`	`formatDitherValue`
`maxRadius` Largest bubble radius as a fraction of the plot height. Default 0.26.	`number`	`0.26`
`minRadius` Smallest bubble radius as a fraction of the plot height. Default 0.07.	`number`	`0.07`
`onActiveIndexChange`	`(index: number \| null) => void`	—
`showTable` Show the data table. It is always present for assistive technology.	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`sizeLabel`	`string`	`"Size"`
`xDomain` Axis ranges. Default from 0 to a round number above the largest value.	`readonly [number, number]`	—
`xLabel` Names of the three values, for the readout, the points and the table.	`string`	`"X"`
`yDomain`	`readonly [number, number]`	—
`yLabel`	`string`	`"Y"`

Plus every attribute of <div> except children.

Accessibility

The plot is role="img" with an aria-label listing every point's x, y and size. Each bubble is a button over the plot, its visible short label first in a name that carries all three values; hover or focus shows the readout and pressing pins it (aria-pressed). The float stops under reduced motion. The data is always in a table, visually hidden unless showTable is set.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Traffic by country

Point

Engagement

Retention

Sessions

1,225

400

625

Prop

Type

Default

data

readonly DitherScatterDatum[]

—

label

What the chart shows. Names the image, the points and the data table.

string

—

activeIndex

The pinned point (controlled); null pins none.

number | null

—

animate

boolean

true

categoryLabel

Header of the data table's point column.

string

"Point"

cell

number

3

defaultActiveIndex

number | null

null

description

Replaces the generated summary in the image's accessible name.

string

—

formatValue

(value: number) => string

formatDitherValue

maxRadius

Largest bubble radius as a fraction of the plot height. Default 0.26.

number

0.26

minRadius

Smallest bubble radius as a fraction of the plot height. Default 0.07.

number

0.07

onActiveIndexChange

(index: number | null) => void

—

showTable

Show the data table. It is always present for assistive technology.

boolean

false

size

"sm" | "md" | "lg"

"md"

sizeLabel

string

"Size"

xDomain

Axis ranges. Default from 0 to a round number above the largest value.

readonly [number, number]

—

xLabel

Names of the three values, for the readout, the points and the table.

string

"X"

yDomain

readonly [number, number]

—

yLabel

string

"Y"

Point	Engagement	Retention	Sessions
US	50	50	1,225
UK	30	80	400
CA	70	20	625

Point	Engagement	Retention	Sessions
US	50	50	1,225
UK	30	80	400
CA	70	20	625