Skip to main content
SimilarExport ZIP
100%

HW3_311553050

✓ Published0🌍 Public
YYunLing
Last edited Oct 6, 2023
Created on Sep 23, 2023
Forked from Example

This example shows a correlation matrix for abalone measurements, with eight variables (v1–v8) displayed as a triangular grid of colored cells. A dropdown menu lets the viewer switch between male, female, and infant subsets of the data. Each cell is filled using a red-white-steelblue chroma.scale diverging palette centered on the average correlation, with the correlation value printed inside. The visualization uses d3.scaleBand for axes, d3.axisTop and d3.axisLeft for labels, and transitions to fade in the SVG rectangles, with a gradient legend rendered below.

AI-generated description
MIT Licensed

Similar vizzes

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

hw3

This visualization shows a correlation matrix for abalone measurements, split by sex (male, female, or infant) via clickable buttons. The upper triangle displays correlation coefficients as colored text, while the lower triangle uses scaled circles, with diagonal labels identifying each variable. The code uses d3.csvParse, d3.scalePoint, d3.scaleSqrt, and d3.scaleLinear, along with the jeezy library’s jz.arr.correlationMatrix to compute correlations. Data is loaded asynchronously via d3.text from a remote CSV, and the SVG is rendered in React with Bootstrap-styled controls.

Kkenny-wq
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…

Fork of Fork of Fork of Hello VizHub

This interactive scatterplot matrix visualizes correlations among eight physical measurements of abalone from the UCI dataset, with a color scale from white to steelblue indicating correlation strength and direction. A dropdown menu lets users filter the data by sex (Male, Female, Infant). The visualization uses D3 v5 with `scaleBand` and `scaleLinear` for axes, `arr.correlationMatrix` from the jeezy library to compute correlations, and SVG rendering to draw the grid of colored cells with correlation values and a color legend bar.

Ddaniel
85% 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
85% match