Skip to main content
SimilarExport ZIP
100%

Correlation Matrix

✓ Published0🌍 Public
663anp3ca
Last edited Oct 9, 2018
Created on Oct 9, 2018

This correlation matrix visualizes the relationships between 26 random variables (columns a–z) across 31 data points, using a color scale from tomato to steelblue to represent correlation strength, ignoring perfect self-correlations. Built with D3 v4 and the jeezy and data2grid libraries, the grid renders as an SVG with smooth opacity transitions. Users can hover over any cell to see the exact correlation value in a tooltip, while the corresponding row and column labels highlight in bold green to clarify the pair. The axes display the variable names along both dimensions, and the color scale uses a diverging white midpoint to emphasize positive versus negative correlations.

AI-generated description

Here's some reusable code to compute and draw a correlation matrix from a set of data in JavaScript. Here's how it works:

  • jeezy's correlationMatrix function calculates a correlation matrix for a set of data.
  • data2grid sets up a layout for that correlation matrix.
  • chroma creates a color scale based on the extents of the correlation matrix (in this case it ignores correlations of 1, because the data set is random and so all correlations are quite low other than when both columns are the same).
  • d3 draws the correlation matrix to the DOM.

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/302d078a089caf5aeb13e480b86fdaeb'>Correlation Matrix</a>

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/3553cc0400957131fcb5b99e4db77ade'>Correlation Matrix</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Correlation Matrix

This visualization displays a correlation matrix for 26 randomly generated variables, where each cell’s color indicates the correlation strength between two variables. The data is synthesized with random numbers, and the matrix reveals that most correlations are near zero, with only the diagonal showing perfect correlation. The implementation computes correlations using jeezy's `correlationMatrix` function, arranges the cells with data2grid, and maps colors with a chroma scale from tomato through white to steelblue. D3 v4 renders the SVG grid, while hover interactions highlight corresponding rows, columns, and a tooltip showing the exact correlation value.

663anp3ca
94% match
Loading thumbnail…

Correlation Matrix

This visualization displays a correlation matrix for 26 randomly generated variables (columns a through z), with each cell’s color indicating the correlation strength between variable pairs. The heatmap uses a red-white-blue color scale, and hovering over a cell highlights the corresponding row and column labels while showing the exact correlation value in a tooltip. The example computes the correlation matrix with jeezy's correlationMatrix function, arranges the cells using data2grid, and renders them as SVG rectangles with d3.v4. Chroma.js generates the color scale, and the visualization includes animated opacity transitions and interactive hover effects.

AAlainRo
92% match
Loading thumbnail…

Example

This example visualizes the correlations among 26 random variables (columns 'a' through 'z') in a triangular heatmap matrix. Synthetic data is generated with random numbers, and a correlation matrix is computed using `jz.arr.correlationMatrix` from the jeezy library, then laid out with the data2grid library. D3 v4 renders the grid as SVG rectangles, with colors mapped through a chroma-js scale from tomato to steelblue. Hovering highlights the corresponding axis ticks and displays a tooltip with the exact correlation value, while the color legend uses an SVG linearGradient.

YYunLing
88% 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
78% match
Loading thumbnail…

colour Scale test

This example displays a correlation matrix as a square grid of colored cells, using a diverging red-white-navy color scale to represent values from -1 to 1. The dataset is a correlation matrix of automobile metrics (from the classic `mtcars` data), with each cell showing a correlation coefficient or variable name. The lower triangle uses text values, while the upper triangle renders circles whose radius scales with the absolute correlation. Built with D3 v3 and SVG, it includes a custom color legend axis generated with `d3.svg.axis` and a series of colored rectangles.

DDonald Bagwell
78% match
Loading thumbnail…

109550187_HW3

This visualization displays three correlation matrices for subsets of the Abalone dataset, showing the pairwise relationships between nine physical measurements. Each matrix uses diverging colors from blue through yellow to red to represent correlations from -1 to 1, with numeric values overlaid on each cell. A fourth SVG shows the corresponding color legend. The matrices are rendered as SVG using D3 v5 scales and the `jz.arr.correlationMatrix` API from the jeezy library, with interactive hover effects that display detailed correlation information in text below. The data is loaded asynchronously from a remote CSV file.

Ppatricknicholas27@gmail.com
78% 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
77% 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
75% match