D3 Scatter Plot Matrix multiple colors

100%

D3 Scatter Plot Matrix multiple colors

✓ Published9🌍 Public

Last edited Dec 30, 2022

Created on Dec 30, 2022

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

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.

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 multiple colors

This example presents a 4×4 scatter plot matrix comparing all numeric fields of the Iris dataset (sepal length/width, petal length/width). Each cell uses colored circles, scaled by d3.scaleLinear and colored by d3.scaleOrdinal with the schemeSet1 palette, to distinguish the three iris species. Data is loaded via d3.csv from a remote gist. Titles appear only on diagonal plots, and axes are rendered with d3.axisLeft and d3.axisBottom, while the SVG matrix is dynamically generated by nested loops.

TTiado Kollender

92% 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 scatter plot matrix compares all numeric fields in the iris dataset, with each cell showing a bivariate relationship and points colored by species using d3.scaleOrdinal and a custom color array. The four-by-four grid is built with D3 v6, rendering each plot as an SVG with axes from d3.axisLeft and d3.axisBottom, and labels placed on the diagonal. Data is loaded from a CSV via d3.csv, while d3.extent sets the scales.

Xxychen0612.cs09@nycu.edu.tw

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

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

89% match

Loading thumbnail…

Fork of D3 Scatter Plot Matrix multiple colors

This example displays a 4x4 scatter plot matrix comparing all numeric fields of the iris dataset, with each point colored by species using the `schemeSet1` palette. Built as a React application using D3 v6, it renders SVG circles with `scaleLinear` and `scaleOrdinal` scales, and draws axes via `axisLeft` and `axisBottom` for every pairwise combination. The data is loaded as CSV and parsed dynamically, with chart titles appearing only on the diagonal cells.

Iiamsravan

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

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

87% match