Snark Hunting: Force Directed Graphs in D3 by Stephen Hall.
From the post:
Is it possible to write a blog post that combines d3.js, pseudo-classical JavaScript, graph theory, and Lewis Carroll? Yes, THAT Lewis Carroll. The one who wrote Alice in Wonderland. We are going to try it here. Graphs can be pretty boring so I thought I would mix in some fun historical trivia to keep it interesting as we check out force directed graphs in D3. In this post we are going to develop a tool to load up, display, and manipulate multiple graphs for exploration using the pseudo-classical pattern in JavaScript. We’ll add in some useful features, a bit of style, and some cool animations to make a finished product (see the examples below).
As usual, the demos presented here use a minimal amount of code. There’s only about 250 lines of JavaScript (if you exclude the comments) in these examples. So it’s enough to be a good template for your own project without requiring a ton of time to study and understand. The code includes some useful lines to keep the visualization responsive (without requiring JQuery) and methods that do things like remove or add links or nodes.
There’s also a fun “shake” method to help minimize tangles when the graph is displayed by agitating the nodes a little. I find it annoying when the graph doesn’t display correctly when it loads, so we’ll take care of that. Additionally, the examples incorporate a set of controls to help understand and explore the effect of the various D3 force layout parameters using the awesome dat.gui library from Google. You can see a picture of the controls above. We’ll cover the controls in depth below, but first I’ll introduce the examples and talk a little bit about the data.
I don’t think graphs are boring at all but must admit that adding Lewis Carroll to the mix doesn’t hurt a bit.
Great way to start off the week!
PS: The Hunting of the Snark (An Agony in 8 Fits) (PDF, 1876 edition)