Skip to content

Instantly share code, notes, and snippets.

@mattgillooly
mattgillooly / README.md
Last active May 26, 2020 03:43 — forked from jdfekete/README.md
Matrix diagram that visualizes companion planting

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

<?xml version="1.0" encoding="utf-8"?><opml version="1.0"><head><title>RI Nexus Twits</title></head><body><outline text="RI Nexus Twits"><outline title="JackTemplin" text="JackTemplin" xmlUrl="http://twitter.com/statuses/user_timeline/JackTemplin.rss" type="rss" htmlUrl="http://twitter.com/JackTemplin"/><outline title="RINexus" text="RINexus" xmlUrl="http://twitter.com/statuses/user_timeline/RINexus.rss" type="rss" htmlUrl="http://twitter.com/RINexus"/><outline title="coreycantrell" text="coreycantrell" xmlUrl="http://twitter.com/statuses/user_timeline/coreycantrell.rss" type="rss" htmlUrl="http://twitter.com/coreycantrell"/><outline title="mikeauclair" text="mikeauclair" xmlUrl="http://twitter.com/statuses/user_timeline/mikeauclair.rss" type="rss" htmlUrl="http://twitter.com/mikeauclair"/><outline title="cpjolicoeur" text="cpjolicoeur" xmlUrl="http://twitter.com/statuses/user_timeline/cpjolicoeur.rss" type="rss" htmlUrl="http://twitter.com/cpjolicoeur"/><outline title="Kishfy" text="Kishfy" xmlUrl="http://tw