Skip to main content
SimilarExport ZIP
100%

hw4

✓ Published0🌍 Public
Kkenny-wq
Last edited Oct 8, 2023
Created on Oct 5, 2023
Forked from HTML Starter

This interactive scatter plot matrix lets users brush rectangular regions across any pair of dimensions to filter the displayed data points. The visualization initially shows all observations as colored circles across every pairwise combination of variables, with histograms along the diagonal for each dimension. Users can drag to create a brush selection in any plot, which immediately highlights matching points in all other plots while dimming non-selected ones. Built with D3 v6, the example uses `d3.brush`, `d3.cross`, `d3.scaleLinear`, and SVG rendering, with colors mapped via `d3.scaleOrdinal` and `schemeCategory10`, using the v3 dataset.

AI-generated description
MIT Licensed

Similar vizzes

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`.

黃黃歆善
83% 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
79% 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
79% match
Loading thumbnail…

HW4 Brushable Scatterplot Matrix

A brushable scatterplot matrix displays pairwise relationships among four Iris flower measurements (sepal length, sepal width, petal length, petal width) from the classic Iris dataset. Users drag a brush rectangle over any scatterplot cell to highlight corresponding points across all other cells, while unselected points dim. Diagonal cells show histograms of each measurement. The visualization uses D3 v7 with `d3.scaleLinear` axes, `d3.brush` for interactive selection, and SVG rendering; three Iris species are color-coded with distinct hex values.

RRachel Chen
79% 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
79% match
Loading thumbnail…

Fork of HW4 Brushable Scatterplot Matrix

This interactive scatterplot matrix visualizes the Iris dataset, displaying pairwise relationships between sepal and petal measurements across all combinations. Each off-diagonal cell shows a scatterplot of points colored by species, while diagonal cells display histograms of individual variables. Users can brush selections within any scatterplot cell to highlight corresponding points across all other cells simultaneously, with brushed points remaining visible while others fade to gray. The visualization uses D3 v7 with SVG rendering, employing `d3.brush()` for interactive selection, `d3.scaleLinear()` for axes, and `d3.bin()` to generate histograms.

Nn90098@gmail.com
79% match
Loading thumbnail…

Fork of HW04-Brushable Scatter Plot Matrix

This visualization is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships between sepal and petal measurements. Each off-diagonal cell displays colored scatter points by iris species, while diagonal cells show histograms of individual trait distributions. Users can brush over any cell to highlight corresponding points across all other plots. The code uses D3 v4 with SVG rendering, employing `d3.brush`, `d3.histogram`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate the interactive matrix. Data is loaded from a local CSV file.

Ccpsu00
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
77% match