This project has been replaced by Cytoscape.js, and is no longer active.


What does Cytoscape Web do?

Cytoscape Web is a network visualisation library that you can use to embed networks onto a webpage. It is not a stand alone application for users; it is a tool for developers to display networks on the web.

What are the minimum system requirements for end users?

End users need a modern browser with the Flash plugin installed. Cytoscape Web is tested on the latest versions of Chrome (OS X, Windows, Ubuntu), Firefox (OS X, Windows, Ubuntu), Safari (OS X), and Internet Explorer (Windows).

What is the license of Cytoscape Web?

Cytoscape Web is an open source project under the LGPL.

How do I reference Cytoscape Web?

You can find reference information and the publication itself on Pubmed. If you want to link to Cytoscape web, please see the About section.

Development background

What development skills should I have to use Cytoscape Web?

To use Cytoscape Web, you should be very familiar with HTML and Javascript. You do not need to program in Flash, but you should know Javascript and DOM manipulation very well if you plan on using the more advanced features of Cytoscape Web or you plan to build a web app around Cytoscape Web.

What technologies is Cytoscape Web made from?

Cytoscape Web is a Flash component with a Javascript API.

Do I need to be a Flash developer to use Cytoscape Web?

No, you do not need to know any Flash. Cytoscape Web's API is all Javascript.


I tried to open the Cytoscape Web SWF file. Why doesn't it work?

Cytoscape Web is a library, not an application. You need to use the Javascript API to embed Cytoscape Web in a webpage. You can not open the SWF file.

I copied the example from the tutorial and it doesn't work! Why?

Set your Flash security settings properly, or deploy the HTML file to a webserver, like Apache.

Loading networks

What network formats does Cytoscape Web support?

Cytoscape Web supports GraphML, XGMML, and SIF.

My favourite network format isn't supported? What can I do?

You can either write some code that translates your networks into a supported format on-the-fly, or you could add it to Cytoscape Web itself. Cytoscape Web is an open source project, so feel free to check out the source and try things out!

Can I load a network from Javascript objects instead of a file?

Yes, see the API reference for more information.

Can I modify the network programmatically?

Yes, you can add and remove nodes and edges programmatically using addEdge, addNode, removeEdge, and removeNode. Note that these functions are slow when applied in iteration on many elements.

Can I load a network from a URL?

Cytoscape Web does not support this feature directly, but you can implement it yourself easily. Use AJAX to pull the file you want into a string in Javascript, and then pass that string to Cytoscape Web. jQuery is a good library for this.

Interacting with Cytoscape Web

I added a listener, changed the data schema, filtered, or called some function on Cytoscape Web. Why isn't it working?

You need to call new, ready, and draw in that order with interactions with Cytoscape Web within the ready callback. All interaction with Cytoscape Web has to occur within the callback function passed to the ready function. See the tutorial for an example.

What formats can I export the network to?

PDF, PNG, GraphML, XGMML, and SIF are supported.

How do I make a node edge link to somewhere?

You can perform any action you want on mouse click of a node or edge. See the documentation for more information

Customizing visual styles

What options do I have to change the visual style?

See the API reference.

Can I change the visual style after the network has been drawn?

Yes, use visualStyle.

How do I set the visual style to be dependent on the network data?

Use a mapper.

Can I set the edge length to be dependent on an attribute?

Not precisely. You can use an edge weighted layout, but the lengths will only be approximate based on the weight attribute.

Can I load images into Cytoscape Web?

Yes, but only for nodes. See the VisualStyle object for more.

Modifying network data

How do I change node or edge attribute values after the graph is drawn?

Use updateData.

How can I add a new node or edge attribute to an existing network?

Use addDataField.

How can I delete a node or edge attribute?

Use removeDataField.

How can I add nodes and edges to an existing network?

Use addEdge and addNode.

How can I delete nodes and edges from a network?

Use removeEdge and and removeNode.


What layouts does Cytoscape Web support?

See the API for details.

Can I customize the layout parameters?

Yes, see the API for details.

Why is the force-directed layout not animated?

It's computationally expensive such that large networks become unresponsive even on modern computers.

Does the force-directed layout support an edge-weighted option?

Yes, see weightAttr in the API.

Can I use my own custom layout algorithm?

Yes, calculate your layout and pass it to Cytoscape Web as a preset layout. You can calculate it on the client side with Javascript or on the server side with Java, PHP, and so on.