In the Serengeti food web paper, we present a network diagram of predator-prey relationships, illustrating network structure (Figure 3). In getting with the times, we’ve also made an interactive version of this figure, presenting the network in a force-directed layout. Ed coded this up in d3.js based on a version I did in Processing. Green nodes represent plants, blue nodes represent herbivores and red nodes represent carnivores. Edges connecting nodes pull them toward each other following Hooke’s Law, while nodes are repelled from each other according to Coulomb’s Law. We add an additional force pulling nodes belonging to the same group toward each other.

My favorite part of the visualization is the concept of focus. If you click on a node, the spring forces applied to the edges of this node are magnified, pulling its connections closer. This makes it easier to explore relationships in the network. A double-click removes focus.