Network
There are two network layouts supported, force directed and radial layout. See the first and second examples respectively.
You can rotate the network with the arrows, page-up, page-down home and end keys. You can also zoom in by dragging the mouse. You can also drag the legends and the nodes. If you want to move only the label of the node then press the shift key. To reset the network to its original state press the 'esc' key. If you click in a node then you can see all the information for the node. The click event can be customized (please see the event section).
You can select nodes by dragging the mouse over the items you want to select while pressing the left mouse button and the 'shift' key. You can also select nodes by simultaneously pressing the 'ctrl' key and clicking with the left mouse button on the individual item. Once selected, you can press the 'delete' key to hide them or the 'insert' key to show them again. To reset the plot to its original state press the 'esc' key.
The following example shows a network with parent nodes and children. Please drag the node PH1 or PH2 to see their behavior. The network can be also plot in 3D. See the last example in this page and use the arrow keys to see it in action. Although it works in IE 6 I DO NOT recommend using that browser since it is going to be pretty sloooooooow.
The EXT-JS component enables you to use this as a network editor. You can add, remove update nodes, edges, legends, create animations, send nodes backards and forward, hide or display children nodes, etc. It is really cool and it was done with the help on Mingy Liu.
You can resize the image using the handle that appears when you mouse over the south and east sides of the canvas. You maybe wondering why sometimes it resizes to where you released the mouse button and sometimes it does not. The reason is because of the 'autoExtend' property which is a feature (not a bug). If you set the autoExtent to 'false', then it resizes to where you release your mouse button.
new CanvasXpress('canvas',
{nodes: [{id: 'Gene1', color: 'rgb(255,0,0)', shape: 'rectangle', width: 60, height: 30},
{id: 'Gene2', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene3', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene4', color: 'rgb(255,0,0)', shape: 'rectangle', width: 40, height: 30},
{id: 'Gene5', color: 'rgb(255,0,0)', shape: 'square', size: 2.3},
{id: 'Gene6', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene7', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene8', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'SNP1', color: 'rgb(0,255,0)', shape: 'oval', width: 60, height: 40},
{id: 'SNP2', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP3', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP4', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.5},
{id: 'SNP5', color: 'rgb(0,255,0)', shape: 'oval', width: 60, height: 10},
{id: 'SNP6', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP7', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP8', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.2},
{id: 'PH1', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH1a', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH1b', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH2', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH2a', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2', size: 2},
{id: 'PH2b', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2', size: 2},
{id: 'PH2ba', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2b', size: 2},
{id: 'PH3', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH4', color: 'rgb(0,255,255)', shape: 'triangle', size: 2}],
edges: [{id1: 'Gene1', id2: 'Gene2', color: 'rgb(51,12,255)', width: '5', type: 'line'},
{id1: 'Gene2', id2: 'Gene3', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene1', id2: 'Gene4', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene3', id2: 'Gene5', color: 'rgb(51,12,255)', width: '8', type: 'dashedArrowHeadLine'},
{id1: 'Gene6', id2: 'Gene5', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene7', id2: 'Gene5', color: 'rgb(153,13,255)', width: '8', type: 'dottedArrowHeadLine'},
{id1: 'Gene8', id2: 'Gene7', color: 'rgb(51,12,255)', width: '5', type: 'line'},
{id1: 'Gene4', id2: 'Gene7', color: 'rgb(51,12,255)', width: '5', type: 'squareHeadLine'},
{id1: 'Gene1', id2: 'SNP2', color: 'rgb(153,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP1', id2: 'SNP4', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP5', id2: 'Gene5', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP1', id2: 'PH2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP1', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH4', id2: 'SNP7', color: 'rgb(153,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'PH2', id2: 'Gene5', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH1', id2: 'Gene7', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'PH1', id2: 'PH1a', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH1', id2: 'PH1b', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH3', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH2', id2: 'PH2a', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH2', id2: 'PH2b', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH2b', id2: 'PH2ba', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'SNP6', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP3', id2: 'Gene4', color: 'rgb(13,12,255)', width: '8', type: 'arrowHeadLine'},
{id1: 'SNP4', id2: 'Gene5', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP5', id2: 'Gene7', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP7', id2: 'Gene5', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP8', id2: 'Gene6', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP8', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'}],
legend: {}},
{graphType: 'Network',
backgroundGradient1Color: 'rgb(0,183,217)',
backgroundGradient2Color: 'rgb(4,112,174)',
nodeFontColor: 'rgb(29,34,43)',
showAnimation: true,
preScaleNetwork: false});
new CanvasXpress('canvas1',
{nodes: [{id: 'Gene1', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene2', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene3', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene4', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene5', color: 'rgb(255,0,0)', shape: 'square', size: 2.3},
{id: 'Gene6', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene7', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene8', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'SNP1', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP2', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP3', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP4', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.5},
{id: 'SNP5', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP6', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP7', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP8', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.2},
{id: 'PH1', color: 'rgb(0,255,255)', shape: 'star', size: 2},
{id: 'PH1a', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH1b', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH2', color: 'rgb(0,255,255)', shape: 'star', size: 2},
{id: 'PH2a', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH2', size: 2},
{id: 'PH2b', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH2', size: 2},
{id: 'PH2ba', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH2b', size: 2},
{id: 'PH3', color: 'rgb(0,255,255)', shape: 'star', size: 2},
{id: 'PH4', color: 'rgb(0,255,255)', shape: 'star', size: 2}],
edges: [{id1: 'Gene1', id2: 'Gene2', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP1', id2: 'PH1', color: 'rgb(51,12,152)', width: '3', type: 'line'},
{id1: 'Gene2', id2: 'Gene7', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene2', id2: 'Gene8', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene1', id2: 'Gene3', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP4', id2: 'PH4', color: 'rgb(51,12,152)', width: '3', type: 'line'},
{id1: 'PH1', id2: 'PH1a', color: 'rgb(102,12,152)', width: '3', type: 'line'},
{id1: 'PH1', id2: 'PH1b', color: 'rgb(102,12,152)', width: '3', type: 'line'},
{id1: 'Gene4', id2: 'SNP3', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene6', id2: 'SNP4', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'PH2', id2: 'PH2a', color: 'rgb(51,12,152)', width: '3', type: 'line'},
{id1: 'PH2', id2: 'PH2b', color: 'rgb(102,12,152)', width: '3', type: 'line'},
{id1: 'Gene6', id2: 'SNP5', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene7', id2: 'SNP6', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP6', id2: 'SNP7', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene1', id2: 'Gene4', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene1', id2: 'Gene5', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP7', id2: 'Gene6', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP6', id2: 'SNP8', color: 'rgb(153,12,255)', width: '3', type: 'line'},
{id1: 'Gene3', id2: 'SNP1', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'Gene3', id2: 'SNP2', color: 'rgb(51,12,255)', width: '3', type: 'line'},
{id1: 'SNP2', id2: 'PH2', color: 'rgb(153,12,255)', width: '3', type: 'line'},
{id1: 'SNP3', id2: 'PH3', color: 'rgb(51,12,152)', width: '3', type: 'line'},
{id1: 'PH2b', id2: 'PH2ba', color: 'rgb(102,12,152)', width: '3', type: 'line'}],
legend: {}},
{graphType: 'Network',
showAnimation: true,
backgroundGradient1Color: 'rgb(0,183,217)',
backgroundGradient2Color: 'rgb(4,112,174)',
nodeFontColor: 'rgb(29,34,43)',
showNetworkRadialLayout: true,
networkLayoutType: 'radial'});
new CanvasXpress('canvas2',
{nodes: [{id: 'Gene1', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 155, y: 160},
{id: 'Gene2', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 155, y: 340},
{id: 'Gene3', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 355, y: 160},
{id: 'Gene4', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 355, y: 340},
{id: 'Gene5', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 255, y: 100},
{id: 'Gene6', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 255, y: 400},
{id: 'Gene7', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 50, y: 250},
{id: 'Gene8', color: 'rgb(255,0,0)', shape: 'square', size: 1, x: 450, y: 250}],
edges: [{id1: 'Gene1', id2: 'Gene2', color: 'rgb(51,12,255)', width: '1', type: 'curvedArrowHeadLine'},
{id1: 'Gene4', id2: 'Gene3', color: 'rgb(51,12,255)', width: '1', type: 'curvedArrowHeadLine'},
{id1: 'Gene5', id2: 'Gene6', color: 'rgb(51,12,255)', width: '1', type: 'arrowHeadLine'},
{id1: 'Gene3', id2: 'Gene8', color: 'rgb(51,12,255)', width: '1', type: 'bezierArrowHeadLine'},
{id1: 'Gene7', id2: 'Gene1', color: 'rgb(51,12,255)', width: '1', type: 'bezierArrowHeadLine'}],
legend: {nodes: [],
edges: [],
text: []}},
{graphType: 'Network',
backgroundGradient1Color: 'rgb(0,183,217)',
backgroundGradient2Color: 'rgb(4,112,174)',
nodeFontColor: 'rgb(29,34,43)',
calculateLayout: false});
new CanvasXpress('canvas3',
{nodes: [{id: 'Gene1', color: 'rgb(255,0,0)', shape: 'rectangle', width: 60, height: 30},
{id: 'Gene2', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene3', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene4', color: 'rgb(255,0,0)', shape: 'rectangle', width: 40, height: 30},
{id: 'Gene5', color: 'rgb(255,0,0)', shape: 'square', size: 2.3},
{id: 'Gene6', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene7', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'Gene8', color: 'rgb(255,0,0)', shape: 'square', size: 2},
{id: 'SNP1', color: 'rgb(0,255,0)', shape: 'oval', width: 60, height: 40},
{id: 'SNP2', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP3', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP4', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.5},
{id: 'SNP5', color: 'rgb(0,255,0)', shape: 'oval', width: 60, height: 10},
{id: 'SNP6', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP7', color: 'rgb(0,255,0)', shape: 'sphere', size: 2},
{id: 'SNP8', color: 'rgb(0,255,0)', shape: 'sphere', size: 2.2},
{id: 'PH1', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH1a', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH1b', color: 'rgb(0,255,255)', shape: 'star', parentNode: 'PH1', size: 2},
{id: 'PH2', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH2a', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2', size: 2},
{id: 'PH2b', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2', size: 2},
{id: 'PH2ba', color: 'rgb(0,255,255)', shape: 'plus', parentNode: 'PH2b', size: 2},
{id: 'PH3', color: 'rgb(0,255,255)', shape: 'triangle', size: 2},
{id: 'PH4', color: 'rgb(0,255,255)', shape: 'triangle', size: 2}],
edges: [{id1: 'Gene1', id2: 'Gene2', color: 'rgb(51,12,255)', width: '5', type: 'line'},
{id1: 'Gene2', id2: 'Gene3', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene1', id2: 'Gene4', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene3', id2: 'Gene5', color: 'rgb(51,12,255)', width: '8', type: 'dashedArrowHeadLine'},
{id1: 'Gene6', id2: 'Gene5', color: 'rgb(51,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'Gene7', id2: 'Gene5', color: 'rgb(153,13,255)', width: '8', type: 'dottedArrowHeadLine'},
{id1: 'Gene8', id2: 'Gene7', color: 'rgb(51,12,255)', width: '5', type: 'line'},
{id1: 'Gene4', id2: 'Gene7', color: 'rgb(51,12,255)', width: '5', type: 'squareHeadLine'},
{id1: 'Gene1', id2: 'SNP2', color: 'rgb(153,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP1', id2: 'SNP4', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP5', id2: 'Gene5', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP1', id2: 'PH2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP1', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH4', id2: 'SNP7', color: 'rgb(153,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'PH2', id2: 'Gene5', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH1', id2: 'Gene7', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'PH1', id2: 'PH1a', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH1', id2: 'PH1b', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH3', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'PH2', id2: 'PH2a', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH2', id2: 'PH2b', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'PH2b', id2: 'PH2ba', color: 'rgb(102,12,152)', width: '5', type: 'line'},
{id1: 'SNP6', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP3', id2: 'Gene4', color: 'rgb(13,12,255)', width: '8', type: 'arrowHeadLine'},
{id1: 'SNP4', id2: 'Gene5', color: 'rgb(51,12,152)', width: '5', type: 'line'},
{id1: 'SNP5', id2: 'Gene7', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP7', id2: 'Gene5', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP8', id2: 'Gene6', color: 'rgb(13,12,255)', width: '5', type: 'arrowHeadLine'},
{id1: 'SNP8', id2: 'Gene2', color: 'rgb(51,12,152)', width: '5', type: 'line'}],
legend: {nodes: [{shape: 'triangle',
text: 'Foo'},
{shape: 'square',
text: 'Bar'},
{shape: 'circle',
text: 'Hello'}],
edges: [{type: 'arrowHeadLine',
size: 3,
text: 'Blah'},
{type: 'line',
text: 'More blah'}],
text: [{text: 'Some text'},
{text: 'Some more text'}]}},
{graphType: 'Network',
backgroundGradient1Color: 'rgb(0,183,217)',
backgroundGradient2Color: 'rgb(4,112,174)',
nodeFontColor: 'rgb(29,34,43)',
is3DNetwork: true});