Web Developers Portal: cytoscape web

prerequestics:

you should install cytoscape web and adjust the javascript src path to the path where you extracted Cytoscape Web. set swfPath and flashInstallerPath correctly .
If you are facing any difficulties in setting the path, please refer Cytoscape web tutorial

Drawing a simple network with values on nodes

Drawing a network with nodes of different size

Drawing a network with different colored nodes and edges

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
            <script type="text/javascript" src="js/AC_OETags.min.js"></script>
            <script type="text/javascript" src="js/json2.min.js"></script>
            <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
        </head>
<script type="text/javascript">
window.onload=function() {
            // network data could alternatively be grabbed via ajax
     var xml = '\
    <graphml>\
    <key id="label" for="all" attr.name="label" attr.type="string"/>\
    <key id="weight" for="node" attr.name="weight" attr.type="double"/>\
    <graph edgedefault="undirected">\
        <node id="1"><data key="label">1</data><data key="weight">.7</data></node>\
        <node id="2"><data key="label">2</data><data key="weight">.5</data></node>\
        <node id="3"><data key="label">3</data><data key="weight">.5</data></node>\
        <node id="4"><data key="label">4</data><data key="weight">.5</data></node>\
        <node id="5"><data key="label">5</data><data key="weight">.2</data></node>\
        <node id="6"><data key="label">6</data><data key="weight">.2</data></node>\
        <edge source="1" target="2" id="gene"></edge>\
        <edge source="2" target="3" id="gene"></edge>\
        <edge source="4" target="5" id="gene"></edge>\
        <edge source="3" target="4" id="miR"></edge>\
        <edge source="6" target="5" id="miR"></edge>\
        <edge source="4" target="2" id="miR1"></edge>\
        <edge source="6" target="1" id="miR1"></edge>\
    </graph>\
    </graphml>\
    ';

            // init and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };

                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);

             // visual style we will use
                var visual_style = {
                    global: {
                        backgroundColor: "#ABCFD6"
                    },
                    nodes: {
                        shape: "circle",
                        borderWidth: 2,
                        borderColor: "#ffffff",
                        // setting different size to the nodes
                        size: {
                            defaultValue: 20,
                            continuousMapper: { attrName: "weight", minValue: 30, maxValue: 60 }
                        },
                        //setting different color to the node
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "1",
                                    value : "red"
                                }, {
                                    attrValue : "2",
                                    value : "gray"
                                }, {
                                    attrValue : "3",
                                    value : "gray"
                                }, {
                                    attrValue : "4",
                                    value : "gray"
                                }, {
                                    attrValue : "5",
                                    value : "yellow"
                                }, {
                                    attrValue : "6",
                                    value : "yellow"
                                } ]
                            }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges : {
                        width : 2,
                        //setting different color to the edges
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "gene",
                                    value : "red"
                                }, {
                                    attrValue : "miR",
                                    value : "white"
                                }, {
                                    attrValue : "miR1",
                                    value : "blue"
                                } ]
                            }
                        }
                    }
                };

                var draw_options = {
                    // your data goes here
                    network: xml,

                    // show edge labels too
                    edgeLabelsVisible: false,


                 // set the style at initialisation
                    visualStyle : visual_style,

                    // circle layout for nodes
                    layout: "circle",

                    // hide pan zoom
                    panZoomControlVisible: true
                };

                vis.draw(draw_options);

            };
            </script>

            <style>
                /* The Cytoscape Web container must have its dimensions set. */
                html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
                #cytoscapeweb { width: 100%; height: 100%; }
            </style>
        </head>

        <body>
            <div id="cytoscapeweb">
                Cytoscape Web will replace the contents of this div with your graph.
            </div>
        </body>

    </html>

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

http://cytoscapeweb.cytoscape.org/download.

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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<title>Cytoscape Web example</title>

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 });

};

</script>

<style>

/* The Cytoscape Web container must have its dimensions set. */

html, body { height: 100%; width: 100%; padding: 0; margin: 0; }

#cytoscapeweb { width: 100%; height: 100%; }

</style>

</head>

<body>

Cytoscape Web will replace the contents of this div with your graph.

</div>

</body>

</html>

I have save the above example as NewFile.html .

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

Web Developers Portal

Sunday 11 March 2012

Cytoscape Web Examples

Cytoscape Web Tutorial