Correlations

100%

✓ Published0🌍 Public

Last edited Nov 4, 2025

Created on Nov 4, 2025

This example presents two linked views of the same financial transaction dataset: a Pearson correlation heatmap for numeric fields (e.g., TransactionAmount, AccountBalance) and a categorical association matrix using Cramér’s V for fields like Channel and TransactionType. Interactive filters let the user narrow rows by AccountID, Channel, or TransactionType. The SVG panels are rendered with D3 v7, with margins, axes, and cell labels styled via CSS. Data loads from a remote CSV, and pivoting uses d3.rollups and custom correlation functions.

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

72% 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

71% match

Loading thumbnail…

Correlation Matrices

A matrix of scatter plots visualizes correlations among numeric attributes of abalone shellfish, split by sex. Each cell shows a scatter plot with a background color indicating Pearson correlation, blue for positive and red for negative. Clicking a plot zooms in for detail. The code uses d3.csvParseRows to load abalone.data, d3.scaleLinear for axes, d3.interpolateRdYlBu for heat colors, and SVG rendering.

Jji3ji3ji3195@gmail.com

71% 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

71% match

Loading thumbnail…

correlation matrix

This visualization displays a correlation matrix of clinical indicators related to heart disease, using a diverging color scale to highlight positive and negative relationships. It shows the computed Pearson correlation coefficients between seven numeric variables, with values printed within each cell. Built with React and D3 v7, the code uses `scaleLinear` to map correlations to colors, calculates correlations manually, and renders the matrix as SVG rectangles with interactive hover highlighting.

AAbhi Yammanuru

71% match

Loading thumbnail…

3

This example displays a correlation matrix for the Abalone dataset, showing pairwise Pearson correlation coefficients between eight physical measurements and age (rings). Each cell is a rectangle colored by its correlation value, with a diverging color scale from blue through white to red, emphasizing strong positive and negative relationships. The visualization is rendered as an SVG using D3 v4, with axes labeling variables on both the x- and y-axes. The correlation values are precomputed in the embedded data array rather than calculated on the fly, and the code relies on standard D3 scales and SVG elements to draw the matrix and its axes.

Kkatherine3849@gmail.com

70% match

Loading thumbnail…

Temporal Analysis

This visualization presents a temporal and categorical analysis of financial transactions, filtering by AccountID, Channel, and TransactionType. It shows median amounts by type and channel, transaction counts by hour and day, and a volume heatmap. The D3.js v7 code reads CSV data from a gist, renders SVG charts, and updates them based on user inputs, with an option to highlight anomalies at or above the 95th percentile.

SSreedevi Itta

70% 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

70% match