Skip to main content
SimilarExport ZIP
100%

Scatterplot Matrix with brush and tooltip v4

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

This scatterplot matrix visualizes relationships among numeric Facebook post metrics and includes categorical Type coloring. Users can brush across any cell to select points, which highlights corresponding dots in all other panels and hides non-selected points. Hovering reveals a tooltip with all attribute values for that data point. Built with d3.v4, it uses the `d3.brush` API for linked selections, `d3.csv` to load the dataset, and SVG rendering for axes, circles, and the brush extent.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/wenzhaoduo/'>wenzhaoduo</a>'s block: <a href='http://bl.ocks.org/wenzhaoduo/46ac73313dda6723ae220337ff13b99b'>Scatterplot Matrix with brush and tooltip v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot Matrix with brush and tooltip v4

This scatterplot matrix displays relationships between multiple numeric Facebook page metrics, such as lifetime post reach, impressions, and engagement counts. The visualization uses D3 v4 to render an SVG grid of plots, with brush interaction allowing users to select points across several dimensions simultaneously. A custom tooltip built with D3 helper functions and Underscore.js shows detailed values for each data point on mouseover. The data comes from a provided CSV file.

JJustinGOSSES
90% 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
77% 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
77% match
Loading thumbnail…

hw4

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.

Kkenny-wq
77% 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`.

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

Scatterplot Matrix Brushing

This example displays a scatterplot matrix of the classic Iris flower dataset, visualizing pairwise correlations among four morphological traits across three species. Brushing any cell highlights the corresponding points in all other scatterplots, while hovering also reveals individual data points. The visualization uses d3.svg.brush, d3.scale.linear, and a category color scale, with a legend generated via d3-legend. Data is loaded from an external CSV file, and rendering is done with SVG circles and axes.

SSpaceActuary
75% match