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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<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 });
};
</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>
I have save the above example as NewFile.html .
No comments:
Post a Comment