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

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

94% match

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

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.

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.

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.

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

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

92% match