A8 - adjacency matrix

100%

A8 - adjacency matrix

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 25, 2024

Forked from A8 - Node-link diagram with force-directed layout

This example visualizes a Bitcoin transaction network as an adjacency matrix, where rows and columns represent nodes and cell opacity reflects link weight. The SVG rendering uses D3.js v7 to load CSV data, construct a symmetric matrix, and generate individual `<rect>` elements sized proportionally to the matrix dimensions. Hovering over a cell highlights it in red and displays the corresponding weight value as a temporary text label near the cursor, while mouseout restores the blue fill and removes the tooltip.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

95% match

Loading thumbnail…

adjacency matrix - A8

This example displays a Bitcoin transaction network as an adjacency matrix, where cells represent the summed transaction weights between node pairs and darker blue indicates higher values. The visualization updates dynamically as users hover over cells, triggering a tooltip that reveals the exact weight. Built with D3 v7 and SVG, it converts CSV data into an undirected matrix by aggregating edge weights symmetrically. CSS transitions animate cell color and scale on hover, while row and column labels rotate for readability. The entire interaction is immediate and reactive to user input.

SShazil Taqi

95% match

Loading thumbnail…

A8- adj matrix

This example shows an adjacency matrix of Bitcoin transaction data, where each row and column represents a node and colored cells indicate weighted connections between them. The matrix is built by parsing a CSV file with d3.csv, creating a dense array of weights from the node pairs, and rendering it as an SVG grid of blue rectangles with opacity proportional to edge weight. The visualization uses D3 v7 for data binding and DOM manipulation, with a hover tooltip that displays the exact weight value via d3.select and transition. The animation-like interactivity comes from mouseover and mouseout events, while the white cell strokes and black hover outlines make the grid structure easy to read.

SShazil Taqi

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

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

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

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

79% match

Loading thumbnail…

A8- Nodelink w/ force

This interactive visualization displays a Bitcoin transaction network as a node-link diagram with force-directed layout. Nodes represent transaction addresses, and links show transactions with stroke width proportional to transaction weight. The network is rendered as SVG circles and lines, animated through a physics simulation using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces. Node drag interaction and a hover tooltip showing node ID and total weight are implemented. Data is loaded from a remote CSV file.

SShazil Taqi

78% match