Les Misérables Co-occurrence

This matrix diagram visualizes character co-occurrences in Victor Hugo’s Les Misérables.

Each colored cell represents two characters that appeared in the same chapter; darker cells indicate characters that co-occurred more frequently.

Use the drop-down menu to reorder the matrix and explore the data.

Built with d3.js.

Source: The Stanford GraphBase.

A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j. Here, vertices represent characters in a book, while edges represent co-occurrence in a chapter.

Given this two-dimensional representation of a graph, a natural visualization is to show the matrix! However, the effectiveness of a matrix diagram is heavily dependent on the order of rows and columns: if related nodes are placed closed to each other, it is easier to identify clusters and bridges.

This example lets you try different orderings via the drop-down menu. This type of diagram can be extended with manual reordering of rows and columns, and expanding or collapsing of clusters, to allow deeper exploration. Jacques Bertin (or more specifically, his fleet of assistants) did this by hand with paper strips.

While path-following is harder in a matrix view than in a node-link diagram, matrices have other advantages. As networks get large and highly connected, node-link diagrams often devolve into giant hairballs of line crossings. Line crossings are impossible with matrix views. Matrix cells can also be encoded to show additional data; here color depicts clusters computed by a community-detection algorithm.

Want more? See this analysis of shuffling algorithms using matrix diagrams.