Encircle Scatterplot with alpha shapes

100%

Encircle Scatterplot with alpha shapes

✓ Published0🌍 Public

Last edited Jul 31, 2017

Created on Jul 31, 2017

This visualization shows a scatterplot matrix of the classic Iris flower dataset, with each cell displaying pairwise correlations between four measurements (sepal length, sepal width, petal length, petal width). The three species are distinguished by color, and each species’ points are encircled by an irregular polygon boundary. The boundaries are computed using an alpha-shape algorithm that filters Delaunay triangles from `d3.voronoi` by a distance threshold, then extracts connected triangle edges via a custom `boundary` function. The polygons are rendered as SVG paths using D3 v4’s data-binding, while axes and brushing interactions follow the standard scatterplot-matrix pattern.

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

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/9f550cd314c5c1fb1c5738df24027644'>Encircle Scatterplot with alpha shapes</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Encircle Scatterplot with alpha shapes

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.

PPhilippe Rivière

92% match

Loading thumbnail…

brushable_scatter_plot_matrices _1

This interactive scatter plot matrix explores the Iris flower dataset, showing the relationships between sepal length, sepal width, petal length, and petal width. Users can select any two dimensions for the x and y axes, with points colored by species (setosa, versicolor, virginica) using a color legend. The visualization uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft to render gridlines and tick marks. Circles are drawn as SVG elements with opacity set in CSS, and axis labels are rotated using SVG transforms.

Wweird_danger

82% match

Loading thumbnail…

Iris_312553048_HW4

This interactive scatter plot matrix visualizes the classic Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width. Using D3 v6 with an SVG rendering, the scatter plot matrix uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for coloring the three Iris species, and `d3.brush` for interactive selection. Brushing on any scatter plot highlights that data subset across the entire matrix by dimming unselected circles, and a legend updates to indicate which species are currently included in the selection.

Jjerry70938@gmail.com

82% match

Loading thumbnail…

Scatter Plot

This scatter plot visualization explores the Iris flower dataset by displaying four coordinated plots in a 2x2 grid. Each plot shows sepal length against petal length, with progressive additions: the first shows only positions, the second encodes petal width as point size, the third color-codes points by species, and the fourth combines both size and color. The visualization is built with D3.js v3, using the reusable ScatterPlot module that handles axis creation, scaling, and SVG rendering. It loads data from a CSV file and employs the d3.csv and d3.json APIs to parse the dataset and metadata.

TThanaporn-sk

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

82% match

Loading thumbnail…

Scatter plot testing

This scatter plot visualizes the classic Iris dataset, mapping sepal length and width to the x- and y-axes while encoding petal length through circle radius and species via color. The D3 v4 code loads the CSV, uses linear and sqrt scales for positioning and sizing, and renders SVG circles with ordinal color mapping. Axes are drawn using d3.axisBottom and d3.axisLeft.

AAtomy9

81% match

Loading thumbnail…

scatter_plot_matrices _2

This example shows a scatter plot matrix for the Iris dataset, displaying pairwise relationships between sepal and petal measurements. Each off-diagonal cell contains a scatter plot colored by species, while the diagonal cells show histograms of individual traits. The visualization uses D3 v5 with SVG rendering, leveraging `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.brush`, and `d3.histogram` to build the matrix. Data loads from a CSV file, and users can brush cells to explore correlations across dimensions.

Wweird_danger

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

81% match