Visualizing the Senate social graph, revisited

How the addition of animation and interactivity improved a visualization.

Beautiful Visualization” releases in print next week. In putting together the book, Julie Steele and Noah Iliinsky asked a range of visualization experts like Nick Bilton, Fernanda Viega and Martin Wattenberg, as well as enthusiasts (like me), to critique a visualization they’d created.

My chapter, which was inspired by Chris Wilson’s article The Senate Social Network, uses graph visualization and data from to show how voting patterns in the U.S. Senate have evolved since 1991. For example, one of the most stark revelations in the visualization is the way that cross-party voting (as Wilson defined it, which was when two Senators voted together across a session over 65% of the time) completely disappears during the 104th session (the period of the so called “Republican Revolution”).

While this isn’t exactly unexpected, it was fascinating to see how clearly these events are reflected in the visualization. The structure of the graph went from a fairly oblong shape with many cross connections between parties to two completely separate, tight party clusters. This Ignite presentation describes the key findings in more detail:

In revisiting the visualization for the book, I found a number of areas for improvement, such as:

  • Adding interactivity. Graphviz is a great quick tool, but it produces a static output. A better approach would allow the viewer to interact with the data more meaningfully.
  • More effective labeling. I used simple numeric labels to identify each senator. Unless you had a magnifying glass, the small font made it difficult to quickly identify a particular senator.
  • Presenting more meaningful transitions between periods. This area in particular needed more work. Although the diagrams effectively present the overall patterns, people were more often interested in how a particular senator moved over time.

So, this post presents a Processing visualization that addresses many of these deficiencies:

  • Rather than static images, senators are represented by animated figures. As you move through the sessions using the left and right arrow keys, the senators “walk” from their positions in one graph to their new position in the next graph. (Or, if they have just been voted in or out, they come in from the top and bottom.)
  • Mousing over the senator displays his or her name. Clicking on the senator makes the label stay on between transitions so you can track them across sessions.

While this revised visualization shows the same information as the original static version, the addition of interactivity and animated transitions makes this a much more engaging way to explore the senatorial voting patterns.

(Note: You must click your mouse somewhere inside the Applet area in order for this to work. Then use the right and left arrow keys to move between sessions.)

/* <![CDATA[ */

var attributes = { code:'senate_viz_animated6.class',
archive: '',
width:640, height:480 } ;
var parameters = { };
var version = '1.5';
deployJava.runApplet(attributes, parameters, version);

/* ]]> */


This browser does not have a Java Plug-in.

Get the latest Java Plug-in here.


If you want to know more about how this visualization works, you can find all the code and data in this O’Reilly Answers post: “Create animated graph visualizations with Processing.


tags: , ,