Skip to main content
SimilarExport ZIP
100%

A8 - adjacency matrix representation

✓ Published1🌍 Public
DDuc Pham
Last edited Mar 31, 2024
Created on Mar 31, 2024

This example visualizes the Zachary Karate Club dataset as an adjacency matrix, displaying node connections as a grid of orange squares. Each row and column represents a node, with filled cells indicating edges between nodes. Hovering over a cell highlights its corresponding row and column, while a tooltip reveals the edge's source-target pair. The code uses D3.js v7 (d3.csv, d3.select) to load the data and render the SVG elements, positioning cells via x and y attributes. A static tooltip appears in the corner, and the visualization includes no interactive filtering or animation.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

CS 360 Assignment 7 - Adjacency Matrix in d3

This example visualizes the Zachary Karate Club dataset as an adjacency matrix, displaying the 34 members and their 78 connections. Each cell represents a potential edge between two nodes, with fill opacity proportional to edge weight. The visualization uses d3.v3’s `d3.svg.axis` for ordinal axes and SVG `rect` elements for matrix cells. Data loading uses `d3.csv` with a `queue()` helper to parse node and edge lists from separate CSV files. Interactive highlighting is implemented through `mouseover` events that emphasize entire rows and columns.

SSean Sanchez
86% 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
85% 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
85% 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
84% match
Loading thumbnail…

A8 - Adjacency Matrix

This adjacency matrix visualizes a network of 100 nodes using a grid where blue cells indicate connections between source and target nodes. Built with D3.js v7, the code loads edge data from a CSV file and uses a Map with Set collections to store connection pairs. Each cell is rendered as an SVG rectangle, with fill color determined by whether a connection exists between the corresponding row and column nodes. Row and column labels are added as rotated text elements, with nodes sorted by ID for consistent layout.

Rronnieferrufino4908@gmail.com
83% 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
83% match
Loading thumbnail…

A8 -D3 Adjacency Matrix

This interactive visualization displays an adjacency matrix, using a blue color scale to represent connections between nodes in a network. The matrix is built from data fetched from a remote GitHub Gist, with rows and columns representing nodes and cells indicating the presence of a connection. Built with D3 v7, the SVG rendering includes interactive hover effects via the `d3.select` API, style transitions, and a custom tooltip to highlight specific values.

Rragregory@dons.usfca.edu
82% 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
82% match