Today we published a small graphic, “Anatomy of a Trade,” to accompany an article about Freddie Mac by ProPublica’s Jesse Eisinger and NPR News’s Chris Arnold. The article describes some “financial alchemy” performed by Freddie to protect one of their mortgage-backed investments. The stakes were high and the financial details enormously complex, so we wanted to walk readers through things step-by-step.

We were inspired to try stepper graphics, like this one, by Shan Carter of the New York Times, who gave a fantastic talk about them a few months ago.

We wrote a small framework to handle the transitioning logic which is over on GitHub. At their base, stepper graphics are just slideshows, and slideshows are just linked lists, so our library simply uses a linked list to control navigation. The API is pretty simple; only two functions are required. Here’s an example:

$(function(){
  var steps = new Stepper("#steps");

  steps.addSlide(1, function(){ this.canvas.text("slide 1"); });
  steps.addSlide(2, function(){ this.canvas.text("slide 2"); });
  steps.addSlide(3, function(){ 
    this.stop();
    fancyAsyncThing(function(){
      steps.canvas.text("slide 3"); 
      steps.start();
    });
  });
  steps.go();
});

If you want to do fancy asynchronous animations you can call the stop and start functions to disable and enable navigation respectively so people can’t click off of a slide while it’s still rendering.

It’s a small library. We hope to use it again and work out the kinks.