Visualizing Class Relationships with YARD and InfoVis

Note: This post requires an HTML5 capable browser. FF3.5+, Safari, Chrome (or any WebKit browser) will do the trick. That should cover most of my readers.

I love visualization toolkits, so when I found out about the JS visualization toolkit InfoVis, I had to play with it. Generally the first thing that comes to mind when visualizing data is class model relationships, so I figured I’d write another snippet to export data from YARD into a JS-friendly format and see how it looked. This time, I’ll spare the show-and-tell and just do the showing, since the code to export this data is fairly trivial.

I basically used the few examples from the site but plugged in class relationship data from Ruby libraries to get the following visualization of YARD in particular:

Visualization 1: Simple Tree View

Pretty simple, we can also make it look a little fancier:

Visualization 2: Polar Tree View

Visualization 3: Coupling

It then occurred to me that visualizations like these (weighted graphs in particular) would be a good way to visualize class coupling in your library. I experimented with the concept by generating a weighted graph, but it seems InfoVis’ RGraph class (which they demo a weighted graph with) isn’t really that great at really visualizing the weights, also it doesn’t seem to support weighted graphs. The end result shows some interesting data, but it’s not exactly great to really view coupling.

Note: FF doesn't seem to like this one. Don't be surprised if it doesn't work.

Those are the visualizations I played with. There’s a nicer version here that lets you see visualizations for Ruby’s core lib and Rails in addition to YARD’s, plus it has some extra niceties like showing methods in the current highlighted class on the side (not enough space to show it on my blog). Check it out.

Thanks to Josh Martin for pointing out InfoVis today, by the way.