Scatterplot Matrix Brushing

100%

Scatterplot Matrix Brushing

✓ Published0🌍 Public

Last edited May 22, 2017

Created on May 17, 2017

This example presents a scatterplot matrix for multidimensional data, where each cell displays a pairwise correlation between traits. Users can see the relationships across all variable combinations at once, with data points colored by category. The visualization is built with D3 v4, using SVG rendering and d3.scaleLinear for axes. It loads JSON data and renders circles for each observation, with axes styled via d3.axisBottom and d3.axisLeft. The matrix layout is generated programmatically, showing all trait pairings in a grid.

AI-generated description

The scatterplot matrix visualizations pairwise correlations for multi-dimensional data; each cell in the matrix is a scatterplot. This example uses Anderson's data of iris flowers on the Gaspé Peninsula. Scatterplot matrix design invented by J. A. Hartigan; see also R and GGobi. Data on Iris flowers collected by Edgar Anderson and published by Ronald Fisher.

See also this simpler static version without brushing.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063663'>Scatterplot Matrix Brushing</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Scatterplot Matrix Brushing

A scatterplot matrix uses the classic iris flower dataset to display pairwise correlations across four measurements: sepal and petal length and width. Each cell contains a scatterplot of two traits, and users can drag a rectangular brush over any plot to highlight the same flowers across all other cells. The highlighted selection is synced throughout the matrix, while unselected points are grayed out. The visualization is built with D3 v3, using SVG rendering, `d3.scale.linear` for axes, and `d3.svg.brush` to manage brush interactions.

Mmbostock

84% match

Loading thumbnail…

Scatterplot Matrix Brushing

This scatterplot matrix shows pairwise correlations among four measurements of iris flowers, colored by species, with the ability to brush in any cell to filter and highlight matching points across all other cells. The visualization is built with D3 v3 using SVG, CSV data loading via `d3.csv`, and scales from `d3.scale.linear`. Brushing relies on `d3.svg.brush`, with brush events (`brushstart`, `brush`, `brushend`) updating circle visibility via the `hidden` class. The iris dataset originates from Anderson and Fisher, and the matrix layout is generated through a cross-product of trait pairs.

KKuerzibe

82% match

Loading thumbnail…

HW04-Brushable Scatter Plot Matrix

A brushable scatter plot matrix displays pairwise relationships among four measurements of the iris dataset, with histograms along the diagonal and colored scatter plots for each trait combination by species. Users can drag a rectangular brush across any cell to select data points, which highlights matching points across all other cells. Built with D3 v4, the visualization renders as SVG and uses `d3.brush`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.histogram` for the diagonal distributions. The axes are generated via `d3.axisBottom` and `d3.axisLeft`.

黃黃歆善

81% match

Loading thumbnail…

Scatterplot Matrix Brushing d3v4

This example shows a scatterplot matrix of Anderson’s iris flower measurements, with four quantitative traits (sepal and petal length and width) plotted pairwise for 150 specimens, colored by species. Users can drag a rectangular brush on any cell to highlight matching points across all other plots, while unselected circles are dimmed. Built with D3 v4, it uses `d3.brush` for interactive selection, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes, and `d3.schemeCategory10` for colors. Data is loaded from a CSV file describing Edgar Anderson’s dataset, rendered as SVG circles.

PPhilippe Rivière

81% match

Loading thumbnail…

Scatterplot Matrix with D3

A scatterplot matrix displays pairwise relationships among four numeric measurements of iris flowers, with points colored by variety using a categorical color scale. Built with D3 v7 and SVG, the visualization renders a grid of small multiples, each pairing two variables on linear scales. The code constructs scales and axes from column metadata, uses `d3.cross` to generate cell positions, and applies `d3.InternSet` to filter data by variety. Labels appear along the diagonal, and the d3-legend library is linked but legend rendering is not implemented in the visible script.

OOlha

80% match

Loading thumbnail…

Untitled

This example shows a scatterplot matrix for four traits of a biological species dataset, with each pair of traits plotted in a grid of small multiples. Users can brush a rectangular region in any cell to highlight the corresponding points across all other cells, while unselected points turn gray. The code uses d3.scale.linear, d3.svg.axis, d3.svg.brush, and d3.scale.category10 to render SVG circles colored by species, loading CSV data from a remote VizHub URL.

Hhistidiine

80% match

Loading thumbnail…

Brushable Scatter Plot Matrix

A brushable scatter plot matrix displays pairwise relationships among four numeric iris flower measurements, with histograms along the diagonal showing each variable's distribution and points colored by species. The visualization is built using D3 v7, rendering SVG elements via `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.histogram` for binning the diagonal distributions. Each off-diagonal cell encodes two variables as a scatterplot, while the color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10` to distinguish Iris species.

Yyuting89830@gmail.com

80% match

Loading thumbnail…

Brushable Scatterplot

This interactive scatterplot matrix displays the Iris dataset, showing pairwise relationships between four floral measurements. Each off-diagonal cell contains a scatterplot of data points colored by species, while diagonal cells display histograms of individual feature distributions. Users can brush rectangular regions across any plot to highlight corresponding points in all other cells, enabling rapid comparison of multi-dimensional correlations. The visualization is built with D3 v4, using d3.brush for the linked selections, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, rendered as SVG.

Cchingching17

80% match