Parallel coordinates

Compare experiment settings and outcomes in one plot. Each line is a run; its axes can mix continuous values such as learning rate with categories such as optimizer.

Experiment selection and table linkage

Select a line, button, or table checkbox below. They share selected experiment IDs, which also survive hiding an axis.

The example implements “Select top 2” and table filtering outside the chart. Reuse the reported IDs for your own table or detail view.

Data and controlled state

Define axes in display order and key each run's values by axis ID:

const axes: ParallelCoordinatesAxis[] = [
  { id: 'rate', label: 'Learning rate', type: 'continuous' },
  { id: 'optimizer', label: 'Optimizer', type: 'categorical', categories: ['SGD', 'Adam'] },
  { id: 'score', label: 'Score', type: 'continuous', domain: [0, 100] },
]
const experiments = [{
  id: 'run-a', label: 'Run A',
  values: { rate: 0.001, optimizer: 'Adam', score: 89 },
}]
const [selectedIds, setSelectedIds] = useState<string[]>([])

<ParallelCoordinates
  axes={axes} series={experiments}
  selectedIds={selectedIds} onSelectionChange={setSelectedIds}
/>

Keep axis and experiment IDs unique and stable. Continuous values must be numbers; convert numeric strings before rendering. Categorical values follow categories from bottom to top.

Axes and missing values

Continuous axes fit finite data with readable ticks. Set a finite, increasing domain for a fixed scale. Invalid domains fall back to automatic fitting; constant and empty data still receive a finite range.

Missing or non-finite values, unknown categories, and values outside a fixed domain break the trace. A lone valid value appears as a point. Experiment buttons retain the values in accessible text.

Wire both selectedIds and onSelectionChange to apply selection changes. Without the callback, selection is read-only. visibleAxisIds filters the axes without changing their declared order.

Props

Use at least two visible axes. The plot scrolls horizontally when needed; brushing and axis-reordering controls are not included. Start with a small comparison set.