A5 Scatterplot Matrix D3

100%

A5 Scatterplot Matrix D3

✓ Published1🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This interactive D3.js scatterplot matrix visualizes relationships among three SAT score variables—TotalMath, TotalVerbal, and MathematicsAverageGPA—using U.S. state-level data from satscores.csv. Each cell shows a paired comparison of two variables, with points representing individual states. A hover effect changes point color to orange for enhanced readability. Built with d3.v7, the example uses d3.csv for data loading, d3.scaleLinear for axes, d3.cross to generate the grid of cell pairs, and d3.axisBottom/axisLeft with tick lines to render gridlines. The SVG rendering employs a coordinated [i,j] indexing system for placing points as circles.

AI-generated description

Took inspiration from my old scatterplot from A4.

Adapted a lot of code from here: https://observablehq.com/@d3/brushable-scatterplot-matrix Specifically used the coordinate system with [i,j] to plot the points and create the cells since I did not know how to do it with just the column's data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A5 Scatterplot Matrix D3

This scatterplot matrix visualizes relationships among three SAT score variables—TotalMath, TotalVerbal, and MathematicsAverageGPA—across U.S. states in 2015. It displays pairwise scatterplots in a grid, with each cell showing the correlation between two variables as steelblue points. The visualization uses D3.js v7 to parse the CSV data and render SVG elements. It applies `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.cross` to generate the matrix layout. Points highlight orange on hover via CSS styling.

BBrayo

95% match

Loading thumbnail…

A6 Scatterplot D3

This scatterplot visualizes the relationship between average math and verbal SAT scores across US states in 2015, with each state represented as a circle. The color of each point encodes the state’s average math GPA using a d3.scaleThreshold with discrete color ranges, and a d3.legendColor legend clarifies the mapping. The chart is built with D3 v7, rendering SVG elements with d3.axisBottom and d3.axisLeft for the axes. Hovering reveals a tooltip with state details, while the data comes from the satscores.csv file.

EEric Yao

88% match

Loading thumbnail…

A4 Scatterplot D3

This scatterplot displays student math and verbal SAT score averages across all US states in 2015, with each circle representing a state and positioned by its paired test scores. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates within an SVG canvas and draws circles via `d3.selectAll().join()`. The chart includes labeled axes, a title, and hover interactions that change point colors. Data is loaded asynchronously from a CSV file using `d3.csv`.

EEric Yao

87% match

Loading thumbnail…

A5 Bubblechart D3

This visualization displays the relationship between math and verbal SAT scores across U.S. states in 2015, with each circle representing a state positioned by its two average scores. Circle size encodes the number of test takers, while red and blue fill colors indicate whether the state’s average math GPA falls below or above 3.5. Hovering highlights points in orange. The chart is built with D3 v7 using `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` for color, and SVG elements for rendering, with data loaded from a CSV file.

EEric Yao

84% match

Loading thumbnail…

D3 Scatterplot Matrix

A D3.js scatterplot matrix compares SAT scores in math, reading, and writing, along with enrollment, across Manhattan, Bronx, and Brooklyn schools. Each row and column corresponds to one of the four variables, producing twelve scatterplots that reveal correlations and borough-specific clusters, with points colored by borough via a d3.scaleOrdinal. Built with d3.csv, scaleLinear, axisBottom/axisLeft, and an SVG rendering, the matrix is generated by nested loops over the variable pairs. A title and legend clarify the plot.

Mmariahdiaz

80% match

Loading thumbnail…

A4 Boxplot D3

This visualization displays the distribution of average Math SAT scores across all US states in 2015, with a single boxplot summarizing the range from the first to third quartile. The code uses D3 v7 to create an SVG chart, scales the x-axis with `d3.scaleLinear`, and computes quartiles using `d3.quantile` on sorted CSV data loaded via `d3.csv`. The chart includes labeled axes and a title, with dimensions set relative to the browser window.

EEric Yao

79% match

Loading thumbnail…

A4 Histogram D3

This histogram shows the distribution of average math SAT scores across US states from 2005 to 2015, with the x-axis spanning score values from 380 to 620 and the y-axis counting the number of state averages per bin. Data is loaded from a CSV file via `d3.csv`, then processed with `d3.histogram()` to create ten bins based on `x.ticks(10)`. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft` for axes, and rectangular bars that highlight orange on hover via CSS. The chart is built with D3 v7.

EEric Yao

79% match

Loading thumbnail…

A4 Boxplot D3

This chart displays the distribution of average Math SAT scores across all US states in 2015, using a single horizontal boxplot. It shows the minimum, first quartile, median, third quartile, and maximum values along a linear scale. The visualization is built with D3 v7, using SVG elements like `line` and `rect` to construct the plot, with `d3.csv` loading the remote dataset and `d3.quantile` computing the summary statistics. Hovering highlights the box, and a tooltip text is appended via a `title` element.

EEric Yao

79% match