Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot Matrix (Vanilla JS 🙃)

✓ Published0🌍 Public
KKamalabot
Last edited Jul 11, 2022
Created on Jul 11, 2022

This D3 scatter plot matrix compares all numeric fields of the iris dataset, with colors distinguishing the three iris species. Rendered as a 4×4 grid of 16 SVG charts, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeSet1` for categorical coloring, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded via `d3.csv` from a GitHub Gist. Each chart positions circles with a 4-pixel radius, and the diagonal charts display field names as titles.

AI-generated description

A multivariate comparison of all the numeric fields in the iris dataset. Colors denote members of the three iris species. Inspired by this

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

A 4×4 scatter plot matrix compares every pair of numeric fields in the iris dataset, with circles colored by species using a d3.scaleOrdinal and the schemeSet1 color array. Each cell combines d3.axisLeft and d3.axisBottom for scales, while d3.csv loads the data from a Gist. The SVG charts are sized to a quarter of the window, and titles appear only on the diagonal cells. The code relies on vanilla JavaScript with d3 v6, using d3.select, d3.extent, and d3.scaleLinear per plot.

AAndrea Mignone
93% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This matrix of scatter plots compares every numeric field in the classic Iris dataset, with colors distinguishing the three species. Each of the sixteen small SVG charts shows the relationship between a pair of measurements. The code uses `d3.csv` to load the data, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, and `d3.axisBottom` to build the plots, and `schemeSet1` for the categorical color palette. Diagonal charts display the field name as a title.

Ppkdvalis
91% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4×4 scatter plot matrix comparing all numeric fields of the classic Iris dataset, with each point colored by species using a categorical scale. Written in vanilla JavaScript with d3.v6, it renders SVG charts by leveraging `d3.csv` for parsing, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `schemeSet3` for color encoding. Each off-diagonal cell plots a pairwise comparison, while diagonal cells display field titles, and axes are generated via `d3.axisLeft` and `d3.axisBottom`.

Aadventuresenglish.info@gmail.com
91% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization shows a 4x4 scatter plot matrix comparing all numeric fields of the iris dataset, with points colored by species using `d3.scaleOrdinal` and `schemeSet1`. Each cell pairs two variables, with axes drawn via `d3.axisLeft` and `d3.axisBottom`, and diagonal cells display variable titles. The code loads CSV data from a GitHub gist, parses it with `d3.csv`, calculates extents with `d3.extent`, and renders the matrix across the full window using multiple SVGs sized to a quarter of the viewport. It relies solely on D3 v6 in vanilla JavaScript.

Aadventuresenglish.info@gmail.com
91% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4x4 scatter plot matrix comparing all numeric fields of the classic Iris dataset, with points colored by species using the `d3.schemeSet1` color array. Each cell pairs a variable on the x-axis with another on the y-axis, using `d3.scaleLinear` and `d3.extent` for scaling and axes via `d3.axisLeft` and `d3.axisBottom`. The code fetches CSV data with `d3.csv`, manipulates the DOM with `d3.select`, and renders SVG circles with a radius of four pixels. Titles appear only on diagonal cells, where a variable is compared with itself.

Aadventuresenglish.info@gmail.com
90% match
Loading thumbnail…

D3 Scatter Plot Matrix multiple colors

A 4x4 scatter plot matrix compares all numeric fields of the classic iris dataset, with each cell plotting one field against another. D3 v6 renders 16 SVG charts, using `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeSet1` to color points by iris species, and `d3.axisLeft`/`d3.axisBottom` for ticks. Titles appear only on diagonal cells.

TToly
90% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This scatter plot matrix compares all numeric fields of the classic Iris dataset, with colors distinguishing the three iris species. The visualization displays a 4×4 grid of scatter plots, each pairing two measurements, enabling multivariate comparison. Implemented as a vanilla JavaScript fork using D3 v6, the code leverages `d3.csv` to load the data, `scaleLinear` for axes, `scaleOrdinal` with `schemeSet1` for colors, and `axisLeft`/`axisBottom` for chart decorations. The SVG rendering divides the window into four quadrants, with each plot’s radius and opacity fixed for clarity.

SSammi Lin
90% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4x4 scatter plot matrix comparing all numeric attributes of the classic Iris dataset, with points colored by species using a categorical color scale. It employs D3 v6 (loaded from a CDN) with API methods such as `scaleLinear`, `scaleOrdinal`, `extent`, `axisBottom`, `axisLeft`, and the selection-join pattern to render SVG charts that fill the browser window. Each subplot shows an X-Y combination of sepal and petal measurements, and diagonal panels display the variable name as a title.

MMartin Masevski
90% match