Skip to main content
SimilarExport ZIP
100%

Adjacency Matrix Using D3

✓ Published3🌍 Public
OOlha
Last edited May 24, 2022
Created on Apr 18, 2022

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.

AI-generated description

Assignment 7 part B

Adjacency Matrix Using D3

Inspired by:

I've looked through several examples and these approaches are nice: https://bl.ocks.org/zwang155/cfb7a70b6d08c1089b123235b874da37 https://bl.ocks.org/micahstubbs/7f360cc66abfa28b400b96bc75b8984e

Used lib: https://d3-legend.susielu.com/ used documentation: https://github.com/d3/d3/blob/main/API.md

Data: I've tried to do the matrix with the same dataset, but it is too heahy and hangs my browser, so I've switched to this lite version, but there is code, that if uncommented, would show the original datase I've worked with. https://networkrepository.com dataset was used: < https://networkrepository.com/soc-firm-hi-tech.php>

@inproceedings{

  • nr,
  • title = {The Network Data Repository with Interactive Graph Analytics and Visualization},
  • author={Ryan A. Rossi and Nesreen K. Ahmed},
  • booktitle = {AAAI},
  • url={https://networkrepository.com},
  • year={2015} }
MIT Licensed

Similar vizzes

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
91% 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
91% 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
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
87% 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
85% 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
84% 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…

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