Matrix diagram

100%

Matrix diagram

✓ Published0🌍 Public

Last edited Oct 19, 2020

Created on May 31, 2018

This matrix diagram visualizes the relationships between people and organizations in a digital humanities network, with rows and columns representing nodes and cell colors encoding interaction strength—darker shades indicate more frequent connections, while light gray signifies none. The matrix is ordered by communities identified through Louvain modularity, which groups related nodes into blocks along the diagonal for easier pattern recognition. Built with D3 v4 and rendered as SVG, the visualization offers a readable alternative to node-link diagrams for dense networks, though it trades off path-following clarity and label legibility at scale. The underlying data includes computed node metrics such as degree, betweenness centrality, and community membership.

AI-generated description

A matrix diagram of Les Miserables characters colored and ordered by their communities (determined using Louvain modularity). Darker colors indicate more interactions between characters, and light gray cells indicate no interaction.

In comparison with node-link diagrams, which can become inscrutable hairballs with dense networks, matrix diagrams can be simpler and easier to read. However, this is highly dependent on the row and column ordering, and it is difficult to follow paths connecting nodes. Furthermore, a matrix diagram of a graph with hundreds or thousands of nodes can be difficult to fit on one screen and still be able to read the row and column labels.

forked from <a href='http://bl.ocks.org/rpgove/'>rpgove</a>'s block: <a href='http://bl.ocks.org/rpgove/bf44631829eaa6512518005697649cb4'>Matrix diagram</a>

forked from <a href='http://bl.ocks.org/ZoeLeBlanc/'>ZoeLeBlanc</a>'s block: <a href='http://bl.ocks.org/ZoeLeBlanc/6d00276000b3bd08f8200a68199db7ad'>Matrix diagram</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Matrix diagram

This matrix diagram visualizes co-occurrence relationships among characters from Les Misérables, with rows and columns ordered and colored by community structure identified through Louvain modularity. Each cell’s color intensity reflects the frequency of character interactions, while light gray indicates no interaction. Rendered as an SVG using D3 v4, the diagram groups characters into colored communities along both axes, making clustered relationships readily apparent. Compared to node-link diagrams, which often become unreadable "hairballs" in dense networks, the matrix format is simpler and easier to scan—though its readability depends heavily on the ordering of rows and columns, and tracing multi-step paths between nodes is difficult. With very large graphs, fitting hundreds or thousands of labeled rows and columns on screen becomes a challenge. The data come from a JSON file of academic alumni, with nodes representing people and departments, edges representing affiliations, and communities determined by Louvain modularity.

ZZoeLeBlanc

83% match

Loading thumbnail…

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

Hhenry1987

81% match

Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Xx112358

79% match

Loading thumbnail…

Bipartite Community Graph

This bipartite force-directed graph visualizes connections between people and institutions, with nodes colored by community and labeled with their names. The network layout is computed using D3 v4's force simulation, applying link, charge, and centering forces. Nodes are rendered as small circles with adjacent text labels, created by wrapping circle and text elements in SVG groups, while links are drawn as gray lines. The data shows relationships among individuals and universities, with node color encoding community membership and node position determined by the simulation. Users can drag nodes to rearrange the network, and the visualization updates in real time. This example adapts Mike Bostock's classic force-directed graph of character co-occurrence in *Les Misérables* to display a bipartite network of people and institutions.

ZZoeLeBlanc

77% 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

76% match

Loading thumbnail…

Adjacency Matrix

This adjacency matrix visualization displays network connectivity among 410 nodes, with rows and columns representing individual nodes and gray cells marking their connections. The matrix uses a dataset of edges from an infect-Dublin network file. Built with D3.js v4, it renders SVG rectangles for matrix cells and axis labels, with node colors indicating group membership. Users can brush along the top axis to select a subset of nodes, triggering smooth transitions that re-scale the matrix and axes to focus on the selected region.

Kketchuparegood

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 Matrix Example

This D3 force-directed graph visualizes a directed social network, where each node represents an individual and links indicate relationships. Relationship strength is encoded by path length: stronger connections have shorter, more tightly curved edges. Direction is shown with markers (arrowheads), and curved paths help reduce visual overlap. The graph is rendered with SVG and includes animated transitions as the force simulation stabilizes. Node colors encode group membership, while link curvature conveys directionality, making the network structure easier to parse. This example builds on earlier rugby result network blocks by ConorAspell and Ericcoopey.

CConorAspell

75% match