liveBook · Manning

Adjacency matrix

As explained in D3.js in Action, Third Edition

An adjacency matrix is a square grid in which rows and columns represent nodes and cells indicate the presence and optionally the weight of connections between them.

An adjacency matrix represents a network as a square grid. Place nodes along both axes; fill each cell when the corresponding nodes share a connection. Encode connection weight with color saturation or opacity. section 12.2

Build the matrix by preparing the network data and mapping it to visible grid cells:

  • Separate the network into nodes and edges, then sort nodes to establish a useful display order. section 12.2 section 12.5
  • For each edge, record both source-to-target and target-to-source entries when the network is undirected. section 12.2
  • Draw the cells and labels with rectangle and text elements, and use a legend to explain opacity values. section 12.2

Romeo and Juliet

List characters on the x- and y-axes, fill cells for shared scenes, and darken cells as the number of shared scenes increases. An undirected network produces a symmetric matrix; the diagonal remains blank when nodes cannot connect to themselves.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains grid encoding, weighted opacity, symmetry, data preparation, legends, and interaction through a D3 implementation.
Examples
Uses Romeo and Juliet characters, shared-scene counts, opacity legends, tooltips, and highlighted labels.
What it assumes
Assumes basic JavaScript project setup and teaches network nodes, edges, matrix encoding, and interaction progressively.
What you can do after
Builds an interactive weighted adjacency matrix with D3.js from node and edge data.
How it connects
Connects nodes, edges, weighted networks, undirected networks, directed networks, and network visualizations.

Also explained in

Compare how 8 books explain adjacency matrix →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.