Skip to main content
SimilarExport ZIP
100%

Correlation Matrix

✓ Published0🌍 Public
LLSAWB
Last edited Dec 3, 2023
Created on Oct 4, 2023
Forked from HTML Starter

This visualization presents a correlation matrix for the Abalone dataset, split into three separate SVG grids for male, female, and infant samples. Each cell color encodes the correlation coefficient between two variables, using a red-to-white-to-steelblue Chroma.js scale. Hovering over a cell highlights the corresponding row and column axis labels and displays the exact correlation value in a tooltip. The implementation uses D3 v4 scales and axes, the `jz.arr.correlationMatrix` function from the jeezy library for computation, and `data2grid` for grid layout.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Correlation Matrix

The correlation matrix visualizes relationships among eight physical measurements of abalone, split into three separate panels for male, female, and infant groups. Each panel uses color-coded text for correlation coefficients above the diagonal and proportional circles below it, with black labels on the diagonal. The code loads data from `abalone.csv`, computes correlations with the `jz.arr.correlationMatrix` utility, and renders SVG elements using `d3.scaleLinear`, `d3.scalePoint`, and `d3.scaleSqrt`. Distinct color ranges per sex highlight varying correlation strengths across the groups.

方方顗棠
90% match
Loading thumbnail…

Correlation_Matrix

This visualization displays a correlation matrix for the Abalone dataset, showing pairwise Pearson correlation coefficients between physical measurements and age. Across the main diagonal, variable names are labeled, while off-diagonal cells use either colored text or circles with varying radius and color intensity to represent correlation strength and direction. The matrix is filtered by selecting a categorical variable (Male, Female, or Infant) from a dropdown menu, which recomputes correlations for that subset. Built with D3 v7 in React, the code uses `d3.scaleLinear` for color encoding, `d3.scalePoint` for axes, and `d3.scaleSqrt` for circle sizing, rendering to SVG.

ZZeroKurosakii
89% match
Loading thumbnail…

HW3-Abalone Correlation Matrix

This visualization shows the correlation matrix for the Abalone dataset, split into three separate views by gender (Male, Female, Infant) via a dropdown selector. It displays the pairwise Pearson correlations between eight physical measurements (length, diameter, height, weight variables, and rings). Each cell is colored using a chroma color scale from red through white to steelblue, with values ranging from -1 to the maximum correlation. The tooltip on hover reveals the exact correlation value. Built with D3.js, the code utilizes `jz.arr.correlationMatrix` for calculations and `data2grid.grid` for layout.

Yyuting89830@gmail.com
89% match
Loading thumbnail…

hw3

This visualization displays a correlation matrix for the Abalone dataset, split into three separate heatmaps for the male, female, and infant abalone subsets. Each cell shows the correlation coefficient between two attributes, color-coded from red (negative) to blue (positive), with the numeric value overlaid. Hovering over a cell highlights it and displays the specific attribute pair in the text area below. The code uses D3 v5 with SVG rendering, leveraging `d3.scaleLinear` for color mapping and the `jz.arr.correlationMatrix` function from the jeezy library to compute correlations. The data is loaded from the `abalone.data` file.

Nnanegole
88% match
Loading thumbnail…

Correlation matrix

This visualization shows a correlation matrix for the Abalone dataset, displaying the relationships between eight physical measurements and age rings. The matrix uses colored rectangles, with a tomato-to-steelblue color scale via chroma-js, to represent correlation values between variable pairs. Built with React and D3 v4, the code uses `jz.arr.correlationMatrix` to compute correlations and `data2grid.grid` to structure the data. Hovering over a rectangle highlights the corresponding row and column labels while displaying the exact correlation coefficient in a tooltip.

Sstanley.shen2003@gmail.com
88% match
Loading thumbnail…

Fork of Correlation Matrix

This visualization shows a correlation matrix of abalone physical measurements, with cells colored by Pearson correlation coefficients. A dropdown menu filters the matrix to display correlations for male, female, or infant abalones from the `abalone.data` dataset. The matrix uses `d3.scaleBand` for axes, `d3.scaleSequential` with `interpolateRdYlBu` for color encoding, and displays correlation values as text labels. Animations transition cells between states using `transition.attr`, with axes rendered via `d3.axisLeft` and `d3.axisBottom`.

Hhi4u2qzy@gmail.com
88% match
Loading thumbnail…

Abalone Correlation Matrices

This example shows three correlation matrices for male, female, and infant abalones, using a diverging red-blue color scale to represent the strength and direction of correlations between eight physical attributes. The matrices display numerical correlation values in each cell, with negative correlations in red and positive in blue. The code loads abalone data from a CSV file, filters it by sex, and calculates correlations using the simple-statistics library’s `sampleCorrelation` function. Each matrix is rendered as an SVG using D3 v7, with `d3.scaleSequential` and `d3.interpolateRdBu` defining the color mapping, and axis labels positioned around the grid.

JJames Huang
88% match
Loading thumbnail…

Data Visualization Homework 3: Correlation Matrix

This visualization shows a 3x3 grid of correlation matrices for male, female, and infant abalone, using data from the abalone.data file. Each matrix displays the pairwise correlations between eight physical attributes (Length, Diameter, Height, various weights, and Rings) as colored squares with numerical labels. The code uses D3 v5 to render SVG elements, with scales from `scaleBand` and `scaleLinear` for positioning and color encoding. Correlation calculations are performed using the `jz.arr.correlationMatrix` utility from the jeezy library, while the `data2grid` library reshapes the data for grid-based rendering.

Dderrick373519@gmail.com
87% match