Matrix Diagrams

View full screen.

A graph can be represented by an adjacency matrix, where each value in row i and column j corresponds to the link from node i to node j. Given this representation, an obvious visualization then is: show the matrix! Using color or saturation instead of text allows patterns to be perceived rapidly. The seriation problem applies just as much to the matrix view as to the arc diagram, so the order of rows and columns is important: here we use a community-detection algorithm to order and color the display.

While path following is harder in a matrix view than in a node-link diagram, matrices have a number of compensating advantages. As networks get large and highly connected, node-link diagrams often devolve into giant hairballs of line crossings. In matrix views, however, line crossings are impossible, and with an effective sorting one quickly can spot clusters and bridges. Allowing interactive grouping and reordering of the matrix facilitates deeper exploration of network structure.

This network represents character co-occurrence in the chapters of Victor Hugo's classic novel, Les Misérables. Node colors depict cluster memberships computed by a community-detection algorithm. Source: Knuth, D. E. 1993. The Stanford GraphBase: A Platform for Combinatorial Computing, Addison-Wesley.

Next: Minard's Napoleon

Source

<html>
  <head>
    <title>Matrix Diagram</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="miserables.js"></script>
    <style type="text/css">

#fig {
  width: 800px;
  height: 800px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var color = pv.Colors.category19().by(function(d) d.group);

var vis = new pv.Panel()
    .width(693)
    .height(693)
    .top(90)
    .left(90);

var layout = vis.add(pv.Layout.Matrix)
    .nodes(miserables.nodes)
    .links(miserables.links)
    .sort(function(a, b) b.group - a.group);

layout.link.add(pv.Bar)
    .fillStyle(function(l) l.linkValue
        ? ((l.targetNode.group == l.sourceNode.group)
        ? color(l.sourceNode) : "#555") : "#eee")
    .antialias(false)
    .lineWidth(1);

layout.label.add(pv.Label)
    .textStyle(color);

vis.render();

    </script>
  </div></div></body>
</html>

Data

Due to size, the data file is omitted from this example. See miserables.js.