D3 Adjacency Matrix

100%

D3 Adjacency Matrix

✓ Published0🌍 Public

Last edited Oct 27, 2022

Created on Oct 25, 2022

An adjacency matrix displays 16 nodes from the soc-tribes dataset as a symmetric grid, where hot pink cells indicate connections and white cells represent absent links. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand` for axis positioning and `d3.csv` for data loading. Interactive tooltips highlight rows and columns on mouseover, while the matrix symmetrizes directed links by mapping both directions into a shared `Map` structure.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A8 Adjacency Matrix in D3

This example shows a square adjacency matrix for the soc-hitech network, with pink cells marking directed connections (source to target) and white cells indicating no edge. Hovering over a pink cell turns it orange and reveals the node pair via a tooltip. The visualization is built with D3 v7, using vanilla JavaScript to parse the CSV file and construct the matrix, then rendering it as SVG rectangles. Row and column labels display the numeric node IDs, while a fixed cell size and margins make the full-screen layout readable.

EEric Yao

84% match

Loading thumbnail…

d3 adjacency matrix (soc dataset)

This adjacency matrix visualization displays the Zachary Karate Club network, showing friendships among 34 club members. Each cell indicates whether a connection exists between a pair of nodes, with turquoise representing linked pairs and black representing unlinked ones. Built with d3.v7, the code loads CSV data and uses `d3.scaleBand` to map nodes to both axes, rendering labeled rectangles as SVG elements. Interactive hovering reveals source-target details and link status, while highlighting the corresponding row and column with animated stroke changes. The tooltip appears on mouseover with a transition effect.

AAndrew

81% match

Loading thumbnail…

adjacency matrix

This adjacency matrix visualization uses a grid of colored cells to show connections between individuals in a social network, with darker orange cells indicating stronger relationships. The code loads node and edge data from CSV files, then constructs a matrix where each row and column represents a person, and cell opacity reflects edge weights. Built with D3.js v4, it renders SVG rectangles for the matrix cells, labels axes with node names, and highlights rows and columns on mouseover. The example uses D3’s selection, data binding, and event handling APIs to create an interactive overview of pairwise relationships.

663anp3ca

81% match

Loading thumbnail…

Adjacency matrix in D3

This example uses D3 v7 to render an adjacency matrix for the FIRM-HI-TECH dataset from networkrepository.com. It shows the relationships between firms as a grid of lightblue cells, where each row and column represents a node. The code loads CSV data with `d3.csv`, builds a matrix using a JavaScript `Map` and `Set`, and applies `d3.scaleBand` for the axes. Hovering highlights the row and column via stroke-width changes and displays a tooltip with the matrix cell’s link. The SVG is drawn with appended `rect` elements, and the interface includes numbered axis labels.

EEunice Tu

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

80% match

Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

PPranay Matalia

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