Sunday, 11 March 2012

Cytoscape Web Examples

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

<!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">1.8</data></node>\
        <node id="2"><data key="label">2</data><data key="weight">1.1</data></node>\
        <node id="3"><data key="label">3</data><data key="weight">1.1</data></node>\
        <node id="4"><data key="label">4</data><data key="weight">1.1</data></node>\
        <node id="5"><data key="label">5</data><data key="weight">.3</data></node>\
        <node id="6"><data key="label">6</data><data key="weight">.3</data></node>\
        <edge source="1" target="2" ></edge>\
        <edge source="2" target="3" ></edge>\
        <edge source="4" target="5" ></edge>\
        <edge source="3" target="4" ></edge>\
        <edge source="6" target="5" ></edge>\
        <edge source="4" target="2" ></edge>\
        <edge source="6" target="1" ></edge>\
    </graph>\
    </graphml>\
    ';
                           
            // init and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };
                                                           
                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);
               
                var draw_options = {
                    // your data goes here
                    network: xml,
                   
                    // show edge labels too
                    edgeLabelsVisible: false,
                   
                    edgeTooltipsEnabled:true,
                  
                    // let's try another layout
                    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>



The above example will draw a network with 6 nodes and 7 edges.

















Drawing a network with nodes of different size

<!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" ></edge>\
        <edge source="2" target="3" ></edge>\
        <edge source="4" target="5" ></edge>\
        <edge source="3" target="4" ></edge>\
        <edge source="6" target="5" ></edge>\
        <edge source="4" target="2" ></edge>\
        <edge source="6" target="1" ></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 }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges: {
                        width: 1,
                        color: "#0B94B1"
                    }
                };
               
                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>
























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>