Encircle Scatterplot with alpha shapes

100%

Encircle Scatterplot with alpha shapes

✓ Published0🌍 Public

Last edited Jul 10, 2017

Created on Jul 10, 2017

This example displays a scatterplot matrix of the Iris flower dataset, with each cell showing pairwise relationships between sepal length, sepal width, petal length, and petal width, colored by species. It enhances the classic matrix by adding alpha shapes—computed via `d3.hexbin`, `d3.voronoi`, and a custom boundary function—to generate contours that encircle each species’ points in every plot. The visualization uses d3.v4 with SVG rendering, including brushing functionality from d3.brush. Data comes from Anderson’s Iris measurements and is loaded as a CSV file.

AI-generated description

Using alpha shapes to group or "encircle" sets of points.

It's not fast, but it's fun.

DISCLAIMER: this code is quite hackish, don't copy it blindly.

TODO: buffer the shapes so that they nicely enclose dots as ggplot2's geom_encircle function does.

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.

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

A5_ScatterplotMatrix

This example presents a scatterplot matrix for the Iris flower dataset, showing pairwise relationships between sepal and petal measurements, colored by species. It highlights how the visualization reveals clusters and correlations across dimensions. The code uses D3 v7 to create SVG circles, with `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a CSV via `d3.text`, and mouseover events add a yellow highlight to all circles in a cell, emphasizing points under inspection.

DDuc Pham

85% match

Loading thumbnail…

scatterplot

This scatterplot matrix visualizes the Iris dataset, showing pairwise relationships between sepal and petal measurements, with histograms along the diagonal and color-coded points by species. The plot uses d3.brush for interactive brushing and selection across cells, while d3.histogram generates the diagonal distributions. SVG rendering with d3.scaleLinear, d3.scaleOrdinal, and axis components handles scaling and annotation. The interface allows brushing to highlight subsets across all scatterplots simultaneously, with non-selected points dimmed via a hidden class.

Ddaniel

83% match

Loading thumbnail…

Scatter Plot Matrix in D3

This scatter plot matrix displays pairwise relationships among four numeric Iris flower measurements, with points colored by species using a D3 ordinal scale. Each cell is an SVG chart rendered via `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleLinear`, with diagonal cells labeling the corresponding dimension. The code loads Iris data from a GitHub Gist CSV, parses numeric fields, and iterates through all column combinations to generate a 4×4 grid of plots using `d3.csv` and `d3.select`.

EEunice Tu

83% match

Loading thumbnail…

Scatter

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length for each sample. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render the axes and circles. The SVG is dynamically sized to the window, and the plot is encapsulated in a custom `scatterPlot` function with configurable margins, radius, and accessor functions. The code also includes commented-out code for cycling through different variables, and a custom Share Tech font styles the text.

AAlpineStranger

83% match

Loading thumbnail…

Scatter plot for iris data set

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each point represents an individual flower, colored by species (setosa, versicolor, or virginica) using a custom marker function. The code loads data via `d3.csv` from a GitHub gist, parses numeric fields, and renders circles with `d3.selectAll` and `.join()`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.extent` set the scales to the data domain.

Aachalasam

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

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

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

82% match