Sunday, 11 March 2012

Cytoscape Web Tutorial

What is cytoscape web?

 Cytoscape Web is a tool for developers to display networks on the web page. It is a network visualisation library. For using cytoscape web, you should  familiar with HTML and Javascript.

 How to get it?

you can download Cytoscape Web from

Getting started.

1.   Download cytoscape web.
2.   Extract the files.
3.   Open cytoscapeweb_v1.0 which contains 2 subfolders, js and swf.
4.   Copy the files
AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js from js/min (java script files)
CytoscapeWeb.swf, playerProductInstall.swf from swf folder. (flash files)
you need the above 5 files for running cytoscape web.
5.  Download a web server such as apache tomcat. (we can run the cytoscape with out using    the server as       it      is   a simple html.but we need to change the security settings to allow flash to run from the local system. You do not need to change the  security settings if you deploy Cytoscape Web on a web server).
6.     Open apache-tomcat-7.0.23\webapps folder. create a new folder say cytoscape inside webapps.  create  2 folders js and swf in cytoscape. put the files AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js in js folder  and  CytoscapeWeb.swf, playerProductInstall.swf in swf folder.
7.    Start the tomcat server by double clicking startup.bat in apache-tomcat-7.0.23\bin folder
8.    For testing copy the below example in txt file and save it as html file. adjust the Script tag references to the path where you extracted Cytoscape Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
        <title>Cytoscape Web example</title>
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="js/json2.min.js"></script>
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="js/AC_OETags.min.js"></script>
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
        <script type="text/javascript">
            window.onload=function() {
                // id of Cytoscape Web container div
                var div_id = "cytoscapeweb";
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
                var network = {
                    data: {
                        nodes: [ { id: "1" }, { id: "2" }, { id: "3" } ],
                        edges: [ { id: "2to1", target: "1", source: "2" },{ id: "3to2", target: "3", source: "2" } ]
                // initialization options
                var options = {
                    // where you have the Cytoscape Web SWF
                    swfPath: "swf/CytoscapeWeb",
                    // where you have the Flash installer SWF
                    flashInstallerPath: "swf/playerProductInstall"
                // init and draw
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
                vis.draw({ network: network });
            /* The Cytoscape Web container must have its dimensions set. */
            html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
            #cytoscapeweb { width: 100%; height: 100%; }
        <div id="cytoscapeweb">
            Cytoscape Web will replace the contents of this div with your graph.

I have save the above example as NewFile.html .

9. open browser and type url : http://localhost:8080/cytoscape/NewFile.html