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 html as seen 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 (see code below lines highlighted in red). Simply replace
the networkGENERATED.xml filename in the code below with the filename of the network you wish to
visualize, to set the loadFile variable within the Flash viewer.
<object height="548" width="796">
<param value="graphviewer_copy_for_web.swf" name="movie" />
<param value="true" name="allowFullScreen" />
<param value="always" name="allowScriptAccess" />
<param value="loadFile=networkGENERATED.xml" name="FlashVars"
<param value="transparent" name="vmode" />
<embed height="548" width="796" flashvars="loadFile=networkGENERATED.xml"
allowfullscreen="true" allowscriptaccess="always" vmode="transparent"
type="application/x-shockwave-flash" src="graphviewer_copy_for_web.swf" />
Note: The viewer has full screen functionality that won’t be enabled unless the
attribute is set to true.
Embedding the viewer in a pdf file is a more advanced operation and requires that you have several
programs installed on your machine.
Adobe Acrobat 9 Professional or higher. Without this software you will not be able to insert a Flash
movie into a pdf.
An ActionScript 3.0 compiler. We recommend using Adobe Flash CS4 Professional but a free Flex 4
compiler is also available from Adobe.
A functional xml network that does not have any TRIANGLE nodes. A network with triangle nodes will
not display when the viewer is embedded in a pdf.
Optional: Python 2.7 to utilize the automated embedding script.
Embedding Using the Python Script
If you have a functional network with no triangle nodes and all of the above software and want to continue,
locate the “FNV for embedding” folder which was included in the downloaded archive. Those familiar with
the source code for FNV will notice that one of the files
is missing from the folder. You will
also notice that an extra file
has taken its place.
is the file in which the
, will use to create
. It is VERY important that you do not edit
if you intend to use the python script for embedding. (If you wish to manually insert a
then read the next section below.) Double click the python script to execute
it. Once the python script is running you will be prompted to enter a file name.
Enter the filename where the
network xml file is that you want
to visualize and press enter. Once
the script executes a new
file with an
embedded network should be
generated and is ready to be
Embedding Without Using the Python Script
If you wish to bypass the script use you can manually edit
. First copy the contents of
into a new file and name it
. Secondly find the line with the comment,
" The next line should contain the text, "
var myXML:XML = new XML();
the network between the parentheses in the format of a string, do not forget to escape the quotation marks
inside the string.
Compiling the ActionScript files
To compile using Flash CS4, open the FNV.fla file and select test movie. You should now see an FNV.swf file in
the directory with your ActionScript files. Double click the FNV.swf file to make sure the network is displaying.
If no network is visible make sure that the network xml file embedded has the correct syntax and try again.
Once the embedded network is displaying, it is ready to be imported into the pdf.
Inserting the Flash movie in a pdf
Create a new Adobe Acrobat 9 file or open an existing one and navigate to tools‐>multimedia‐>flash tool.
Draw an area on the pdf where you want to place the FNV. You will then be prompted to browse for the .swf
file, find FNV.swf and select it. Select the arrow tool and press the play button to make sure the movie works.
If the FNV controls display but no network, make sure that no triangle nodes are in the embedded network,
and try again.
XML File Syntax
XML files read by the viewer have the following basic structure:
The network element attributes’ control the aesthetics of the network and the underlying
algorithm used to render the network.
<network name=“my network” backgroundcolor=“0xFFFFFF”
nodeselectioncolor=“0xF76541" edgeselectioncolor="0x6698FF" fade=”true”
description=”true” doubleclick="true" layoutmode="force">
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
– Used to assign a name to the network.
– A hex color code which specifies the background for the network.
– A hex color code which specifies the highlight color of the node when the node
is hovered over.
– A hex color code which specifies the highlight color of the edge when hovered over.
– A Boolean (true or false) value that turns subnetwork fading on mouseover on or off.
– A Boolean (true or false) value that adds or removes the description box.
– A Boolean (true or false) value used to enable full screen mode.
– 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
Allows the user to specify their own position, in pixels, for each node.
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 networks over 100 nodes.
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
Figure 1. An undirected graph drawn using the force algorithm.
Arranges a directed graph into layers flowing from a source node to one or more sink
Figure 2. A directed graph drawn using the hierarchy algorithm.
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.
Figure 3. An undirected graph with two layers, 0 and 1.
Renders the network using eigenvectors of the adjacency matrix associated with the
graph. Attempts to reduce edge overlap.
Figure 4. A directed graph drawn using the spectral algorithm.
This option first arranges the nodes hierarchically then arranges each
layer in the hierarchy using the eigenvectors of the adjacency matrix.
Figure 5. A directed graph drawn using the spectral‐hierarchy algorithm.
When no valid option is entered the viewer simply places all nodes in a stack on top
of each other.
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
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.
<node id="1" name="SRI" bgcolor="0xbbbbff"
textsize="12" textcolor="0x000000" level="0">
<node id="2" name="Dopamine" bgcolor="0xFF9999"
textsize="20" textcolor="0x330000" nodesize=”3” xPos="750" yPos="0">
Unique number used to identify the node.
(IMPORTANT: Node ids must be numeric, in order, start with 1, and increment by one with
Name of the node which is displayed on the node.
– A hex color code which specifies the background color of the node, useful for delineating
(optional) A link that will automatically open when the node description is clicked.
Used to specify node shape can be used to distinguish particular types of nodes.
Alternatively an image can be used by using the
– Controls the font size of the name on the node.
– A hex color code value specifying the color of the text on the node.
Node Specific Attributes:
– When circle nodes are created this option can be used to set the diameter.
– When image node is selected the option specifies the location of the image to be used.
Layout Algorithm Specific Attributes:
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.
Used only when the predefined option is selected. Specifies in pixels the x coordinate
for the location of the node.
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
tags enclosed in
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 400 pixels wide. Images wider will be cutoff.
The edge element is used to connect two nodes. The attributes are used to specify the type and look of the
<edge id="1" name="Binding" type="bidirect" thickness="3" url=""
<edge id="2" name="Regulation" type="arrow"
– Number used to identify the edge.
– (optional) Used to describe the type of edge.
– Specifies the type of edge to draw between the source and target nodes.
– A solid line attached to two nodes.
Figure 6. A bidirectional line signifying a non‐covalent interaction between two proteins CRK and C3G.
– A line that points from the source node to the target node.
Figure 7. An arrow signifying an interaction between a ligand and a protein.
– A line that represents suppression of the target node.
Figure 8. A protein‐protein interaction in which G_alpha_o suppresses Rap1GAP.
– A positive whole number used to specify the width of the edge.
– (optional) A link that can be displayed when clicking the edge.
– The source node’s id number (IMPORTANT: if this is omitted or incorrect a random source node is
– The target node’s id number (IMPORTANT: if omitted or incorrect edge will not appear).
– 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
graphviewer.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 graphviewer.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.)
Documents you may be interested
Documents you may be interested