A8 Adjacency Matrix

100%

A8 Adjacency Matrix

✓ Published0🌍 Public

Last edited Mar 26, 2024

Created on Mar 26, 2024

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.

AI-generated description

Data from https://networkrepository.com/soc-firm-hi-tech.php You can hover to see the value of the node, although it might take a bit of time

Its not the best :( but I tried Referenced Chapter 13 of Scott Murray's book: Interactive Data Visualization for the Web

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

A8 Adjacency Matrix Representation

This visualization presents a square adjacency matrix representing connections within the SOC Hi-Tech network. Each row and column corresponds to a firm or technology node, and a blue-filled cell indicates a directed link from the source node to the target node. Hovering over a filled square triggers a tooltip displaying the specific source and target pair. The implementation uses D3.js v7 to load the CSV data and dynamically generate SVG `<rect>` elements for each matrix cell, with axes labeled by node IDs. The layout scales the cell size based on available window dimensions, and the color encoding uses a simple binary blue/white scheme to show edge presence.

NNoah C.

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

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

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

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

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

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