Charts — Scatterplot Matrix — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/scatterplot-matrix

Scatterplot Matrix

charts

import { ScatterplotMatrix } from "semiotic"

Wraps: StreamXYFrame

A Scatterplot Matrix (SPLOM) renders an N-by-N grid of scatterplots for every pairwise combination of the specified numeric fields. It is the standard tool for exploring correlations and clusters across multiple dimensions simultaneously. Diagonal cells show per-field histograms, and two built-in interaction modes -- hover cross-highlighting and crossfilter brushing -- let you probe the data interactively. Color-encode a categorical variable with colorBy to reveal group structure.

Quick Start

At minimum, provide data and fields. The component builds the full matrix of pairwise scatterplots automatically.

setosa

versicolor

virginica

sepalLength

sepalWidth

petalLength

petalWidth

sepalLength

sepalWidth

petalLength

petalWidth

import { ScatterplotMatrix } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { sepalLength: 5.1, sepalWidth: 3.5, petalLength: 1.4, petalWidth: 0.2, species: "setosa" }, { sepalLength: 7.0, sepalWidth: 3.2, petalLength: 4.7, petalWidth: 1.4, species: "versicolor" }, { sepalLength: 6.3, sepalWidth: 3.3, petalLength: 6.0, petalWidth: 2.5, species: "virginica" }, // ...60 data points ], fields: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"], /* --- Size --- */ cellSize: 140, /* --- Customize --- */ colorBy: "species" } export default () => { return <ScatterplotMatrix {...frameProps} /> }

Examples

Hover Interaction

With hoverMode enabled (the default), hovering a point in any cell cross-highlights the same data point in every other cell. The hovered point is drawn larger with a dark stroke so you can track a single observation across all dimensions. Non-matching points are slightly dimmed.

setosa

versicolor

virginica

Sepal Length

Sepal Width

Petal Length

Petal Width

Sepal Length

Sepal Width

Petal Length

Petal Width

import { ScatterplotMatrix } from "semiotic" const frameProps = { /* --- Data --- */ data: irisData // ~60 points with species, fields: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"], /* --- Size --- */ cellSize: 140, /* --- Customize --- */ colorBy: "species", pointRadius: 3, pointOpacity: 0.6, fieldLabels: { sepalLength: "Sepal Length", ... }, /* --- Interact --- */ hoverMode: true } export default () => { return <ScatterplotMatrix {...frameProps} /> }

Brush Interaction

Drag to brush a rectangular region in any cell. Incrossfilter mode (the default), all points outside the brushed range are dimmed across the entire matrix -- except in the brushed cell itself, which remains fully visible so you can adjust the selection. The diagonal histograms update to reflect the brushed subset.

setosa

versicolor

virginica

sepalLength

sepalWidth

petalLength

petalWidth

sepalLength

sepalWidth

petalLength

petalWidth

import { ScatterplotMatrix } from "semiotic" const frameProps = { /* --- Data --- */ data: irisData // ~60 points with species, fields: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"], /* --- Size --- */ cellSize: 140, /* --- Customize --- */ colorBy: "species", unselectedOpacity: 0.08, /* --- Interact --- */ brushMode: "crossfilter", hoverMode: false } export default () => { return <ScatterplotMatrix {...frameProps} /> }

Click to Act

Pass an onClick handler to make the matrix a navigation surface. Clicking any point in any cell fires the callback with the clicked row datum and its grid-relative pixel position -- no containeronClick wrapper or hover tracking required. It fires in hover mode (the default); in brush mode the drag-select overlay captures pointer events. TheLong Way Aroundexample uses it to jump a time-series replay to the clicked day.

JSX

<ScatterplotMatrix data={rows} fields={["suez", "babElMandeb", "capeOfGoodHope", "panama"]} colorBy="scenario" onClick={(row) => jumpReplayTo(row.scenarioId, row.dayIndex)} />

Color & Labels

Use colorBy to map a categorical field to color, andfieldLabels to provide human-readable axis labels in the diagonal cells and row/column headers.

setosa

versicolor

virginica

Sepal Length

Sepal Width

Petal Length

Petal Width

Sepal Length

Sepal Width

Petal Length

Petal Width

import { ScatterplotMatrix } from "semiotic" const frameProps = { /* --- Data --- */ data: irisData // ~60 points with species, fields: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"], /* --- Size --- */ cellSize: 150, /* --- Layout --- */ diagonal: "histogram", /* --- Customize --- */ colorBy: "species", colorScheme: ["#e41a1c", "#377eb8", "#4daf4a"], showLegend: true, fieldLabels: { sepalLength: "Sepal Length", sepalWidth: "Sepal Width", petalLength: "Petal Length", petalWidth: "Petal Width" }, /* --- Interact --- */ histogramBins: 15 } export default () => { return <ScatterplotMatrix {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	array	Yes	—	Array of data objects. Each object should contain numeric fields for plotting and optionally a categorical field for coloring.
`fields`	string[]	Yes	—	Array of field names (keys in each data object) to include in the matrix. Determines which numeric dimensions are plotted.
`fieldLabels`	Record<string, string>	—	`{}`	Optional mapping from field names to display labels. Used in diagonal cells and axis labels.
`colorBy`	string \| function	—	—	Field name or accessor function to determine point color. When set, each unique value gets a distinct color.
`colorScheme`	string \| string[]	—	`"category10"`	Color scheme name (e.g. "category10", "tableau10") or array of color strings.
`cellSize`	number	—	`150`	Size of each cell in the matrix (width and height in pixels).
`cellGap`	number	—	`4`	Gap between cells in pixels.
`pointRadius`	number	—	`2`	Radius of each point in pixels.
`pointOpacity`	number	—	`0.5`	Default opacity for data points.
`diagonal`	"histogram" \| "density" \| "label"	—	`"histogram"`	What to display on the diagonal cells. "histogram" shows a distribution histogram, "density" shows a density curve, "label" shows just the field name.
`histogramBins`	number	—	`20`	Number of bins for diagonal histograms.
`brushMode`	"crossfilter" \| "intersect" \| false	—	`"crossfilter"`	Brush interaction mode. "crossfilter" excludes the brushed cell from its own filter. "intersect" requires matching all brushed regions. false disables brushing.
`hoverMode`	boolean	—	`true`	When true, hovering a point in one cell cross-highlights the same datum in every other cell.
`unselectedOpacity`	number	—	`0.1`	Opacity applied to points that do not match the current brush or hover selection.
`showGrid`	boolean	—	`false`	Show grid lines inside each scatterplot cell.
`tooltip`	object \| function	—	—	Tooltip configuration or render function passed to each cell.
`showLegend`	boolean	—	`true (when colorBy)`	Show a color legend above the matrix. Defaults to true when colorBy is set.
`idAccessor`	string \| function	—	—	Field name or accessor to identify each row in tooltips. Defaults to "Row {index}".
`onClick`	function	—	—	Called when a point in any cell is clicked. Receives the clicked row datum and its grid-relative pixel position { x, y }. Fires in hover mode (the default); in brush mode the drag-select overlay captures pointer events, so clicks are not delivered.
`onObservation`	function	—	—	Called with { type, datum, x, y, ... } on hover, hover-end, and click. x/y are grid-relative pixels (the same space as onClick) so a coordinated-view handler can position UI consistently across event types. Use to drive coordinated views from matrix interactions.
`width`	number	—	—	Overall width constraint. If not specified, the matrix sizes itself based on cellSize and field count.
`height`	number	—	—	Overall height constraint. If not specified, the matrix sizes itself based on cellSize and field count.
`className`	string	—	—	CSS class name applied to the outermost container.

Scatterplot — single x-y scatterplot for two-variable analysis
Heatmap — for dense data, aggregate into color-encoded grid cells
BubbleChart — scatterplot with size encoding for a third numeric variable
Interaction — brushing, hover, and linked selection across charts
StreamXYFrame — the underlying Frame powering each cell in the matrix