Skip to main content
SimilarExport ZIP
100%

Fork of Blank Slate with Hot Reloading

✓ Published0🌍 Public
Ssunnyshih0312@gmail.com
Last edited Sep 28, 2024
Created on Sep 27, 2024

This interactive correlation matrix visualizes the relationships between 26 random variables (columns a–z) generated in the browser, computing a correlation matrix and rendering it as a grid of colored squares. Built with D3 v4, it uses `d3.scaleBand` for axes, `chroma.scale` for the diverging color scale from tomato to steelblue, and `d3.axisTop`/`d3.axisLeft` for labels. Hovering a cell highlights the corresponding row and column labels and displays a tooltip with the correlation value. The data is synthetic, created with `jz.num.randBetween` and processed via `data2grid`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Correlation Matrix

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.

663anp3ca
85% match
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
83% 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
81% 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
79% match
Loading thumbnail…

Fork of Correlation-matrix Abalone 1 no tooltip

Three side-by-side correlation matrices show how eight physical measurements of abalone—length, diameter, height, weights, shell weight, and rings—relate for male, female, and infant subgroups. Each matrix displays Pearson correlation coefficients for every pair of variables, encoded as rainbow-colored cells from -1 to 1. The visualization uses the `data2grid` library to arrange the cells and `d3.scaleSequential` with `d3.interpolateRainbow` for coloring, while `d3.scaleBand` positions the axes. The code filters the `data.csv` source by sex and renders separate SVG matrices for each category, with axis labels rotated for readability.

SSharon Lin
75% 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
75% match
Loading thumbnail…

Fork of Correlation Matrix

Three side-by-side correlation matrices visualize relationships among physical measurements of abalone from the `abalone.csv` dataset. Each matrix combines numeric correlations in its lower-left triangle with scaled circles in the upper-right, using a diverging color scale from `chroma.scale` (or a D3 linear scale) to encode strength and direction. The code builds the matrices with `d3.scalePoint` for axes, `d3.axisTop` and `d3.axisLeft` for labels, and `d3.csv` to load data. Hover interactions highlight cells and show exact correlation values via a tooltip.

Pplchao
74% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This scatter plot of the Iris dataset uses D3 v7 to visualize four measurements, with dropdown menus to select which features appear on the x- and y-axes. It leverages D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, drawing circles colored by species via `scaleOrdinal` and `schemeCategory10`, plus a legend. The HTML layout holds the SVG and menus, while the JavaScript updates the chart on selection changes.

JJimmy
74% match