Adjacency Matrix

Description

An adjacency matrix represents a network by placing all nodes along both the rows and columns of a grid. Each cell at position (i, j) indicates whether node i is connected to node j, using a filled cell for binary networks or a colored cell for weighted networks. The result is a square matrix that encodes the complete connectivity structure of the network without any link crossings or overlap — problems that plague node-link diagrams at scale.

The adjacency matrix is the mathematical foundation of graph theory, and its visual representation preserves this rigor. Every possible connection has a dedicated cell, making it impossible for edges to hide behind each other or for clusters to occlude one another. This property makes adjacency matrices superior to force-directed layouts for dense networks: a network with 200 nodes and 10,000 edges is a hopeless hairball in a node-link diagram but a perfectly readable (if large) grid in an adjacency matrix.

The ordering of rows and columns critically affects readability. Random ordering produces visual noise, while clustering-based reordering (seriation) groups related nodes together, revealing community structure as dense blocks along the diagonal. Interactive reordering, combined with hover highlighting of rows, columns, and neighborhoods, transforms the adjacency matrix from a static artifact into a powerful exploratory tool.

When to Use

• Visualizing dense networks where node-link diagrams produce unreadable hairballs
• Comparing connectivity patterns across communities or clusters after seriation
• Showing symmetric or asymmetric relationships (the matrix reveals directionality naturally)
• When you need a scalable representation for networks with hundreds of nodes
• Identifying structural patterns: cliques appear as dense blocks, bipartite structure as off-diagonal rectangles

When NOT to Use

• For sparse networks — a network diagram (node-link) shows the structure more intuitively when there are few edges
• When following paths through the network matters — tracing multi-hop paths in a matrix is cognitively difficult
• When audiences expect a spatial network layout — adjacency matrices have a steeper learning curve
• For very large networks (>1,000 nodes) without interaction — the grid becomes too large to render or scan effectively

Anatomy

• Grid cells: Square cells at each (row, column) intersection; filled or colored if a connection exists, empty otherwise.
• Row and column labels: Node names along both axes, in the same order.
• Color scale: For weighted networks, a sequential color scale encodes connection strength. For binary networks, a single fill color suffices.
• Diagonal: Self-connections (loops), often highlighted or styled differently.
• Row/column ordering: The arrangement of nodes, ideally computed by a seriation or clustering algorithm to reveal structure.
• Highlight on hover: Showing the full row and column for a hovered cell helps identify the two connected nodes.

Variations

• Binary adjacency matrix: Cells are simply filled or empty, representing the presence or absence of a connection.
• Weighted adjacency matrix: Cell color intensity encodes the strength, frequency, or weight of each connection.
• Reordered (seriated) matrix: Rows and columns are reordered by a clustering algorithm to group related nodes, revealing block-diagonal community structure.
• Triangular matrix: For undirected networks, only the lower or upper triangle is shown, eliminating symmetric redundancy.
• Bi-adjacency matrix: A rectangular (non-square) matrix for bipartite networks, with one node set on rows and the other on columns.
• Interactive adjacency matrix: Supports hover highlighting, reordering controls, and click-to-zoom into sub-matrices.

Code Reference

// Observable Plot - adjacency matrix
Plot.plot({
  marks: [
    Plot.cell(edges, {
      x: "target",
      y: "source",
      fill: "weight",
      tip: true
    })
  ],
  x: { label: null, tickRotate: -45 },
  y: { label: null },
  color: {
    scheme: "Blues",
    legend: true,
    label: "Connection strength"
  },
  aspectRatio: 1
})