Adjacency matrix in D3

100%

Adjacency matrix in D3

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 21, 2024

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.

AI-generated description

Node-link diagram with force-directed layout of FIRM-HI-TECH Dataset.

Reference to Interactive Data Visualization for the Web

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Adjacency Matrix

This example visualizes a network of high-tech firms as an adjacency matrix, where each row and column represents a node and colored cells indicate directed connections between them. Built with D3 v6, the code loads CSV data, constructs the matrix, and renders it as SVG rectangles with hover tooltips. Node labels appear on the top and left axes, using the classic matrix layout for compact network representation.

AAllen Ho

88% match

Loading thumbnail…

Fork of Adjacency Matrix Using D3

This example presents a static adjacency matrix of a small, 20-node social network derived from the Network Repository’s high-tech firm dataset. The visualization uses a grid of colored rectangles, where cell color encodes edge weight (light gray for zero, yellow for low, orange for medium, and red for high values). The visualization is built using d3.scaleBand for axis positioning, d3.select for SVG rendering, and d3.csv to load the edge data. The code includes an interactive tooltip that appears on mouseover, showing the source, target, and value of each edge. The rendering uses an SVG canvas with row and column labels, and the tooltip is implemented using D3 transitions for opacity changes.

HHaili0109

85% match

Loading thumbnail…

A8-Adjacency Matrix

This adjacency matrix visualizes network connectivity within a high-tech firm dataset, displaying nodes along both axes with turquoise cells marking edges. The D3.js v7 implementation loads CSV data, builds a binary matrix, and renders it as SVG rectangles. Interactive features highlight rows and columns in orange upon mouseover, while tooltips reveal the specific source-target relationship. Node labels appear alphabetically along the top and left edges using SVG text elements.

Bbhavi.kenia@gmail.com

85% match

Loading thumbnail…

[A8] High Tech Firm Matrix (Adjacency Matrix)

This visualization displays an adjacency matrix of high-tech firm connections, using a CSV dataset with source and target nodes. The square grid uses steelblue cells to indicate existing links and white cells for absence, with hover tooltips revealing specific node pairs. The code builds the matrix from flat data, assigns each row and column to a firm, and labels both axes. It renders with D3 v7 SVG elements, using `data.flatMap` and `Array.from` to extract unique nodes and constructing the binary matrix before drawing cells at a fixed 35-pixel size.

Cctan13@dons.usfca.edu

84% match

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

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

82% match

Loading thumbnail…

D3 Adjacency Matrix

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.

Mmariahdiaz

80% match