A8 - Adjacency Matrix

Rragregory@dons.usfca.edu

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.

A8 - Node Link Diagram

This example renders a static HTML page with a large, centered message reading “Hello HTML!” using plain HTML and CSS. It does not include any data visualization, JavaScript libraries, or interactive elements. The page consists solely of a styled `<div>` element with a font size set to 13em, demonstrating a minimal HTML starter template rather than a node-link diagram. No external APIs, rendering techniques, or data sources are present in the provided code.

A8 - Node Link Diagram

A8 - Node Link Diagram

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

75% match

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.

74% match

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

74% match