CytoGraph

Graph theory visualization application for algorithm testing
Written with Cytoscape JS and several plugins:edgehandles, grid-guide, undo-redo, cxtmenu, and executing scripts in plain JS/JavaScript
Go To CytoGraph

Introduction

Factsheet

About

CytoGraph is a graph theory (a.k.a. network) web app written with Cytoscape.js. You can use CytoGraph to analyze algorithms and visualize graphs in an intuitive way.

The site was created over the summer of 2016 by Brett Settle at the University of California, Irvine.

CytoScape.js Overview

CytoScape.js is a complex graph theory visualization library written in pure JS, and anything in the Cytoscape documentation is usable in the CytoGraph console. Here are a few helpful tools to reference the graph and its elements:

Shorthand Returns
cy the core
cy.elements() The nodes and edges of the graph
cy.nodes() The nodes of the graph
cy.edges() the edges of the graph

For functions that return a value, note that calling a singular — ele, node, or edge — function on a collection of more than one element will return the expected value for only the first element.

Core

Gestures

Cytoscape.js supports several gestures:

Some gestures are only available when a certain tool mode is enabled.

Toolbar

The toolbar is displayed on the left side of the screen and provides an easy way to toggle between managing nodes, drawing edges, removing elements, and other settings

Node Creation
Edge Creation
Erase tool
Undo
Redo

The undo and redo buttons only work on certain types of actions (creating, moving, and removing elements). Select a tool to specify creation or removal of graph elements, or unselect all tools to move elements and pan the view.

Action Tools Gestures
Draw Node , None Tap/click empty space on graph
Draw Edge Drag from one node to another
Move Nodes , None Tap and drag existing node
Erase Elements Tap/click element, box select elements
Edit Label/Text , , None Double tap/click elements

The down arrow will display options for node color, edge color, edge type, node shape, and layout.

Menu Bar

The menu bar is located in the top right corner and enables the user to toggle the console, import and export from the database, and show the settings sidebar to control other interaction settings.

This settings list is minimal and hopefully expanding. Please suggest additions to simplify the graph creation interface.

Layouts

The function of a layout is to set the positions on the nodes in the graph. Layouts are extensions of Cytoscape.js such that it is possible for anyone to write a layout without modifying the library itself.

Several layouts are included with Cytoscape.js by default, and their options are described in the sections that follow with the default values specified. Note that you must set options.name to the name of the layout to specify which one you want to run.

Each layout has its own algorithm for setting the position for each node. This algorithm influences the overall shape of the graph and the lengths of the edges. A layout’s algorithm can be customised by setting its options. Therefore, edge lengths can be controlled by setting the layout options appropriately.

For force-directed (physics) layouts, there is generally an option to set a weight to each edge to affect the relative edge lengths. Edge length can also be affected by options like spacing factors, angles, and overlap avoidance. Setting edge length depends on the particular layout, and some layouts will allow for more precise edge lengths than others.

null

The null layout puts all nodes at (0, 0). It’s useful for debugging purposes.

random

The random layout puts nodes in random positions within the viewport.

preset

The preset layout puts nodes in the positions you specify manually.

grid

The grid layout puts nodes in a well-spaced grid.

circle

The circle layout puts nodes in a circle.

concentric

The concentric layout positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels. This layout sets the concentric value in ele.scratch().

breadthfirst

The breadthfirst layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph.

Getting started

This section will describe how to visualize simple graph networks with the CytoGraph tools.

Create a Simple Graph

In the CytoGraph environment, select the Node Creation tool () and tap locations to draw nodes. Notice that nodes are created with automatic labels. These labels are used as identifiers in the console. Then switch to the Edge Creation () tool, press/mousedown on a node, and drag to a different node (or the same node for a loop) to create an edge.

Prettify

Now that you have a core (graph) instance, use the toolbar to make it stand out. Unselect the current tool so that no tool mode is selected, and tap/click a node to select it for styling. Click the down arrow on the toolbar to show the color options, and click the Node button to choose a new color. Change the color/shape when no element is selected to apply the change to the entire graph.

Console

The console executes a JS script on a duplicate graph in an iframe to visualize algorithms. The console supports any and all uses of javascript commands, for making lists and graph manipulation.

Functions

G(label, [label2])        

Get elements in the graph, by referencing their label. Specify a second label to get the edges between two nodes. This relies on the name value specified by the user, and will return multiple items with matching names.

G( eleName )

Get the node(s) with name label1.

  • label1

    A string object specifying the name to search for.

G( label1, label2 )

Get edges starting at node(s) with name label1 and ending at node(s) with name label2. Same as G(label1).edgesTo(label2)

  • label1

    A string object specifying the name of the source node to search for

  • label2

    A string object specifying the name of the target node to search for

Gf(filter)        

Search for elements in the graph with complex Cytoscape.js filters. Filters can be found here

step(elements)        

Highlight elements in the list in order. Good for visualizing results of algorithms and highlighting paths.

weight(element)        

Return the weight value of a node/edge. This is the floating point value of the label/weight, or one if the label is not numerical.

log(data)        

Log a string to the output area.

Cytoscape Functions

These functions are a necessity when writing your own algorithms, and are extremely versatile. I recommend you read through them if you intend to write custom algorithms.

Algorithms

Pipelined versions of existing Cytoscape.js functions listed below. These simplified versions are friendlier but often more restricted than their parent functions.

bfs() Aliases: BFS(),

Perform a breadth-first search within the elements in the collection.

Cytoscape Algorithms

eles.breadthFirstSearch()      
Aliases: eles.bfs(),

Perform a breadth-first search within the elements in the collection.

eles.depthFirstSearch()      
Aliases: eles.dfs(),

Perform a depth-first search within the elements in the collection.

eles.dijkstra()    

Perform Dijkstra's algorithm on the elements in the collection. This finds the shortest paths to all other nodes in the collection from the root node.

eles.aStar()    

Perform the A* search algorithm on the elements in the collection. This finds the shortest path from the root node to the goal node.

eles.floydWarshall()   

Perform the Floyd Warshall search algorithm on the elements in the collection. This finds the shortest path between all pairs of nodes.

eles.bellmanFord()    

Perform the Bellman-Ford search algorithm on the elements in the collection. This finds the shortest path from the starting node to all other nodes in the collection.

eles.kruskal()    

Perform Kruskal's algorithm on the elements in the collection, returning the minimum spanning tree, assuming undirected edges.

eles.kargerStein()  

Finds the minimum cut in a graph using the Karger-Stein algorithm. The optimal result is found with a high probability, but without guarantee.

eles.pageRank()    

Rank the nodes in the collection using the Page Rank algorithm.

eles.degreeCentrality()      
Aliases: eles.dc(),

Considering only the elements in the calling collection, calculate the degree centrality of the specified root node.

eles.degreeCentralityNormalized()       
Aliases: eles.dcn(), eles.degreeCentralityNormalised(),

Considering only the elements in the calling collection, calculate the normalised degree centrality of the nodes.

eles.closenessCentrality()      
Aliases: eles.cc(),

Considering only the elements in the calling collection, calculate the closeness centrality of the specified root node.

eles.closenessCentralityNormalized()        
Aliases: eles.ccn(), eles.closenessCentralityNormalised(),

Considering only the elements in the calling collection, calculate the closeness centrality of the nodes.

eles.betweennessCentrality()      
Aliases: eles.bc(),

Considering only the elements in the calling collection, calculate the betweenness centrality of the nodes.