Documentation

General
Nodes
Labels
Color
Shape
Edges
Layouts
Download Visualization
Interactions
Mouseover
Dragging and moving
Node Deletion
Node Search
KEGG Pathways

Graph comparison
Heatmap
Merge

General

BioGraphVisart is a web-based tool to interactively visualize networks, especially with biological background. It is written in javascript based on Cytoscape.js.

The input is a graphml-file (graphml-example) or sif-file (sif-example). In addition to nodes and edges (genes and interaction types, respectibvely), GraphML can store information such as expression values as node attributes (more on GraphML Format). SIF cannot store additional information (more on SIF Format).

Nodes

Nodes are usually human genes but can be something different with restricted options of visualisation and additional information.

Node Labels

The labels of the nodes are taken from the node attribute <data key="v_symbol"<...</data> (if gene symbols available) or <data key=<"v_name">...</data> (otherwise).

Node Colour

Nodes are colored by numeric or boolean attribute values you can select from the drop-down menu Select Coloring Attribute. By default the nodes are colored by the first attribute listed in the .graphml. If no such attributes are available the nodes are white. The legend node in the graph displays the selected attribute's name and the value range (blue: low values/false, red: high values/true, white: 0 or undefined).

Node Shape

In addition, the node shape can be changed according to boolean node attributes. Select the attribute from the second drop-down menu Select Shape Attribute and select the shape from Select Shape drop-down menu. If the attribute is true for a node, the shape is changed accordingly.

Edges

Edges are interactions between nodes taken from the edge attribute <data key="e_interaction">...</data>. Edge arrows representation depends on the interaction type (see kegg.js) and is shown in the table Interactions. If two nodes are connected by multiple edges, these edges are collapsed into one by default and can be expanded by activating Multiple interactions.

Activation, Expression
Inhibition, Repression
Compound
Indirect effect
State change
Missing interaction
Phosphorylation
Dephosphorylation
Glycosylation
Methylation
Ubiquitination
Binding/association, dissociation
Other
Multiple interactions

Layouts

There are multiple layouts available:

• dagre (default):
• DAG (directed acyclic graph) system
• Principles [1]:
1. Expose hierarchical structure in the graph.
2. Avoid visual anomalies that do not convey information about the underlying graph.
3. Keep edges short.
4. Favor symmetry and balance.
• klay:
• Kieler Layouters component [2]
• Layer-based layout algorithm
• Best suited for node-link diagrams with an inherent data flow direction
• breadthfirst:
• Hierarchical
• Based on a breadthfirst traversal
• Best suited for trees and forests
• cose-bilkent:
• CoSE (Compound Spring Embedder) layout developed in Bilkent University
• spring embedder layout
• grid:
• simple layout that arranges all of the nodes in a square grid

Download Visualization

The generated graph can be downloaded as png, svg or json. The complete page can be downloaded as .pdf. A file name can be given (without file ending) but it is not necessary. If no file name given, the graph is stored as <filename>_<attribute><png,svg,json>. The json-file can be used to save the current status of the graph and can be loaded back in again for further interactive visualization instead of loading the native .graphml.

Interaction

Mouseover

Moving the mouse over a node displays the attributes value and the node name, over an edge it displays the interaction type (important if there are multiple interactions for one edge).

Dragging and moving

The nodes can be draged and moved around. The graph can be zoomed in and out using the mouse wheel/touch pad and also the layout can be reset(button Reset layout).

Node Deletion

Delete nodes and related edges by right clicking on the node of interest and selecting "delete node". Undo deletions by clicking Undo delete.

Node Search

Search a node by entering its name into the field Search gene. If the node is present it will be highlighted with a thick border.

KEGG Pathways

If the nodes have the EntrezID as attribute (<data key="v_entrez">...</data> or <data key="v_entrezID">...</data>), clicking on the button Show KEGG pathways the human pathways the displayed genes/nodes are in are collected from KEGG and the five pathways in which most of the displayed genes are in are listed. These pathways can be selected and the contained genes are highlighted by accordingly colored rectangles. Nodes that are close to each other are assembled in the same rectangle. Depending on the zoom this might cause that nodes are contained that should not be. Zooming in helps to clearify nodes in question. Highlighted pathways can of course be hidden again.

To load the KEGG pathways the Cross-Origin Restrictions need to be disabled. Have a look at the README under "How to run it locally" point 4.

Graph Comparison

For direct comparison of network graphs the node overlap can be calculated and be displayed in a heatmap. Also a merged network graph of two selected network graphs can be generated.

The input are multiple graphml-files.

Heatmap

The heatmap (Highcharts.js) displays the percentage of nodes shared by the networks by name. The heatmap can be downloaded as png, jpeg, pdf, svg selectable in the menu on the top right of the heatmap.

Clicking on a cell of the heatmap the networks belonging to this cell are displayed with the same features as described before.

Merged Graph

The displayed networks are automatically merged and the new network is dislpayed in a new tab/window. Nodes from the previous top network have a orange border, nodes from the other network have a light blue border, respectively. Shared nodes have a black double border and are colored half with the attributes value of the one network and half the other. The KEGG pathways are now calculated for the new merged network.