Fork of Fork of Fork of Hello VizHub

100%

Fork of Fork of Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Jan 4, 2024

Created on Jan 4, 2024

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

A scatterplot matrix displays correlations between physical measurements of abalone, with cells colored from pink to steel blue based on positive or negative correlation strength. Users select a sex category (Male, Female, Infant) from a dropdown menu to update the matrix for that subset. The visualization uses d3.scaleLinear for color mapping, d3.scaleBand for axes, and renders as SVG with correlation values labeled in each cell. A color legend bar on the right uses d3.axisRight. The data comes from the `abalone.data` file.

Ddaniel

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

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_311553050

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.

YYunLing

85% match

Loading thumbnail…

hw3_submit

This visualization displays a correlation matrix for the abalone dataset, using color and text to show correlations between numerical attributes like Length, Diameter, and various weight measurements. A color legend with a diverging scale from pink to steel blue accompanies the matrix. The visualization uses D3 v5 and the jeezy library's `arr.correlationMatrix` API to compute correlations, rendering the matrix with SVG elements and adding a dropdown menu to filter data by sex.

Ddaniel

84% 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.

方方顗棠

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

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

83% match