Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSammi Lin
Last edited Oct 16, 2023
Created on Oct 16, 2023

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.

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

Fork of D3 Scatter Plot Matrix multiple colors

This fork of a D3 scatter plot matrix compares all numeric fields of the classic Iris dataset, using color to distinguish the three iris species. A 4×4 grid of small SVG plots shows every pairwise combination of sepal and petal measurements, with diagonal cells displaying the feature name. The code uses the d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom APIs to load data, map values to positions and colors, and render axes. Data is loaded from a remote Gist, and each circle is drawn with a fill color from the d3.schemeSet1 palette at 0.7 opacity.

FFarhaan Qazi
90% match