React Scatter Matrix
Before you model anything, you want to know which parameters actually move together. A scatter matrix shows every pairwise relationship at once, with the correlation coefficient beside it.
Wafer electrical parameters
180 observations · 4 variables · upper triangle shows Pearson r
Hover a cell for its correlation
Installation
Props
| Prop | Type | Description |
|---|---|---|
| data | Record<string, number>[] | Raw observations |
| variables | ScatterVariable[] | { key, label, unit? } |
| groupBy | string | Field used to colour points |
| cellSize | number | Cell edge in px (default 108) |
Three panels, three jobs
The grid is deliberately asymmetric. The diagonal names each variable and prints its observed range. The lower triangle holds the scatters — the actual shapes, where you spot non-linearity, clustering, and heteroscedasticity that a single number would hide. The upper triangle holds Pearson r, shaded by strength and signed by direction.
Showing both matters. A correlation of 0.02 with a clear U-shape in the scatter is a strong relationship that Pearson cannot see, and a correlation of 0.9 driven entirely by two outliers looks convincing until you glance at the plot. The exported pearson(xs, ys) is available if you want the coefficient elsewhere.
groupBy colours points by a categorical field, which is how you catch the case where an apparent global trend is really three separate populations — Simpson's paradox is much easier to see than to test for.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.