Methods: Cytoscape Web

Instruction on building a basic Cytoscape Web visualization can be found on the Tutorial page of the Cytoscape Web home page. The basic outline is to download the Library, upload the unzipped JavaScript and SWF files into your development platform, and code the components into your target web page. There are three steps to the initialization of the API:

Step 1: Reference the JavaScript Files. Create a CSS file or load styles via the <style> tag.
Step 2: Build the initialization JavaScript using the <script> tag.
Step 3: Build the container for the graph using a <div>.

The end result will be a basic shell for your data.

Code Block	Description
<html xmlns="http://www.w3.org/1999/xhtml">	The XML Namespace declaration
<head>	Header opening tag
<title>My Webpage Title</title>	Page title tag

<script src="../js/AC_OETags.js"></script>	Cytoscape Tags JavaScript Reference
<script src="../js/json2.js"></script>	Cytoscape JSON JavaScript Reference
<script src="../js/cytoscapeweb.js"></script>	Cytoscape API Reference
<script type="text/javascript">	Cytoscape implementation script open tag
window.onload = function () {	The onload event function triggered during page load
var div_id = "cytoscapeweb";	Variable that identifies the division ID that the graph will be displayed
var network_json = { };	The variable that contains the data
var options = {	The variable that defines options to the graph
swfPath: "/swf/CytoscapeWeb",	Identifies the location of the Cytoscape SWF file
flashInstallerPath: "/swf/playerProductInstall"	Identifies the location of the Flash Player file
};	Closes the Option element of the graph
var vis = new org.cytoscapeweb.Visualization(div_id, options);	The variable that defines the visualization elements
vis.draw({ network: network_json });	The function that draws the graph
};	The function closing element
</script>	The script closing tag
<style>#cytoscapeweb { width: 100%; height: 100%; }</style>	The stylesheet element for the graph div
</head>	The head closing tag
<body>	The body opening tag
<div> id="cytoscapeweb"></div>	The div implementing the graph
</body>	Closing body tag
</html>	Closing html tag

The core of Cytoscape is the data used to form edge and node graphs. Cytoscape Web supports GraphML, XGMML, SIF, and JSON. It uses a NetworkModel that defines the raw data (nodes and edges data values) and a data schema for build the network. Nodes positioning are done by Layout objects.

The node object represents a Node type. The edge object represents an Edge type. The attribute group must always be edge. The code used to form the example is a JSON structure.

data: {
    nodes: [
         {id: "1"},
         {id: "2"}
     ]
     edges: [
         {id: "1to2", target: "2", source: "1"}
     ]
};

This basic form can be expanded by using the dataSchema element. For our example, the dataSchema was developed to support the added textual elements.

dataSchema: {
    nodes: [nodes: [
         { name: "label", type: "string" },
         { name: "class", type: "string" },
         { name: "notes", type: "string" },
         { name: "Member", type: "string" }
    ]
},

The final form for example data element looks like:

var network_json = {
  dataSchema: {
    nodes: [nodes: [
         { name: "label", type: "string" },
         { name: "class", type: "string" },
         { name: "notes", type: "string" },
         { name: "Member", type: "string" }
    ]
  },
  data: {
    nodes: [
         { id: "1", label: "Supreme Shura Council", class: "Leadership", notes: "17 Members", Member: "Hassan Nasrullah, Naim Qassem, Sayyed Hashem Safi al-Din, "},
         { id: "2", label: "General and Deputy Secretary", class: "Leadership", notes: "Appointed by Shura Council", Member: "Hassan Nasrullah, Naim Qassem" },
         { id: "3", label: "Executive Committee", class: "Leadership", notes: "9 Members", Member: "Ali Fayyad" },
         { id: "4", label: "Politburo", class: "Leadership", notes: "15 Members", Member: "Ibrahim Amin al-Sayyed, Mahmoud Qmati, Ali Mayta" },
         { id: "5", label: "Security Organ", class: "Security", notes: "" },
         { id: "6", label: "Jihad Al-Bina", class: "Reconstruction", notes: "Holy Reconstruction Organ" },
         { id: "7", label: "Enforcement, Recruitment, and Propaganda Organ", class: "Support", notes: "" },
         { id: "8", label: "Combat Organ", class: "Military", notes: "" },
         { id: "9", label: "al-Muqawamah al-Islamiyyah", class: "Military", notes: "Islamic Resistance" },
         { id: "10", label: "al-Jihad al-Islami", class: "Military", notes: "Islamic Holy War" },
         { id: "11", label: "Operational Security", class: "Security",notes: "" },
         { id: "12", label: "Central Security", class: "Security", notes: "" },
         { id: "13", label: "Party Security", class: "Security", notes: "" },
         { id: "14", label: "Technical Administrative Committee", class: "Reconstruction", notes: "" },
         { id: "15", label: "Mosque Preachers", class: "Support", notes: "" },
         { id: "16", label: "Hawzat", class: "Support", notes: "Circles of Learning" },
         { id: "17", label: "Mass Media", class: "Support", notes: "" },
         { id: "18", label: "Agricultural Committee", class: "Reconstruction", notes: "" },
         { id: "19", label: "Power Resources Committee", class: "Reconstruction", notes: "" },
         { id: "20", label: "Water Resources Committee", class: "Reconstruction", notes: "" },
         { id: "21", label: "Islamic Health Committee", class: "Reconstruction", notes: "" },
         { id: "22", label: "Financial Aid Committee", class: "Reconstruction", notes: "" },
         { id: "23", label: "Reconstruction Committee", class: "Reconstruction", notes: "" },
         { id: "24", label: "Environmental Committee", class: "Reconstruction", notes: "" },
    ],
    edges: [
         { id: "1to2", target: "2", source: "1" },
         { id: "2to3", target: "3", source: "2" },
         { id: "3to4", target: "4", source: "3" },
         { id: "4to5", target: "5", source: "4" },
         { id: "4to6", target: "6", source: "4" },
         { id: "4to7", target: "7", source: "4" },
         { id: "1to8", target: "8", source: "1" },
         { id: "8to9", target: "9", source: "8" },
         { id: "8to10", target: "10", source: "8" },
         { id: "5to11", target: "11", source: "5" },
         { id: "5to12", target: "12", source: "5" },
         { id: "5to13", target: "13", source: "5" },
         { id: "6to14", target: "14", source: "6" },
         { id: "7to15", target: "15", source: "7" },
         { id: "7to16", target: "16", source: "7" },
         { id: "7to17", target: "17", source: "7" },
         { id: "14to18", target: "18", source: "14" },
         { id: "14to19", target: "19", source: "14" },
         { id: "14to20", target: "20", source: "14" },
         { id: "14to21", target: "21", source: "14" },
         { id: "14to22", target: "22", source: "14" },
         { id: "14to23", target: "23", source: "14" },
         { id: "14to24", target: "24", source: "14" }
    ]
  }
};