SPLOM Chart

Scatter Plot Matrix for exploring pairwise relationships in multivariate data.

Setosa

Versicolor

Virginica

"use client"

import { SplomChart } from "@/components/ui/charts/statistical/splom-chart"

const irisData = [
  {
    id: "Setosa 1",
    values: { sepalL: 5.1, sepalW: 3.5, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 2",
    values: { sepalL: 4.9, sepalW: 3.0, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 3",
    values: { sepalL: 4.7, sepalW: 3.2, petalL: 1.3, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 4",
    values: { sepalL: 5.0, sepalW: 3.6, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 5",
    values: { sepalL: 5.4, sepalW: 3.9, petalL: 1.7, petalW: 0.4 },
    group: "Setosa",
  },
  {
    id: "Versicolor 1",
    values: { sepalL: 7.0, sepalW: 3.2, petalL: 4.7, petalW: 1.4 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 2",
    values: { sepalL: 6.4, sepalW: 3.2, petalL: 4.5, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 3",
    values: { sepalL: 6.9, sepalW: 3.1, petalL: 4.9, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 4",
    values: { sepalL: 5.5, sepalW: 2.3, petalL: 4.0, petalW: 1.3 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 5",
    values: { sepalL: 6.5, sepalW: 2.8, petalL: 4.6, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Virginica 1",
    values: { sepalL: 6.3, sepalW: 3.3, petalL: 6.0, petalW: 2.5 },
    group: "Virginica",
  },
  {
    id: "Virginica 2",
    values: { sepalL: 5.8, sepalW: 2.7, petalL: 5.1, petalW: 1.9 },
    group: "Virginica",
  },
  {
    id: "Virginica 3",
    values: { sepalL: 7.1, sepalW: 3.0, petalL: 5.9, petalW: 2.1 },
    group: "Virginica",
  },
  {
    id: "Virginica 4",
    values: { sepalL: 6.3, sepalW: 2.9, petalL: 5.6, petalW: 1.8 },
    group: "Virginica",
  },
  {
    id: "Virginica 5",
    values: { sepalL: 6.5, sepalW: 3.0, petalL: 5.8, petalW: 2.2 },
    group: "Virginica",
  },
]

const dimensions = ["sepalL", "sepalW", "petalL", "petalW"]

export function SplomChartDemo() {
  return (
    <SplomChart
      data={irisData}
      dimensions={dimensions}
      showLabels
      showHistograms
    />
  )
}

About

A SPLOM (Scatter Plot Matrix) displays all pairwise relationships between variables in a dataset. Each cell shows a scatter plot of two variables, with histograms on the diagonal showing each variable's distribution. Essential for exploratory data analysis and identifying correlations.

Installation


pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/splom-chart.json

Usage

import { SplomChart } from "@/components/ui/charts"
 
const data = [
  { id: "Item 1", values: { x: 10, y: 20, z: 15 }, group: "A" },
  { id: "Item 2", values: { x: 25, y: 15, z: 30 }, group: "B" },
]
 
const dimensions = ["x", "y", "z"]
 
export function Example() {
  return <SplomChart data={data} dimensions={dimensions} />
}

Examples

Default (Standard)

Full matrix with scatter plots and diagonal histograms.

Setosa

Versicolor

Virginica

"use client"

import { SplomChart } from "@/components/ui/charts/statistical/splom-chart"

const irisData = [
  {
    id: "Setosa 1",
    values: { sepalL: 5.1, sepalW: 3.5, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 2",
    values: { sepalL: 4.9, sepalW: 3.0, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 3",
    values: { sepalL: 4.7, sepalW: 3.2, petalL: 1.3, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 4",
    values: { sepalL: 5.0, sepalW: 3.6, petalL: 1.4, petalW: 0.2 },
    group: "Setosa",
  },
  {
    id: "Setosa 5",
    values: { sepalL: 5.4, sepalW: 3.9, petalL: 1.7, petalW: 0.4 },
    group: "Setosa",
  },
  {
    id: "Versicolor 1",
    values: { sepalL: 7.0, sepalW: 3.2, petalL: 4.7, petalW: 1.4 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 2",
    values: { sepalL: 6.4, sepalW: 3.2, petalL: 4.5, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 3",
    values: { sepalL: 6.9, sepalW: 3.1, petalL: 4.9, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 4",
    values: { sepalL: 5.5, sepalW: 2.3, petalL: 4.0, petalW: 1.3 },
    group: "Versicolor",
  },
  {
    id: "Versicolor 5",
    values: { sepalL: 6.5, sepalW: 2.8, petalL: 4.6, petalW: 1.5 },
    group: "Versicolor",
  },
  {
    id: "Virginica 1",
    values: { sepalL: 6.3, sepalW: 3.3, petalL: 6.0, petalW: 2.5 },
    group: "Virginica",
  },
  {
    id: "Virginica 2",
    values: { sepalL: 5.8, sepalW: 2.7, petalL: 5.1, petalW: 1.9 },
    group: "Virginica",
  },
  {
    id: "Virginica 3",
    values: { sepalL: 7.1, sepalW: 3.0, petalL: 5.9, petalW: 2.1 },
    group: "Virginica",
  },
  {
    id: "Virginica 4",
    values: { sepalL: 6.3, sepalW: 2.9, petalL: 5.6, petalW: 1.8 },
    group: "Virginica",
  },
  {
    id: "Virginica 5",
    values: { sepalL: 6.5, sepalW: 3.0, petalL: 5.8, petalW: 2.2 },
    group: "Virginica",
  },
]

const dimensions = ["sepalL", "sepalW", "petalL", "petalW"]

export function SplomChartDemo() {
  return (
    <SplomChart
      data={irisData}
      dimensions={dimensions}
      showLabels
      showHistograms
    />
  )
}

Compact

Smaller cells with custom color for dense data visualization.

"use client"

import { SplomChart } from "@/components/ui/charts/statistical/splom-chart"

const metricsData = [
  { id: "Q1", values: { revenue: 120, expenses: 80, profit: 40, growth: 12 } },
  { id: "Q2", values: { revenue: 150, expenses: 90, profit: 60, growth: 25 } },
  { id: "Q3", values: { revenue: 140, expenses: 85, profit: 55, growth: -7 } },
  { id: "Q4", values: { revenue: 180, expenses: 100, profit: 80, growth: 28 } },
  { id: "Q5", values: { revenue: 160, expenses: 95, profit: 65, growth: -11 } },
  { id: "Q6", values: { revenue: 200, expenses: 110, profit: 90, growth: 25 } },
  {
    id: "Q7",
    values: { revenue: 175, expenses: 105, profit: 70, growth: -12 },
  },
  { id: "Q8", values: { revenue: 210, expenses: 120, profit: 90, growth: 20 } },
]

const dimensions = ["revenue", "expenses", "profit", "growth"]

export function SplomChartCompact() {
  return (
    <SplomChart
      data={metricsData}
      dimensions={dimensions}
      variant="compact"
      showLabels
      color="#8b5cf6"
    />
  )
}

Upper Triangle

Only upper triangle to avoid redundant plots.

"use client"

import { SplomChart } from "@/components/ui/charts/statistical/splom-chart"

// Performance metrics across different systems
const performanceData = [
  { id: "System A", values: { cpu: 45, memory: 62, io: 38, network: 55 } },
  { id: "System B", values: { cpu: 72, memory: 48, io: 65, network: 42 } },
  { id: "System C", values: { cpu: 58, memory: 75, io: 52, network: 68 } },
  { id: "System D", values: { cpu: 35, memory: 40, io: 28, network: 35 } },
  { id: "System E", values: { cpu: 88, memory: 82, io: 78, network: 85 } },
  { id: "System F", values: { cpu: 65, memory: 58, io: 60, network: 62 } },
]

const dimensions = ["cpu", "memory", "io", "network"]

export function SplomChartUpper() {
  return (
    <SplomChart
      data={performanceData}
      dimensions={dimensions}
      variant="upper"
      showLabels
      showHistograms
      color="#10b981"
    />
  )
}

API Reference

Prop	Type	Default	Description
data	SplomDataPoint[]	required	Array of data points
dimensions	string[]	required	Variable names to include
variant	"standard" \| "upper" \| "lower" \| "scatter"	"standard"	Matrix layout style
cellSize	number	100	Size of each cell in pixels
pointRadius	number	3	Radius of scatter points
showLabels	boolean	true	Show dimension labels
showHistograms	boolean	true	Show histograms on diagonal
color	string	"#3b82f6"	Single color for all points
colorScheme	string[]	blue palette	Colors for groups
valueFormatter	function	toFixed(1)	Format tooltip values

Data Format

interface SplomDataPoint {
  id: string // Unique identifier
  values: Record<string, number> // Dimension values
  group?: string // Optional group for coloring
}

Variants

Standard

Full matrix with all pairwise scatter plots and diagonal histograms. Default and most comprehensive view.

Upper

Only shows upper triangle of the matrix (above diagonal). Eliminates redundant plots since lower triangle is symmetric.

Lower

Only shows lower triangle of the matrix (below diagonal). Alternative to upper triangle.

Scatter

Scatter plots only, no diagonal histograms. Pure pairwise comparison view.

Features

Pairwise visualization: See relationships between all variable pairs at once
Diagonal histograms: Distribution of each variable shown on diagonal
Hover interactions: Points highlight across all cells on hover
Group coloring: Automatic color assignment based on groups
Single color mode: Use color prop for consistent appearance
Interactive tooltips: See all dimension values on hover
Dark mode support: Proper styling for both themes

Notes

SPLOM charts are powerful for exploratory data analysis with multivariate datasets
The matrix shows each variable plotted against every other variable
For best results, use 3-6 dimensions (more can make the chart difficult to read)
Use upper/lower variants when space is limited
Color-coded groups help identify clusters and patterns across multiple dimensions

Parallel Coordinates Parcats Chart

On This Page

About Installation Usage Examples Default (Standard)Compact Upper Triangle API Reference Data Format Variants Standard Upper Lower Scatter Features Notes

Deploy and Scale Agents with Simplifying AI

Simplifying AI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.