D3 in Action Adjacency Matrix

100%

D3 in Action Adjacency Matrix

✓ Published0🌍 Public

Last edited Dec 14, 2018

Created on Dec 14, 2018

This directed adjacency matrix visualizes a small network of five nodes, using a 5-by-5 grid where rows represent sources and columns represent targets. Cell fill opacity encodes edge weight, with darker red squares indicating stronger connections. On mouseover, the corresponding row and column are highlighted by thickening their borders. The visualization is built with D3 v3, using `d3.svg.axis()` for the ordinal name scales on both axes and a `queue()` pattern to load the CSV data, though the current code falls back to hardcoded arrays for nodes and edges.

AI-generated description

An adjacency matrix is a useful way of visualizing networks using an n-by-n grid that shows connection between nodes as a filled grid square. This adjacency matrix is directed, with the source on the y-axis and target on the x-axis. It loads the data from a node list and edge list and represents edge weight using opacity. It also highlights rows and columns on mouseover.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/9441864'>Adjacency Matrix from Array Literals</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 in Action Adjacency Matrix

This example displays a directed adjacency matrix, where rows represent source nodes and columns represent target nodes. It loads node and edge data from arrays and renders an SVG grid of red squares, with edge weight encoded through fill opacity. The D3 v3 code uses `d3.scale.ordinal` for axis positioning and `d3.svg.axis` for labels, while mouseover highlights rows and columns by increasing the stroke width of matching cells.

Aalex-rind

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

83% match

Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

PPranay Matalia

83% match

Loading thumbnail…

D3 in Action Adjacency Matrix

This example shows an adjacency matrix visualizing co-occurrence weights between 43 topics, with each cell’s opacity encoding the edge weight from a CSV edge list. The code builds a square matrix of all possible source–target pairs, fills in weights from the edge hash, and renders them as SVG rectangles using D3 v3’s `d3.scale.linear` for opacity scaling. It adds row and column axes with `d3.svg.axis`, and a mouseover handler highlights entire rows and columns. The data comes from `edgelist.csv` and `nodelist.csv`, loaded via `queue().defer(d3.csv)`.

TThanaporn-sk

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

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

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

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

81% match