Skip to main content
SimilarExport ZIP
100%

d3 adjacency matrix (stanford dataset)

✓ Published0🌍 Public
AAndrew
Last edited Mar 26, 2024
Created on Mar 26, 2024

This adjacency matrix visualizes a filtered Twitter interaction network among members of the 117th US Congress, using data from the Stanford SNAP dataset. Cells show whether pairs of nodes (IDs under 50) are linked, with teal indicating connections and black for non-links. Built with D3 v7, the SVG rendering uses `d3.scaleBand` for axes and `d3.csv` for data loading. Hover interactions trigger tooltips and highlight the corresponding row and column via stroke styling changes.

AI-generated description

An adjacency matrix in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://snap.stanford.edu/data/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 node-link diagram (stanford dataset)

This interactive node-link diagram visualizes the Twitter interaction network of the 117th United States Congress, using data from the Stanford SNAP repository that records retweets, replies, and mentions among members. The visualization displays nodes as circles representing congress members and edges as cyan lines representing interactions. Built with D3 v7, the layout uses physics-based simulation via `d3.forceSimulation`, including `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Hovering over a node triggers a tooltip showing the node ID and its neighbors, while `d3.drag()` allows users to reposition nodes interactively with SVG rendering and CSS transitions.

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

Fork of Adjacency Matrix Using D3

This example presents a static adjacency matrix of a small, 20-node social network derived from the Network Repository’s high-tech firm dataset. The visualization uses a grid of colored rectangles, where cell color encodes edge weight (light gray for zero, yellow for low, orange for medium, and red for high values). The visualization is built using d3.scaleBand for axis positioning, d3.select for SVG rendering, and d3.csv to load the edge data. The code includes an interactive tooltip that appears on mouseover, showing the source, target, and value of each edge. The rendering uses an SVG canvas with row and column labels, and the tooltip is implemented using D3 transitions for opacity changes.

HHaili0109
76% match
Loading thumbnail…

D3 Adjacency Matrix

An adjacency matrix displays 16 nodes from the soc-tribes dataset as a symmetric grid, where hot pink cells indicate connections and white cells represent absent links. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand` for axis positioning and `d3.csv` for data loading. Interactive tooltips highlight rows and columns on mouseover, while the matrix symmetrizes directed links by mapping both directions into a shared `Map` structure.

Mmariahdiaz
75% match
Loading thumbnail…

Fork of d3 adjacency matrix (soc dataset)

An interactive adjacency matrix built with D3 v6 visualizes character relationships from the Game of Thrones dataset. The SVG rendering displays ten cells in a 5x5 grid, where filled teal squares indicate interactions between pairs of characters. D3 selections bind data to rows and columns using `selectAll` and `enter()`, while `append('rect')` and `append('text')` generate the matrix cells and labels. The title, row, and column annotations use CSS for styling. The simplified network dataset from networkrepository.com appears as an undirected graph, with matrix rows and columns symmetrically mirrored to reflect bidirectional relationships.

AAurélien
75% 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
75% match
Loading thumbnail…

Adjacency Matrix

This adjacency matrix visualization displays network connectivity among 410 nodes, with rows and columns representing individual nodes and gray cells marking their connections. The matrix uses a dataset of edges from an infect-Dublin network file. Built with D3.js v4, it renders SVG rectangles for matrix cells and axis labels, with node colors indicating group membership. Users can brush along the top axis to select a subset of nodes, triggering smooth transitions that re-scale the matrix and axes to focus on the selected region.

Kketchuparegood
74% match
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
74% match