During one of our impromptu sprints at SciPy 2011, the NetworkX team decided it would be nice to add the ability to export networks for visualization with the D3 JavaScript library. This would allow people to post their visualizations online very easily. Mike Bostock, the creator and maintainer of D3, also has a wonderful example of how to render a network using a force-directed layout in the D3 examples gallery.

So, we decided to insert a large portion of Mike's code into the development version of NetworkX in order to allow people to quickly export networks to JSON and visualize them in the browser. Unfortunately, I have not had the chance to write any tests for this code, so it is only available in my fork of the main NetworkX repository on Github. But, if you clone this repository and install it you will have the new features (along with an additional example file for building networks for web APIs in NX).

As a quick example, I used the data I had collected on some of my friends' Twitter ego-networks to show some of the new features. Below is my friend Mike Dewar's Twitter network visualized in D3 using the new features, with the supporting code.

Mike is the red node at the center, and the rest are colored by a basic clustering based on geodesic distance. This coloring comes from the REC node attribute in the NetworkX object, which is just a series of integers used to color the nodes. The function also has the ability to size the edges based on some weighting, but that is not used in the above example.

Most of this is pretty raw, so please do let me know when things blow up, or what additional customizations you would like. For better or worse, D3 let's you do almost anything, so we have to decide what things can be edited from within the function calls, and what will require customization on the user end.

Many of you may also be interested in seeing the output of these functions. To view the JavaScript and exported JSON go to the full code for the example here.