Skip to main content
SimilarExport ZIP
100%

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

✓ Published9🌍 Public
AAndrea Mignone
Last edited May 6, 2021
Created on May 6, 2021

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.

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…

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
94% match
Loading thumbnail…

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

A four-by-four scatter plot matrix compares every pair of numeric measurements in the iris dataset, with points colored by species using the `d3.scaleOrdinal` schemeSet1 palette. Each cell renders an SVG with `d3.axisLeft` and `d3.axisBottom` scales, while diagonal panels label their corresponding feature. The code fetches the CSV via `d3.csv`, parses numeric fields, and loops through all combinations to append individual SVGs sized to a quarter of the window. D3 v6 is loaded from a CDN and used as a browser global.

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

D3 Scatter Plot Matrix (Vanilla JS 🙃)

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.

KKamalabot
93% 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
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
92% 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
92% 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
92% 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
91% match