d3 adjacency matrix (soc dataset)

100%

d3 adjacency matrix (soc dataset)

✓ Published1🌍 Public

Last edited Mar 26, 2024

Created on Mar 26, 2024

Forked from d3 node-link diagram (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.

AI-generated description

An adjacency matrix in D3

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

Link to original dataset: https://networkrepository.com/soc.php

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 node-link diagram (soc dataset)

This example visualizes the Zachary Karate Club network, a social graph of 34 members, using a force-directed node-link diagram. Nodes represent individuals and links represent friendships, with interactive features allowing users to hover over nodes to view IDs and neighbors, or drag nodes to reposition them. The visualization is built with D3 v7, using `d3.forceSimulation` for physics-based layout, `d3.forceLink` and `d3.forceManyBody` for forces, and `d3.drag` for node interaction. Data comes from a CSV file loaded via `d3.csv`, with edges and nodes rendered as SVG lines and circles.

AAndrew

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

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

81% match

Loading thumbnail…

d3 edge bundling (soc dataset)

This example visualizes the Zachary karate club social network using edge bundling, showing friendships among 34 members as curved paths arranged in a radial hierarchy. A slider adjusts edge tension, dynamically changing how tightly the bundled links curve. The visualization uses d3.cluster to compute the hierarchical layout, d3.radialLine with d3.curveBundle to draw the bundled edges, and SVG rendering for the paths and labels. Data comes from a simplified version of the networkrepository.com soc dataset, loaded via d3.json.

AAndrew

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

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

78% match

Loading thumbnail…

d3 adjacency matrix (stanford dataset)

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.

AAndrew

78% match

Loading thumbnail…

CS 360 Assignment 7 - Force Directed Graph in d3

This visualization shows a node-link diagram of the Zachary Karate Club social network, with nodes representing members and edges representing their interactions. A force-directed layout positions the nodes as the simulation runs, with each node colored via a categorical scale and displaying its ID on mouseover. The code uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to drive the layout, rendering SVG circles and lines that update on every tick. Data comes from the SOC-KARATE dataset loaded as CSV, with interaction handling and color assignment based on node IDs.

SSean Sanchez

76% match