Scatter Plot

Two-variable correlation with optional size encoding (bubble mode), group coloring, and point labels. Keyboard navigable with screen reader announcements.

Bubble Chart — Size Encoding

Life expectancy vs. GDP per capita

Selected countries, 2023

Fixed Radius

Life expectancy vs. GDP

Usage

<ScatterPlot
  data={data}
  title="Life expectancy vs. GDP per capita"
  xLabel="Life expectancy (years)"
  yLabel="GDP per capita (USD)"
  sizeKey="size"
  showLabels={true}
/>

Props

dataScatterRow[]required

titlestringrequired

xLabel / yLabelstring—

sizeKeystring— (fixed radius mode)

sizeRange[number, number][3, 20]

radiusnumber5 (when no sizeKey)

showLabelsbooleanfalse

groupKeystring'group'

palettePaletteName | string[]'newsroom'

colorMode'default' | 'colorblind' | 'print' | 'highcontrast'auto-detect

showGridbooleantrue

showTablebooleantrue

Data Shape

interface ScatterRow {
  x: number;
  y: number;
  label?: string;   // point label text
  size?: number;    // drives radius via sizeKey
  group?: string;   // color grouping
}