Parallel Coordinates
One vertical axis per dimension and one line per record, coloured by class in the grey ladder.
$149 once · every Pro piece
Drag along any axis to brush a range: records outside the brushes fall back to a whisper while the ones inside firm up, and the count in the corner rolls. Click an axis to clear its brush; brushes on several axes combine. Drag an axis by its title pill to reorder: it follows the pointer and the other axes spring out of its way, every line stretching after them (focus a title and use the arrow keys to do the same). Hover a line, or Tab in and use the arrow keys, and that record runs hot with all its values in a panel. The legend isolates or hides a class.
Install
npx shadcn@latest add @obsyde/parallel-coordinatesNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ParallelCoordinates } from '@/components/obsyde/ember/parallel-coordinates/ParallelCoordinates';
export function Example() {
return (
<ParallelCoordinates records={90} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/parallel-coordinates/ParallelCoordinates.tsxcomponentember/parallel-coordinates/parallel-coordinates.cssstylesember/parallel-coordinates/ParallelCoordinatesDemo.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' |
recordsRecords | number | 90 |
axesAxes | number | 6 |
curveCurve | 'smooth' | 'linear' | 'smooth' |
opacityLine strength | number | 0.42 |
brushedStart brushed | boolean | false |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 360 |
seedSeed | number | 6 |