Skip to main content
100%

D3 in Action Chapter 6 - Example 1

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Apr 3, 2018
Created on Apr 3, 2018

This example uses D3’s adjacency matrix layout to display relationships in alumni data. Unlike arc diagrams or force-directed layouts, nodes are shown along both axes with links represented as filled grid cells where connected nodes intersect. The matrix includes helper functions that render x and y axes to label nodes. The data is drawn from alumni_data.json, which contains information about graduate fellows, their departments, and communities. The visualization is rendered using SVG and is based on a block by emeeks, with a current version available in the d3-plugins repository.

AI-generated description

A simple D3 layout that creates an adjacency matrix. In an adjacency matrix, unlike an arc diagram or a force-directed layout, the links are not lines and the nodes are not circles (or other icons). Instead, all nodes are shown across the x and y axes, and a link is indicated by a filled grid cell where the connected nodes meet.

The layout also includes helper functions to draw the x and y axes to label the nodes.

The most current version of the layout is here.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Matrix Graph

A matrix graph shows the connections between graduate fellows and their academic departments at UVa, based on alumni data. The visualization uses a D3 adjacency matrix layout to render an SVG grid where each cell indicates a relationship between a person and their department. The data comes from a JSON file listing fellows with attributes like their UVa department, degree, and current organization, enabling viewers to see departmental clusters and patterns in career outcomes. This implementation uses D3 v4 with the d3-adjacency-matrix-layout helper library, licensed under MIT.

ZZoeLeBlanc
77% match
Loading thumbnail…

CS 360 Assignment 7 - Adjacency Matrix in d3

This example visualizes the Zachary Karate Club dataset as an adjacency matrix, displaying the 34 members and their 78 connections. Each cell represents a potential edge between two nodes, with fill opacity proportional to edge weight. The visualization uses d3.v3’s `d3.svg.axis` for ordinal axes and SVG `rect` elements for matrix cells. Data loading uses `d3.csv` with a `queue()` helper to parse node and edge lists from separate CSV files. Interactive highlighting is implemented through `mouseover` events that emphasize entire rows and columns.

SSean Sanchez
76% match
Loading thumbnail…

D3 Matrix Example

This D3.js example visualizes a directed social network as a force-directed diagram. Nodes represent individuals, and curved paths with arrow markers indicate relationships, with link length inversely proportional to relationship strength. Link opacity encodes value via four classes. The visualization animates the layout and supports interactive click and double-click actions to highlight nodes and text.

663anp3ca
76% match
Loading thumbnail…

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: ![screenshot](https://gist.githubusercontent.com/ZoeLeBlanc/f48701a94b4cf6e4ff2a1c1d26d58fba/raw/ec35db5d74c6555d11bcad525ec9a1cd9d90e5a1/adjacency-matrix.png) 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.

ZZoeLeBlanc
75% match
Loading thumbnail…

D3 in Action Chapter 6 - Example 1

This example shows an adjacency matrix of character co-appearances in Les Misérables, where each cell is a colored rectangle representing the weight of a connection between two characters. The visualization uses a custom `d3.layout.adjacencyMatrix` layout to compute cell positions and weights, then renders them as SVG rectangles with fill opacity proportional to link weight. Color encodes character group membership via a `d3.scale.category20b()` scale, and axes are generated with `d3.svg.axis` using ordinal scales of character names. The source data is loaded from `miserables.json`.

AAlexandru Brebeanu
75% match
Loading thumbnail…

Bipartite Graph

This bipartite graph visualizes relationships between individuals and universities using a force-directed layout in D3 v4. Nodes are rendered as colored circles (grouped by category) with labels displayed alongside, implemented by wrapping circles and text in SVG groups. Links show connections between people and institutions, with simulation forces including charge, center, x, and y positioning. The visualization is adapted from Mike Bostock's Les Misérables co-occurrence graph, extended here to show node labels and support drag interactions. Data is loaded from a JSON file containing people and universities, with force-directed positioning and draggable nodes.

ZZoeLeBlanc
75% match
Loading thumbnail…

A8 - adjacency matrix representation

This example visualizes the Zachary Karate Club dataset as an adjacency matrix, displaying node connections as a grid of orange squares. Each row and column represents a node, with filled cells indicating edges between nodes. Hovering over a cell highlights its corresponding row and column, while a tooltip reveals the edge's source-target pair. The code uses D3.js v7 (d3.csv, d3.select) to load the data and render the SVG elements, positioning cells via x and y attributes. A static tooltip appears in the corner, and the visualization includes no interactive filtering or animation.

DDuc Pham
74% 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
74% match