D3 in Action Chapter 6 - Example 1
This example demonstrates an adjacency matrix layout using D3.js, where nodes are displayed along both the x and y axes, and links are represented as filled grid cells at the intersection of connected nodes. Unlike arc diagrams or force-directed layouts, this visualization uses filled rectangles instead of lines and circles, with each cell's opacity reflecting the edge weight. The implementation includes custom x and y axes for node labels, and the layout is built from the Les Misérables character network data (miserables.json), with a symmetric matrix configured via `.directed(false)`. The SVG rendering uses D3's scales and axis helpers to position and label the matrix, while the matrix cells are colored blue with opacity proportional to link weight. The code also handles undirected graphs by mirroring cells across the diagonal and aggregates duplicate edges by summing their weights. An interactive control panel and styling for axis ticks and text are included, with the SVG sized at 1400x1400 pixels. The visualization is based on an adjacency matrix layout plugin by E. Meeks, forked and modified by ZoeLeBlanc, and is licensed under MIT.# D3 in Action Chapter 6 - Example 1: Adjacency Matrix
This example demonstrates an **adjacency matrix** visualization, a compact alternative to node-link diagrams for representing network data. Instead of drawing nodes as circles and links as lines, all nodes appear along both the x and y axes, and a filled grid cell marks a connection between the corresponding nodes.
## Key Features
- **Matrix layout**: Each cell represents a link between two nodes. The fill opacity of a cell encodes the edge weight, providing an at-a-glance view of connection strengths.
- **Undirected network**: The example uses `directed(false)`, which mirrors cells across the diagonal so each connection appears twice.
- **Custom layout plugin**: The `d3.layout.adjacencyMatrix` function builds the matrix and includes helper functions for axis generation. It also handles edge aggregation for duplicate links.
- **Dataset**: The example uses the "miserables.json" dataset, which contains the characters from Les Misérables and their co-occurrences.
- **Styling**: Nodes are colored blue, with opacity scaled by link weight, and axes label nodes with rotated text.
- **D3 v3**: Uses D3 v3.5.5 and an SVG-based rendering.
Key implementation details:
- The layout computes a grid where each cell represents a possible link between two nodes.
- Cells are colored based on the weight of the link between the nodes.
- The example includes helpers to build x and y axes for node labels, making the adjacency matrix easier to read.
Would you like me to write a code snippet or explain the implementation in more detail?# Adjacency Matrix
A simple D3 layout that creates an **adjacency matrix**, where nodes appear along both axes and links are shown as filled grid cells at their intersections—unlike arc diagrams or force-directed layouts, which use lines for links and circles for nodes.
## Features
- Uses `d3.layout.adjacencyMatrix` to calculate the matrix data
- Renders cells as SVG `<rect>` elements, with fill opacity proportional to link weight
- Supports directed and undirected modes (undirected mirrors cells across the diagonal)
- Includes helper functions to draw labeled x and y axes
- Default styling draws each cell with a black stroke and blue fill; fill opacity encodes edge weight
## Running the Example
Load `index.html` in a browser (ideally through a local server) with `miserables.json` in the same directory. The matrix will render with 800x800 dimensions inside a 1400x1400 SVG.
This example is forked from [Emeeks' Adjacency Matrix Layout block](http://bl.ocks.org/emeeks/15c005cba60aad26e11a).
## Data
The example uses `miserables.json`, a dataset of character relationships from *Les Misérables*.
## Key Options
- `directed` (boolean): controls whether the matrix is symmetric (for undirected graphs) or not
- `size` (array): width and height of the layout
- `nodes` and `links`: data inputs
- `edgeWeight`: function for weighting edges
- `nodeID`: function returning unique identifier for each node
## Usage
To create an adjacency matrix layout:
```js
var adjacencyMatrix = d3.layout.adjacencyMatrix()
.size([800,800])
.nodes(data.nodes)
.links(data.links)
.directed(false)
.nodeID(function (d) {return d.name});
```
The matrix() function is then called to generate an array of rectangles representing the matrix cells.
The d3.layout.adjacencyMatrix plugin was created by Elijah Meeks (emeeks).
## Source
This example is part of the [D3 in Action](https://www.manning.com/books/d3js-in-action) book.
</code></pre>
Visual description:
Screenshot:
Attribution: D3 in Action Chapter 6 - Example 1 by ZoeLeBlanc is licensed under the MIT License. This example is forked from
<a href="http://bl.ocks.org/emeeks/">emeeks</a>'s block:
<a href="http://bl.ocks.org/emeeks/15c005cba60aad26e11a">Adjacency Matrix Layout</a>.
Data: Les Miserables.
Your tasks: Based on the README.md, write the description of this
visualization. Make it concise but complete, in roughly 3-5 sentences. Include the
type of visualization, what is depicted, how the visualization encodes the data
(including marks and channels), and any interesting interaction or feature.
Your response should be plain text, no markdown, no links. Use only the provided information.This is a simple adjacency matrix visualization of the Les Misérables character co-occurrence data, rendered as an SVG. Unlike arc diagrams or force-directed layouts, it places all character nodes along both the x and y axes, and represents links between characters as filled grid cells at their intersections. The fill opacity of each cell encodes the weight of the connection, while helper functions generate the axes to label the nodes. The visualization includes a blue cell fill, with darker cells indicating stronger relationships, and it supports both directed and undirected modes through the underlying D3 layout plugin.