Visualizing LinkedIn Connections Using Protovis

By daniel - Posted on 08 February 2011

A couple weeks ago, LinkedIn released InMaps, a tool for visualizing your professional network. You can see mine right here.

The layouts are fantastic and they show the clusters well but I wanted a bit more interactivity in the UI. I used Protovis because it seems to be one of the best Javascript visualization packages out there.

Firebug helped me grab the JSON files used by LinkedIn and set about feeding the data to Protovis. A little bit of data-munging and we were good. As usual, though, it took a bit of wrestling to get the force-directed layout to behave.

One of the first things I did was remove the node representing myself. This node was connected to every other node so it didn't communicate anything useful and it was causing the entire network to oscillate and disappear off screen.

So far Protovis has been pretty nice to work with, though I ran into some problems with user interaction. Specifically, I want the user to be able to click a node to open the LinkedIn profile. However, when the user drags a node, the click event fires and opens a new window.

The documentation was also a bit brief but between the example code and the source code it wasn't too hard to figure things out. Looking forward to working more with it!