Importing data
Using the circle layout
Using the sorting tree view
Using the force layout
Using the stack layout
Using the timeline layout
Exploring the degree distribution


How big are the networks that can be visualized using TVNViewer?

For node to node networks, TVNViewer can upload networks of up to 500 nodes. For larger networks, use the 2-level network. You can load networks of up to 5000 nodes with 100 descriptors. Please note that the number of time points is limited to 50. Please note that with 5000 nodes, expanding a descriptor category may be very slow or unresponsive.

I am having problems loading in multiple datasets simultaneously

We recommend using only one tab per browser for the best performance, although some functionality is preserved with multiple tabs. Use at your own risk. :)

Can I view the source code or use it for my own project?

Yes, the code is available here. This is the main application built using Flex Builder 4. This version is not integrated with a website, but has all the functionality of the TVNViewer. Feel free to email me if you have questions. By downloading the code, you agree to read and follow the TVNViewer license found in the distribution.

Importing Data

To import data, the user clicks on the “Upload” button in the bottom right corner of the TVNViewer. This will bring them to a webform where they can choose their options to upload their data.

The user can choose to format their data in a tab-delimited format or in an xml-based format. Examples for each type of format are available from the import dialog. The user needs to select from among the three types of networks: 1) A two-level network where all nodes are categorized by one or more descriptors, 2) A node-node interaction network, or 3) a node-node interaction network that can be divided into two groups for display purposes.

By selecting the appropriate project type, the user is then presented with the appropriate files that they need to load in their data. By hovering over any of the web controls, a tool tip will show explaining the particular field for the user’s convenience. In summary, a user basically needs a file with a list of all nodes in the graph and a zip file containing all of the networks in the time or space series.

Once the user has chosen the variables and files necessary for their graph type, they can hit the Upload button and return to the Viewer. They can rename or delete projects that they have loaded in as well.

Circle Layout

Changing Views
The circle view layout is the first view that shows when the user clicks to open up the project. All controls for the circle layout are under the visualization tab. Here the user can also change views to one of the other views by choosing a different view in the drop down menu at the top of the tab.

Screen shots
At any time from any view, the user can take a screen shot of what they see on the screen. The visualization will create a .png file and bring up a dialog to store the image on the user’s desktop. Unfortunately this can only happen one image at a time given Flash constraints. There are two buttons in the circle view to take screen shots. The take screenshot button at the top takes a screen shot of the current visualization and does nothing else. If users are interested to take a screen shot as a series, they can use the shoot screen++ button. This will take a screen shot and update the time. In this way, the user can just hit this button over and over to take screen shots of all times.

Scrolling through time
The user can change between the different states in the project’s series of graphs through the slider control. The label of the current time is shown as the user selects the different times. The user can click at the time point they wish to view, or they can manually drag the slider. Additionally, the user can play through the series starting at the current graph. They do this by hitting the blue play button. The time interval box controls how fast application moves through the series. 500 represents half a second, while 1000 represents one second.

Font and node controls
The user can change the node size manually, and they can also adjust the font size. As they adjust the font size and node size, the visualization will automatically update its size so that it will still fit on the screen. Additionally, the user has the option to show the nodes in a relative size. This means that nodes with a higher degree will be larger while nodes with a smaller degree will be porportionately smaller. The user can also turn on and off the labels of the graph.

Edge weighting
TVNViewer automatically thresholds which edges are visible in the graph. For large graphs, to show all of the edges can be unnecessarily cluttered. However, the users have control to add or remove edges once the graph has been created. This is done with the two sliders labeled Min and Max Edge Val. As the user slides the Min Edge Val slider, the threshold for removing an edge is changed, which will add or remove edges from the graph. As the Max Edge Val slider is changed, the threshold for what the darkest edge will be is changed. The opacity of edges which are higher than the min val is calculated as min((val – min)/(max – min),1), where the opacity ranges from 0 to 1.

TVNViewer users may wish to remove longer labels, all of the labels but their favorite node, or just show a handful of lables. They can do this through the label controls. If the user hits the “Label First Click” button, the first node that they click will retain its label, but all other labels will be turned off. Additionally, the user can turn on the “Click=Label” button and then each node they click will have its label turned off. If the label is already turned off for that node, all nodes will have their label turned back on.

Hovering over the graph
As the user moves the mouse over the nodes in the graph, the edges for the highlighted node will light up in the color to show what they are. In edges will be shown in red, out edges will be shown in green, and bi-directional edges are shown in cyan. If the user wants to hold the coloring for a node, they can click that node and it the graph will be colored until the user either selects a different node or clicks on empty white space within the graph. The user can control how many levels of connected nodes are shown using the Selection Depth to Show slider. A value of 1 will only show those nodes directly connected to the selected node, while 2 will show all nodes connected to the selected node and all of their neighbors. And so on.

Viewing the second level of a group
In the 2 level plot, at any time the user can double click on a node and the node will expand to show all the sub nodes that have been assigned to that group and thier edges. To close the group, double click on another group to open that group, or double click on any of the sub nodes displayed.
Edge Thickness
Edge thickness can be changed using the appropriate slider. This acts the same as the node size slider and the font slider, but adjusts how thick the edges display. Weights are visualized by the opacity of the edge.

Sorting Tree View

The sorting tree view allows TVNViewer users to see how the circle view was laid out and colored. When the nodes are read in, they are clustered using Flare’s hierarchical clustering (on the first time point). The clustering algorithm sorts on connectedness between nodes. Once the tree is created, TVNViewer goes down a couple of levels and assigns each branch a color. Nodes are then assigned colors based on their position in the subtree relative to the tree. The sorting tree view allows users to see how their genes were sorted and colored. This feature is only available for the first graph in the series. A few of the circle viewer controls are also available for the SortingTree Layout.

Force Layout

The force layout displays the networks in Flare’s ball and spring model. Edges are springs that pull the nodes together, and the balls repel each other. This can create a fairly intuitive layout to view the different networks.

All controls from the circle view apply to the force layout with only a couple exceptions. The user cannot single click to highlight a node’s edges, although hover still works. Instead, a user can single click onto a subnetwork in the graph at any time. The spring constant will be loosed and all other nodes not connect to the subnetwork will disappear. This will allow the subnetwork to blow up and fill the screen. The user can click on white space at any time to return to the normal view.

The force view will continue to update unless the user turns off the updates check box in the controls.

Stack Layout

The stack view shows the user how the degree of the nodes changes across time. This plot allows the user to see how the overall degree changes as well as the degree of the individual nodes. The user can hover over the graph to find out the exact degree of each node at each time.

Although there are not many controls for the stack layout, the user can filter on the nodes that are seen. One way to do this is to select a specific node that the user is interested in from the legend by clicking on it. Additionally, the user can type into the filter box a list of filters, separated by commans. For example, “c,m” will show all nodes that begin with a c or an m. In the case of a 2-level plot, the user can decide to filter on the subnodes, allowing the user to see how one specific gene changes degree over time instead of just considering the GO category.

Timeline Layout

The timeline layout is the same data as the Stack Layout, and the controls are also the same. This allows the user to see the degree as it changes over time for each node, instead of having them stacked on top of each other.

Degree Distribution Layout

The user can explore the degree distribution. This may be interesting if the user wants to know if the out degree distribution follows a scale-free distribution (as is common for genetic networks). In TVNViewer we plot the Degree of the node against the Count of the number of nodes that have that Degree. There are a few controls that allow the user to explore the degree distribution. The user can choose to view the distribution on a log scale or not. Additionally, they can view the overall average of the distribution, or they can look at each stage individually and explore how the distribution changes over time.