JIT Force Directed Layout

We are using the the JavaScript Infovis Toolkit (JIT)'s force directed layout to produce a network visualization. A network visualization shows a relationship between data points. Individual data points are referred as nodes. When two data points are related, the relation can be shown with a line between them. This line is called an edge. You can use shape,size and color "coders" to give specific shape, size and color to different data groups.

To add JIT force directed view to your exhibit, you must include JIT library and the exhibit extension for JIT(in addition to the Exhibit API):

 <link rel="exhibit-extension" src="http://projects.csail.mit.edu/exhibit/api/extensions/jit/jit-extension.js"/>

To include a force directed view, add to your HTML

 <div ex:role="view" 
       ex:viewClass="ForceDirected" 
       ex:nodeName=".label"
       ex:edge=".adjacencies">
     </div>

nodeName is the name you display on the node. Replace .label with appropriate expression
edge is the link between two nodes. Replace .adjacencies with appropriate expression.

Other settings (to be preceded by ex:) include:

setting name	type of value	default	choices	meaning
plotHeight	int	400		Height of the plot in pixels
plotWidth	int	600		Width of the plot in pixels
color	text	#D95F0E	Any color in accepted html format	All the nodes in the graph will be of this color in the absence of color coders
colorCoder	text	null		id of a colorCoder
shape	enum	triangle	triangle, square, circle and star	All the nodes in the graph will be of this shape in the absence of a shapeCoder
shapeCoder	text	null		id of a shapeCoder
size	text	6	1-12	All the nodes will be of this size if there is no sizeCoder
sizeCoder	text	null		id of a sizeCoder
edgeColor	text	#23A4FF	Any color	Color for the line which links the nodes
bubbleHeight	int	300		Height of the popUp in pixels
bubbleWidth	int	400		Width of the popUp in pixels