d3.js force directed graph examples (overview)

There are a large number of possible examples to use to demonstrate force directed graphs. I chose to combine two examples that Mike Bostock has demonstrated in the past. Both use the data for the 'who's suing who' graph because I wanted especially to include the directionality aspect of the links. The two graphs I based the final graph on were the Mobile Patent Suits graph....

 … for the directionality and link encoding and the Force-Directed Graph with Mouseover graph...

… for the mouseover effects (note the enlarged 'Microsoft' circle).

In spite of the similarities to each other in terms of data and network linkages, the final example code was quite different, so the end result is a distinct hybrid of the two and will look something like this;

In this example the nodes can be clicked on once to enlarge the associated circle and text and then double clicked on to return them to normal. The links vary in opacity depending on an associated value loaded with the data. The example code for this graph can be found on bl.ocks.org.

To get to this example we'll build up from a basic graph with just the directional arrows to one with node highlighting and then to the version with the link opacity.