Directed graph builder code#

`.size()` sets the available layout size to our predefined values. `.links(links)` does for links what `.nodes` did for nodes. Put simply, it sets the nodes to the `nodes` we have previously set in our object. `.nodes(d3.values(nodes))` sets our layout to the array of `nodes` as returned by the function `d3.values` (). `var force = d3.layout.force()` makes sure we're using the `force` function. The next section introduces the `force` function.ДЇull details for this function are found on the D3 Wiki, but the following is a rough description of the individual settings. The next block sets the size of our svg area that we'll be using Then the `value` variable is converted to a number from a string if necessary (`link.value = +link.value `).

Directed graph builder code#

Then the block of code goes on to test the `link.target` value in the same way. The values loaded are as follows Д3.csv( 'data/force.csv ', function(error, links)

In the following example it is loaded from a csv file named force.csv. In the original examples the data was contained in the graph code. The data for this example graph has been altered from the data that was comprised of litigants in the mobile patent war to fictitious peoples names and associated values (to represent the strength of the links between the two). Basic force directed graph showing directionalityДЄs explained in the previous post, the example graphs explained here are a combination of Mike Bostock's Mobile Patent Suits graphВ and Force-Directed Graph with Mouseover graph.