Documentation
Downloads
Instruction Manual - Contains instructions for embedding and using the viewer as well as generating XML files.
Sample Network #1 - G-alpha i/o Pathway
Sample Network #2 - Dopamine to R-type Ca Channel Pathway
Sample Network #3 - Obesity drugs and their targets
Online Manual
Running FNV
FNV requires that you have Adobe Flash Player installed on your machine. You can get the latest version of Adobe Flash Player from here.
There are four ways to run FNV. You can run the Flash movie locally, you can embed the viewer in a web document, you can embed the viewer in a PDF file, or you can run the viewer from here.
To run the viewer locally, you must place the XML file you want to visualize in the same directory as the FNV.swf file. The XML file must be named network.xml or the viewer will not display the network.
To incorporate the flash viewer into a web page you can embed it using the HTML code listed below. There are two ways to load the network into the viewer. Follow the same procedure as when using FNV locally (naming the network, network.xml and placing it in the same directory as FNV.swf file) or by feeding a network name into the viewer using Flash vars. Simply replace the networkGENERATED.xml filename in the code below with the filename of the network you wish to visualize.
Note: The viewer has full screen functionality that won’t be enabled unless the allowfullscreen attribute is set to true.
XML File Syntax
XML files read by the viewer have this basic structure:
Network Element
The network element attributes’ control the aesthetics of the network and the underlying algorithm used to render the network. Color Codes:
The viewer requires that all colors be defined using hexadecimal values. Unlike color codes used in HTML these values must start with a “0x” instead of a “#”. The three pairs of two digit hex values represent red, green, and blue. More information about hexadecimal color codes including a color picker can be found here.
Attributes
name – Used to assign a name to the network.
backgroundcolor – A hex color code which specifies the background for the network.
nodeselectioncolor – A hex color code which specifies the highlight color of the node when the node is hovered over.
edgeselectioncolor – A hex color code which specifies the highlight color of the edge when hovered over.
fade – A Boolean (true or false) value that turns subnetwork fading on mouseover on or off.
description – A Boolean (true or false) value that adds or removes the description box.
doubleclick – A Boolean (true or false) value used to enable full screen mode.
layoutmode – Allows for the selection of a graph drawing algorithm. All of the graph drawing algorithms render planar straight-line drawings.
Note: with the exception of the predefined graph algorithm all graphs with more than 70 nodes will be drawing using the default algorithm potentially producing undesired results.
layoutmode options:
predefined - Allows the user to specify their own position, in pixels, for each node. Additional attributes xPos and yPos need to be added to the node representing the x position on the page and the y pixel position on the page. This mode is the preferred method for visualizing large networks.
force - Positions the nodes using attraction and repulsion forces so that all the edges are roughly equal in length while attempting to minimize edge overlap. When dragging and repositioning a node the force of repulsion may reposition some of the surrounding nodes.
hierarchy - Arranges a directed graph into layers flowing from a source nodes to sink nodes.
radial - Arranges the network circularly around a root node. The additional attribute layer can be used to set the positions of the nodes in the circle. Layer 0 represents the center of the circle while larger layer values are placed at increasingly larger radii from the center.
spectral - Renders the network using eigenvectors of the adjacency matrix associated with the graph. Attempts to reduce edge overlap.
spectral-hierarchy - This option first arranges the nodes hierarchically then arranges each layer in the hierarchy using the eigenvectors of the adjacency matrix.
default - When no valid option is entered the viewer simply places all nodes in a stack on top of each other.
Node Element
The node element is used to create nodes for the graph. The attributes allow users to specify the aesthetics of the nodes (which can be used to distinguish classes of nodes), provide additional information to the chosen layout algorithm, and add a hyperlink to be displayed within the description box.
Note: Since FNV was designed to visualize small to moderately sized networks it is not recommended that users create more than 70 nodes, unless the predefined graph drawing algorithm is used.
Attributes
id – Unique number used to identify the node. IMPORTANT: Node ids must be numeric, in order, start with 1, and increment by one with no skipping.
name – Name of the node which is displayed on the node.
bgcolor – A hex color code which specifies the background color of the node, useful for delineating node types.
url – (optional) A link that will automatically open when the node description is clicked.
shape – Used to specify node shape can be used to distinguish particular types of nodes.
Options: box, circle, roundbox, triangle, and image
textsize – Controls the font size of the name on the node.
textcolor – A hex color code value specifying the color of the text on the node.
Node Specific Attributes
nodesize – When circle nodes are created this option can be used to set the diameter.
imageurl – When image node is selected the option specifies the location of the image to be used.
Layout Algorithm Specific Attributes
level – Used only when the radial layout mode is selected. Levels represent distance from the radius, therefore level 0 is in the center of the circle.
xPos – Used only when the predefined option is selected. Specifies in pixels the x coordinate for the location of the node.
yPos – Used only when the predefined option is selected. Specifies in pixels the y coordinate for the location of the node.
A description can be placed in-between the <node> tags enclosed in <desc> tags. This description can contain plain text and images. It is displayed in the description box whenever the node is moused over.
Note: The description is limited to 200 pixels wide. Images wider will be cutoff.
Edge Element
The edge element is used to connect two nodes. The attributes are used to specify the type and look of the edges.
id – Number used to identify the edge.
name – (optional) Used to describe the type of edge.
type – Specifies the type of edge to draw between the source and target nodes.
bidirectional – A solid line attached to two nodes.
arrow – A line that points from the source node to the target node.
ortholine – A line that represents suppression of the target node.
thickness – A positive whole number used to specify the width of the edge.
url – (optional) A link that can be displayed when clicking the edge.
source – The source node’s id number (IMPORTANT: if this is omitted or incorrect a random source node is selected).
target – The target node’s id number (IMPORTANT: if omitted or incorrect edge will not appear).
color – A hex code used to specify the edge color.
A description can also be placed in between the <edge> tags enclosed in <desc> tags. This description, similar to the node description, can contain plain text and images. It is displayed in the description box when the edge is moused over.
Using the Viewer
As discussed in the running and installation instructions the viewer can be run by double clicking on the FNV.swf or embedded within a webpage. Once loaded, the network described by the file network.xml should be displayed. (If nothing is displayed, make sure that the XML file is named network.xml and is in the same directory as FNV.swf. Be sure to also check the syntax of the xml file and make sure that all elements are closed properly and that all edges reference valid nodes.)
Instruction Manual - Contains instructions for embedding and using the viewer as well as generating XML files.
Sample Network #1 - G-alpha i/o Pathway
Sample Network #2 - Dopamine to R-type Ca Channel Pathway
Sample Network #3 - Obesity drugs and their targets
Online Manual
Running FNV
FNV requires that you have Adobe Flash Player installed on your machine. You can get the latest version of Adobe Flash Player from here.
There are four ways to run FNV. You can run the Flash movie locally, you can embed the viewer in a web document, you can embed the viewer in a PDF file, or you can run the viewer from here.
To run the viewer locally, you must place the XML file you want to visualize in the same directory as the FNV.swf file. The XML file must be named network.xml or the viewer will not display the network.
To incorporate the flash viewer into a web page you can embed it using the HTML code listed below. There are two ways to load the network into the viewer. Follow the same procedure as when using FNV locally (naming the network, network.xml and placing it in the same directory as FNV.swf file) or by feeding a network name into the viewer using Flash vars. Simply replace the networkGENERATED.xml filename in the code below with the filename of the network you wish to visualize.
Note: The viewer has full screen functionality that won’t be enabled unless the allowfullscreen attribute is set to true.
XML File Syntax
XML files read by the viewer have this basic structure:
Network Element
The network element attributes’ control the aesthetics of the network and the underlying algorithm used to render the network. Color Codes:
The viewer requires that all colors be defined using hexadecimal values. Unlike color codes used in HTML these values must start with a “0x” instead of a “#”. The three pairs of two digit hex values represent red, green, and blue. More information about hexadecimal color codes including a color picker can be found here.
Attributes
name – Used to assign a name to the network.
backgroundcolor – A hex color code which specifies the background for the network.
nodeselectioncolor – A hex color code which specifies the highlight color of the node when the node is hovered over.
edgeselectioncolor – A hex color code which specifies the highlight color of the edge when hovered over.
fade – A Boolean (true or false) value that turns subnetwork fading on mouseover on or off.
description – A Boolean (true or false) value that adds or removes the description box.
doubleclick – A Boolean (true or false) value used to enable full screen mode.
layoutmode – Allows for the selection of a graph drawing algorithm. All of the graph drawing algorithms render planar straight-line drawings.
Note: with the exception of the predefined graph algorithm all graphs with more than 70 nodes will be drawing using the default algorithm potentially producing undesired results.
layoutmode options:
predefined - Allows the user to specify their own position, in pixels, for each node. Additional attributes xPos and yPos need to be added to the node representing the x position on the page and the y pixel position on the page. This mode is the preferred method for visualizing large networks.
force - Positions the nodes using attraction and repulsion forces so that all the edges are roughly equal in length while attempting to minimize edge overlap. When dragging and repositioning a node the force of repulsion may reposition some of the surrounding nodes.
hierarchy - Arranges a directed graph into layers flowing from a source nodes to sink nodes.
radial - Arranges the network circularly around a root node. The additional attribute layer can be used to set the positions of the nodes in the circle. Layer 0 represents the center of the circle while larger layer values are placed at increasingly larger radii from the center.
spectral - Renders the network using eigenvectors of the adjacency matrix associated with the graph. Attempts to reduce edge overlap.
spectral-hierarchy - This option first arranges the nodes hierarchically then arranges each layer in the hierarchy using the eigenvectors of the adjacency matrix.
default - When no valid option is entered the viewer simply places all nodes in a stack on top of each other.
Node Element
The node element is used to create nodes for the graph. The attributes allow users to specify the aesthetics of the nodes (which can be used to distinguish classes of nodes), provide additional information to the chosen layout algorithm, and add a hyperlink to be displayed within the description box.
Note: Since FNV was designed to visualize small to moderately sized networks it is not recommended that users create more than 70 nodes, unless the predefined graph drawing algorithm is used.
Attributes
id – Unique number used to identify the node. IMPORTANT: Node ids must be numeric, in order, start with 1, and increment by one with no skipping.
name – Name of the node which is displayed on the node.
bgcolor – A hex color code which specifies the background color of the node, useful for delineating node types.
url – (optional) A link that will automatically open when the node description is clicked.
shape – Used to specify node shape can be used to distinguish particular types of nodes.
Options: box, circle, roundbox, triangle, and image
textsize – Controls the font size of the name on the node.
textcolor – A hex color code value specifying the color of the text on the node.
Node Specific Attributes
nodesize – When circle nodes are created this option can be used to set the diameter.
imageurl – When image node is selected the option specifies the location of the image to be used.
Layout Algorithm Specific Attributes
level – Used only when the radial layout mode is selected. Levels represent distance from the radius, therefore level 0 is in the center of the circle.
xPos – Used only when the predefined option is selected. Specifies in pixels the x coordinate for the location of the node.
yPos – Used only when the predefined option is selected. Specifies in pixels the y coordinate for the location of the node.
A description can be placed in-between the <node> tags enclosed in <desc> tags. This description can contain plain text and images. It is displayed in the description box whenever the node is moused over.
Note: The description is limited to 200 pixels wide. Images wider will be cutoff.
Edge Element
The edge element is used to connect two nodes. The attributes are used to specify the type and look of the edges.
id – Number used to identify the edge.
name – (optional) Used to describe the type of edge.
type – Specifies the type of edge to draw between the source and target nodes.
bidirectional – A solid line attached to two nodes.
arrow – A line that points from the source node to the target node.
ortholine – A line that represents suppression of the target node.
thickness – A positive whole number used to specify the width of the edge.
url – (optional) A link that can be displayed when clicking the edge.
source – The source node’s id number (IMPORTANT: if this is omitted or incorrect a random source node is selected).
target – The target node’s id number (IMPORTANT: if omitted or incorrect edge will not appear).
color – A hex code used to specify the edge color.
A description can also be placed in between the <edge> tags enclosed in <desc> tags. This description, similar to the node description, can contain plain text and images. It is displayed in the description box when the edge is moused over.
Using the Viewer
As discussed in the running and installation instructions the viewer can be run by double clicking on the FNV.swf or embedded within a webpage. Once loaded, the network described by the file network.xml should be displayed. (If nothing is displayed, make sure that the XML file is named network.xml and is in the same directory as FNV.swf. Be sure to also check the syntax of the xml file and make sure that all elements are closed properly and that all edges reference valid nodes.)