Scatterplot Matrix Brushing d3v4

100%

Scatterplot Matrix Brushing d3v4

✓ Published0🌍 Public

Last edited Jan 16, 2017

Created on Jan 16, 2017

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.

AI-generated description

mbostock’s <a href='http://bl.ocks.org/mbostock/4063663'>Scatterplot Matrix Brushing</a>, ported to d3v4 by @Fil.

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.

gpl-3.0 Licensed

Similar vizzes

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

88% match

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

86% match

Loading thumbnail…

Brushable scatterplot2

This interactive scatterplot matrix displays the iris dataset, showing pairwise relationships between four flower measurements (sepal and petal length and width) alongside histograms on the diagonal. The visualization uses d3.csv to load the data and d3.scaleLinear with d3.axisBottom and d3.axisLeft for axes. Points are colored by species using d3.scaleOrdinal, with colors distinguishing setosa, versicolor, and virginica. The chart is built entirely with SVG, and while brushable functionality is mentioned in the title, the code shown does not implement brushing interactions.

Cchingching17

85% match

Loading thumbnail…

Scatterplot Matrix

A scatterplot matrix visualizes pairwise correlations across four measured traits of iris flowers, using Anderson’s dataset. Each cell displays a scatterplot with points colored by species, and diagonal cells label each trait. The code uses D3 v3 to build the matrix, applying linear scales (`d3.scale.linear`), SVG axes (`d3.svg.axis`), and SVG circles for data points. Data loads from a CSV file via `d3.csv`. The matrix layout is generated by computing the cross-product of traits with a custom `cross` function.

Mmbostock

85% match

Loading thumbnail…

Brushable Scatter Plot Matrix

This interactive scatter plot matrix visualizes the Iris dataset, showing pairwise relationships between four flower measurements—sepal length, sepal width, petal length, and petal width—with points colored by species. Using d3.brush, users can drag across any off-diagonal cell to filter and highlight points across all other cells simultaneously, while diagonal cells display histograms of each variable's distribution. The visualization is built with d3.v4, rendering axes and circles as SVG elements, with scales derived from the CSV data's numeric ranges.

Hhi4u2qzy@gmail.com

85% 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

85% match

Loading thumbnail…

Fork of Fork of Brushable Scatterplot

This brushable scatterplot matrix displays the classic Iris flower dataset, showing how four sepal and petal measurements relate to three iris species. Each cell in the grid plots one measurement pair, with points colored red, yellow, or blue by species. Users can drag a brush across any cell to highlight corresponding data points across all other scatterplots, with brushed points remaining colored while unselected points turn gray. The visualization uses D3 version 3 APIs including `d3.svg.brush()` for the interactive brushing, `d3.scale.linear()` for axes, and coordinates rendered as SVG circles.

TTrista Lee

84% match

Loading thumbnail…

Fork of HW04-Brushable Scatter Plot Matrix

This example is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships between sepal and petal measurements with points colored by species. The matrix features histograms along the diagonal and scatter plots in off-diagonal cells, where users can brush to highlight selections across all panels. Built with D3 v4 and SVG, it uses `d3.brush()` for interactive brushing, `d3.scaleLinear` and `d3.scalePoint` for positioning, and `d3.histogram()` to bin data for the diagonal distributions. The visualization is derived from the classic brushable scatter plot matrix example, adapted to include per-cell axes and histograms.

Nnanegole

83% match