From IT Skills
Jump to: navigation, search

Cytoscape is an open source software platform for visualizing molecular interaction networks and biological pathways and integrating these networks with annotations, gene expression profiles and other state data. Although Cytoscape was originally designed for biological research, now it is a general platform for complex network analysis and visualization. A lot of Apps are available


WikiDataScape is a Cytoscape app for interactive browsing of Wikidata.


Gene Ontology available for download... GO slims are subsets of terms in the ontology. GO slims give a broad overview of the ontology content without the detail of the specific fine grained terms. More information in the GO slim guide.


Graph theory / network library for analysis and visualisation

React component for Cytoscape.js network visualisations

Cytoscape supports multiple renderers, but it does not support 3D co-ordinates. Positions are defined as (x, y).

So no WebGL !

Compound nodes[edit]

are an addition to the traditional graph model. A compound node contains a number of child nodes, similar to how a HTML DOM element can contain a number of child elements.

Compound nodes are specified via the parent field in an element’s data.


selector functions similar to a CSS selector on DOM elements, but selectors in Cytoscape.js instead work on collections of graph elements


5 layouts: breadthfirst, circle, concentric, cose, grid, enforce






visual additions[edit]

background image may be applied to a node’s body... PNG, JPG, and SVG are supported formats

context menu with cytoscape... a modern circular swipe menu: a traditional list menu:


Style in Cytoscape.js follows CSS conventions as closely as possible. In most cases, a property has the same name and behaviour as its corresponding CSS namesake. However, the properties in CSS are not sufficient to specify the style of some parts of the graph. In that case, additional properties are introduced that are unique to Cytoscape.js.

 elements: [
    { // node n1
      group: 'nodes', // 'nodes' for a node, 'edges' for an edge
      // NB the group field can be automatically inferred for you but specifying it
      // gives you nice debug messages if you mis-init elements

      data: { // element data (put json serialisable dev data here)
        id: 'n1', // mandatory (string or number) id for each element, assigned automatically on undefined
        parent: 'nparent', // indicates the compound node parent id; not defined => no parent

      // scratchpad data (usually temp or nonserialisable data)
      scratch: {
        foo: 'bar'

      position: { // the model position of the node (optional on init, mandatory after)
        x: 100,
        y: 100

      selected: false, // whether the element is selected (default false)

      selectable: true, // whether the selection state is mutable (default true)

      locked: false, // when locked a node's position is immutable (default false)

      grabbable: true, // whether the node can be grabbed and moved by the user

      classes: 'foo bar' // a space separated list of class names that the element has

    { // node n2
      data: { id: 'n2' },
      renderedPosition: { x: 200, y: 200 } // can alternatively specify position in rendered on-screen pixels

    { // node n3
      data: { id: 'n3', parent: 'nparent' },
      position: { x: 123, y: 234 }

    { // node nparent
      data: { id: 'nparent', position: { x: 200, y: 100 } }

    { // edge e1
      data: {
        id: 'e1',
        // inferred as an edge because `source` and `target` are specified:
        source: 'n1', // the source node id (edge comes from this node)
        target: 'n2'  // the target node id (edge goes to this node)