Skip to main content
SimilarExport ZIP
100%

A8 - Adjacency Matrix in D3

✓ Published1🌍 Public
RRiya Mathur
Last edited Mar 26, 2024
Created on Mar 25, 2024

This adjacency matrix visualizes the Wikipedia Voter Dataset, showing connections between users as black cells on a white grid. Built with D3 v6 using SVG rendering, the code reads CSV data via `d3.csv`, constructs the matrix, and sorts node IDs numerically. Each cell renders as a `rect` with hover interactions that trigger a tooltip and highlight the cell in orange, while row and column labels display node identifiers.

AI-generated description

An adjacency matrix depicting the Wikipedia Voter Dataset.

MIT Licensed

Similar vizzes

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
83% match
Loading thumbnail…

A8 - Node-link diagram with force-directed layout

This visualization shows the Wikipedia voter network as a node-link diagram, where each circle represents a user and connecting lines represent voting relationships. The graph uses a force-directed layout driven by `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for positioning. Nodes are rendered as SVG circles, interactive via `d3.drag`, and hovering displays a user’s ID. Data is loaded from a CSV file using `d3.csv` and rendered entirely with SVG elements.

RRiya Mathur
82% 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
81% 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
77% match
Loading thumbnail…

A8- Adj Matrix

This example renders an adjacency matrix from a bitcoin transaction dataset loaded via `d3.csv`. Each cell represents a connection between two nodes, with transparency indicating the presence of a link and blue fill for edges. The visualization uses D3 v7 with SVG `rect` elements, computing the matrix from unique node pairs. Hovering triggers a `mouseover` event, turning cells red and displaying the edge weight in a temporary HTML tooltip appended to the body.

SShazil Taqi
77% 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
76% match
Loading thumbnail…

A8- Adjacency Matrix

This example visualizes Bitcoin transaction data as an adjacency matrix, where each cell represents the connection weight between two nodes. The SVG rendering uses colored rectangles—darker blue indicates higher transaction weights, while gray represents no connection, with logarithmic scaling applied to the color intensity. The code loads CSV data via `d3.csv`, builds a symmetric matrix for the undirected graph, and renders rows and columns using D3 data joins. Hovering a cell triggers a CSS transition that scales and highlights it, and node labels appear along both axes. The implementation relies on D3 v7 selection methods and SVG transformations, with no external layout algorithms.

SShazil Taqi
76% match
Loading thumbnail…

A8 Adjacency Matrix

This adjacency matrix visualizes connections within the hi-tech network dataset from networkrepository.com, with each cell representing a directed link between source and target nodes. The SVG rendering uses D3 v7 with linear scales for both axes, positioning 36 numbered nodes along the top and left edges. Users can hover over individual cells to reveal the specific node value, though the interaction may be slow with larger datasets. The implementation applies axis generators and CSV parsing via d3.csv, building the matrix from the provided hi-tech.csv edge list.

AAllen Jake Polintan
75% match