Untitled

100%

✓ Published0🌍 Public

Last edited Sep 27, 2019

Created on Sep 27, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This is a scatterplot matrix visualizing relationships among six traits from an environmental dataset, with each cell showing a plot for a pair of traits. The data points are colored by eventname using a categorical color scale, and users can click cells to filter points via a brush interaction. The visualization is built with D3 v4, using scales like `d3.scaleLinear` and `d3.scaleOrdinal`, a brush API for filtering, and SVG rendering within a React framework. The data is loaded from a CSV file, and a legend labels the three event categories.

Mmuzzheng

84% match

Loading thumbnail…

Untitled

This example displays a scatterplot matrix of the Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width, with points colored by species. The visualization uses D3 v5 to render SVG circles and axes, and implements linked brushing through `d3.svg.brush`. Dragging a brush over any cell highlights matching points across all other cells, while a gray overlay indicates unselected data. The code loads the data via `d3.csv` and maps each trait’s domain to linear scales.

TTrista Lee

83% match

Loading thumbnail…

Untitled

A scatterplot matrix displays pairwise relationships among four measurements of the Iris dataset, colored by species using a D3 ordinal scale. The visualization arranges 4x4 grid cells, each showing a scatterplot for a variable pair, with axes rendered via d3.axisLeft and d3.axisBottom. Diagonal cells display variable name labels instead of plots. Data loads asynchronously from a CSV file, with linear scales mapping each variable's extent to plot dimensions. Rendered as SVG circles with radius 2, using d3.select and d3.csv for data binding.

Ssubratanp

81% match

Loading thumbnail…

Scatterplot Matrix Brushing

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.

LLauraCortes

80% match

Loading thumbnail…

Untitled

This example shows a scatterplot matrix comparing six environmental metrics—forest cover, agriculture, wood removal, planted forest, and primary forest—across Brazil, the USA, and China, using data from Env.csv. It displays pairwise relationships between all traits, with points colored by country and a legend identifying each nation. The visualization uses D3 v4 to render SVG shapes, scales, axes, and a brushing interaction that highlights selected data points by hiding others. Each cell is built with the `cross` function, relying on D3 scales and the `d3.brush` API for filtering.

Mmuzzheng

79% match

Loading thumbnail…

hw4

This visualization displays the Iris dataset as a brushable scatter plot matrix with four trait dimensions. Each cell shows a scatterplot of two traits, where circles are colored by species, while diagonal cells label the traits. Users can brush rectangular regions to filter points across all plots simultaneously. The code uses D3 v4 with an SVG renderer, implementing `d3.brush()` for interactive selection and `d3.scaleLinear`/`d3.scaleOrdinal` for axes and colors.

JJiaYu07

79% match

Loading thumbnail…

Untitled

This visualization presents a scatter plot matrix of the Iris flower dataset, with each pair of the four numeric variables (sepal and petal length and width) displayed as separate small multiples. The diagonal cells show histograms of each variable’s distribution, while off-diagonal cells show scatter plots colored by species using `d3.scaleOrdinal`. Built with `d3.scalePoint` to position each cell, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks, it uses `d3.extent` to compute per-cell domains and the `d3.histogram` API to bin data for the diagonal plots. Data is loaded as CSV from a remote URL, rendered as SVG circles and rectangles.

Sstanley.shen2003@gmail.com

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

78% match