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>
