Matrix Diagram

100%

Matrix Diagram

✓ Published1🌍 Public

Hhenry1987

Last edited Aug 29, 2019

Created on Aug 7, 2019

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

AI-generated description

Initial version of matrix diagram

MIT Licensed

Similar vizzes

Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Xx112358

81% match

Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Iimsohandsome123

80% match

Loading thumbnail…

Dishes Map

This interactive matrix diagram visualizes relationships between dishes, with colored cells indicating connection strength and hue representing dish group. Users can reorder the matrix by name, count, or group using dropdown controls, triggering animated transitions via `d3.transition()` and `matrixScale.domain()`. The visualization uses D3 v5 with `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for rendering SVG rectangles with opacity mapping link values. Hover interactions highlight row and column labels, while a tooltip displays details.

Hhenry1987

79% match

Loading thumbnail…

Adjacency Matrix Using D3

This adjacency matrix visualizes connections between nodes in a hi-tech firm network using a grid where colored cells indicate edges. The D3.js v7 code renders the matrix as SVG rectangles, with row and column labels for node IDs, and highlights entire rows and columns on hover with a tooltip showing link details. It uses d3.scaleBand for positioning, d3.csv for data loading, and the d3-legend library for potential legend support, with data sourced from networkrepository.com.

OOlha

79% match

Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

Aannie520143

79% match

Loading thumbnail…

Adjacency Matrix

This visualization displays an adjacency matrix of a network with 410 nodes, using colored rectangles along the x- and y-axes to represent node groups. The matrix cells, rendered as gray squares in both upper and lower triangles, indicate connections between nodes. Built with D3 v4, it uses SVG and animated transitions to resize and reposition matrix elements. A brush interaction on the top axis allows users to select a subset of nodes, triggering a smooth re-scaling of the matrix and axis labels to focus on the selected range.

Ppychen01

79% match

Loading thumbnail…

Adjacency Matrix

This adjacency matrix visualization displays network connectivity among 410 nodes, with rows and columns representing individual nodes and gray cells marking their connections. The matrix uses a dataset of edges from an infect-Dublin network file. Built with D3.js v4, it renders SVG rectangles for matrix cells and axis labels, with node colors indicating group membership. Users can brush along the top axis to select a subset of nodes, triggering smooth transitions that re-scale the matrix and axes to focus on the selected region.

Kketchuparegood

79% match

Loading thumbnail…

A8 - Adjacency Matrix

This adjacency matrix visualizes directed relationships between 34 nodes, using D3.js to render SVG rectangles that represent connections from the dataset’s source-target pairs. Green cells mark edges, while black diagonal cells highlight symmetry, and a mouseover interaction highlights the corresponding row and column by thickening strokes and turning the hovered cell yellow. The code loads data from a CSV file, builds the matrix with fixed cell dimensions, and includes legend headers and labels for student IDs. The visualization effectively reveals network structure through a traditional matrix layout.

RRavneet Singh Bhatia

79% match