Skip to main content
SimilarExport ZIP
100%

Correlation matrix

✓ Published0🌍 Public
Sstanley.shen2003@gmail.com
Last edited Nov 23, 2023
Created on Sep 26, 2023

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.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop
MIT Licensed

Similar vizzes

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

Correlation Matrix

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.

LLSAWB
88% match
Loading thumbnail…

Correlation Matrix

This interactive correlation matrix visualizes relationships among eight physical measurements of male abalone from the abalone.csv dataset. The code uses D3 v4/v5 to render an SVG grid, where each cell’s color—scaled via chroma-js from tomato to steelblue—represents the correlation strength between variable pairs. A hover interaction highlights selected cells and displays a tooltip. The visualization is built with D3’s scaleBand for axes and data2grid to structure the correlation matrix data.

Cchingching17
87% match
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.

方方顗棠
86% match
Loading thumbnail…

Abalone Correlation Matrix

This visualization shows the correlation matrix for physical measurements of abalones, comparing length, diameter, height, various weights, and rings (age). Each cell is colored according to the strength of correlation, revealing strong relationships among size and weight variables and weaker correlations with age. The code uses D3 v4’s scale functions and SVG rendering to draw a grid of colored rectangles. Precomputed correlation values for both female and male abalones are embedded as data arrays, with axis labels placed along the top and left edges for each variable.

黃黃歆善
85% 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
85% 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
85% match
Loading thumbnail…

Abalone Correlation Matrices

Three correlation matrices compare eight physical measurements of abalone—Length, Diameter, Height, various weights, and Rings—separated by sex (male, female, infant). Each matrix cell displays the sample correlation coefficient, colored on a blue-red diverging scale from −1 to 1. The visualization loads a CSV dataset via `d3.csv`, computes correlations with `ss.sampleCorrelation` from simple-statistics, and renders SVG rectangles and text labels using D3 v7.

JJames Huang
84% match