## Scatter Plot (S—294)

An interactive scatter: hover or focus a point for its label, drag to brush a region, and a trend line with its r value.

- URL: https://sundaeui.dev/components/scatter-plot
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/scatter-plot.json`
- Tags: scatter, correlation, chart, data, brush, analytics

Points are SVG circles; groups are told apart by shape (circle, square), not colour. A least-squares line runs through the data with the correlation in the header.
Drag across the plot to select a rectangle; the selection count and its average show below. Clear resets it.

### Usage

```tsx
import { ScatterPlot } from '@/components/sundae/scatter-plot'

<ScatterPlot />
```

### Props

- `points` (`{ id: string; x: number; y: number; label: string; group?: 0 | 1 }[]`, required): Data.
- `xLabel` (`string`): X axis.
- `yLabel` (`string`): Y axis.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Comparing two measures, finding outliers, pricing studies.

### When not to use

- Thousands of points: use canvas.

### Accessibility

- Each point is focusable with its label and values; arrow keys step through points.
- Brush results are announced.
- Reduced motion removes the movement and keeps every state change.