Correlation Matrix
Every pair of variables as a cell on a diverging scale: cool grey for negative, near-black at zero and bone for positive, with only the strongest pair in the accent (the heat ramp for positives is opt-in).
$149 once · every Pro piece
The diagonal is hatched, since a variable against itself says nothing. Hover a cell, or Tab in and walk it with the arrow keys: the cell lifts on a spring, its row and column stay lit while everything else steps back, the names brighten and a caret marks its value on the gradient scale. Switch to clustered order (average linkage on 1 − r) and the cells spring into blocks of related variables. Optional values inside the cells and a lower-triangle layout with names on the diagonal.
Install
npx shadcn@latest add @obsyde/correlation-matrixNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { CorrelationMatrix } from '@/components/obsyde/ember/correlation-matrix/CorrelationMatrix';
export function Example() {
return (
<CorrelationMatrix variables={10} order="original" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/correlation-matrix/CorrelationMatrix.tsxcomponentember/correlation-matrix/correlation-matrix.cssstylesember/correlation-matrix/CorrelationMatrixDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/stage.tsxsharedember/viz-kit/stage.csssharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
variablesVariables | number | 10 |
orderOrder | 'original' | 'clustered' | 'original' |
triangleTriangle | 'full' | 'lower' | 'full' |
cellMaxMax cell | number | 46 |
palettePalette | 'mono' | 'heat' | 'mono' |
legendLegend | 'gradient' | 'none' | 'gradient' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
valueLabelsValue labels | boolean | false |
seedSeed | number | 9 |