Skip to main content
100%

D3 in Action Adjacency Matrix

✓ Published0🌍 Public
Aalex-rind
Last edited Feb 28, 2020
Created on Feb 28, 2020

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.

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>

forked from <a href='http://bl.ocks.org/alex-rind/'>alex-rind</a>'s block: <a href='http://bl.ocks.org/alex-rind/7c15500ecb86090eb96f0da112184d23'>Adjacency Matrix from Array Literals</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 in Action Adjacency Matrix

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.

Aalex-rind
90% 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
86% 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…

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

D3 in Action Adjacency Matrix

This example visualizes asylum-seeker flows between countries as a directed adjacency matrix, with source countries on the y-axis and destinations on the x-axis. The grid encodes the weight of each flow through the opacity of red squares, and hovering over a cell highlights the corresponding row and column. It loads node and edge data from CSV files using the queue library, then builds the matrix with d3.csv and renders it as SVG rectangles. Axis labels are added with d3.svg.axis, while d3.scale.ordinal positions the country names along both dimensions.

Aalex-rind
82% 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
82% 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
82% match
Loading thumbnail…

Adjacency Matrix Using D3

This adjacency matrix visualizes connections between nodes in a hi-tech firm network using a grid where colored cells indicate edges. The D3.js v7 code renders the matrix as SVG rectangles, with row and column labels for node IDs, and highlights entire rows and columns on hover with a tooltip showing link details. It uses d3.scaleBand for positioning, d3.csv for data loading, and the d3-legend library for potential legend support, with data sourced from networkrepository.com.

OOlha
81% match