Parallel coordinates

Pro

Many rows across several measures, one line each. Drag along an axis to keep a range; ranges combine. Keyboard: arrows move a range, Shift resizes it, Delete clears it.

Installs components/ui/parallel-coordinates.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add @caliper/parallel-coordinates

Instance types by size, price and test latency

Instance types by size, price and test latency
Row	vCPU	Memory	Price / mo	p95
c6.large	2	4	62	40
m7.large	2	8	87	69
r7.large	2	16	106	98
t4.large	2	4	41	67
c6.xlarge	4	8	132	90
m7.xlarge	4	16	145	59
r7.xlarge	4	32	186	88
t4.xlarge	4	8	79	57
c6.2xlarge	8	16	264	80
m7.2xlarge	8	32	293	49
r7.2xlarge	8	64	378	78
t4.2xlarge	8	16	127	47
c6.4xlarge	16	32	500	70
m7.4xlarge	16	64	561	39
r7.4xlarge	16	128	754	68
t4.4xlarge	16	32	255	37
c6.large	2	4	74	84
m7.large	2	8	79	53
r7.large	2	16	98	82
t4.large	2	4	33	51
c6.xlarge	4	8	124	74
m7.xlarge	4	16	157	43
r7.xlarge	4	32	198	72
t4.xlarge	4	8	71	41
c6.2xlarge	8	16	256	64
m7.2xlarge	8	32	285	33
r7.2xlarge	8	64	370	62
t4.2xlarge	8	16	139	31

When to use #

Use it for

Choosing machines, plans or candidates by several measures at once.
Finding the rows that are good on every measure.

Skip it when

One or two measures; use the scatter chart.
Hundreds of rows on a phone.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/parallel-coordinates

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from brushMatch and ParallelCoordinates.

example.tsx

import { brushMatch, ParallelCoordinates } from "@/components/ui/parallel-coordinates"

The worked example comes with Pro

The 26-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

brushMatch

component

No props of its own; it accepts the native props of its root element.