cytoscape-cose-bilkent

What is cytoscape-cose-bilkent?

The cytoscape-cose-bilkent npm package is a layout algorithm for Cytoscape.js, a graph theory library. It provides a layout algorithm based on the CoSE (Compound Spring Embedder) model, which is particularly useful for visualizing compound graphs with a hierarchical structure.

What are cytoscape-cose-bilkent's main functionalities?

Basic Layout

This code initializes a Cytoscape instance with a basic graph and applies the CoSE-Bilkent layout algorithm to it.

const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'ab', source: 'a', target: 'b' } },
    { data: { id: 'bc', source: 'b', target: 'c' } },
    { data: { id: 'cd', source: 'c', target: 'd' } },
    { data: { id: 'de', source: 'd', target: 'e' } }
  ],
  layout: {
    name: 'cose-bilkent'
  }
});

Custom Layout Options

This code demonstrates how to customize the CoSE-Bilkent layout options, such as node repulsion, ideal edge length, and animation settings.

const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'ab', source: 'a', target: 'b' } },
    { data: { id: 'bc', source: 'b', target: 'c' } },
    { data: { id: 'cd', source: 'c', target: 'd' } },
    { data: { id: 'de', source: 'd', target: 'e' } }
  ],
  layout: {
    name: 'cose-bilkent',
    nodeRepulsion: 4500,
    idealEdgeLength: 50,
    edgeElasticity: 0.45,
    nestingFactor: 0.1,
    gravity: 0.25,
    numIter: 2500,
    tile: true,
    animate: 'end',
    animationDuration: 1000
  }
});

Compound Graph Layout

This code shows how to use the CoSE-Bilkent layout for a compound graph, where nodes can have parent-child relationships.

const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b', parent: 'a' } },
    { data: { id: 'c', parent: 'a' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'ab', source: 'a', target: 'b' } },
    { data: { id: 'bc', source: 'b', target: 'c' } },
    { data: { id: 'cd', source: 'c', target: 'd' } },
    { data: { id: 'de', source: 'd', target: 'e' } }
  ],
  layout: {
    name: 'cose-bilkent'
  }
});

Other packages similar to cytoscape-cose-bilkent

cytoscape-dagre

The cytoscape-dagre package provides a layout algorithm based on the Dagre library, which is designed for directed graphs. It is particularly useful for hierarchical layouts and is optimized for performance. Compared to cytoscape-cose-bilkent, it is more suitable for directed acyclic graphs (DAGs).

cytoscape-cola

The cytoscape-cola package integrates the Cola.js layout algorithm with Cytoscape.js. It offers advanced features like constraints and handles large graphs efficiently. Compared to cytoscape-cose-bilkent, it provides more flexibility in terms of layout constraints and is better suited for large-scale graphs.

cytoscape-euler

The cytoscape-euler package provides a layout algorithm based on the force-directed approach. It is designed to produce aesthetically pleasing layouts with good separation of nodes. Compared to cytoscape-cose-bilkent, it focuses more on visual aesthetics and is less specialized for compound graphs.

README

cytoscape-cose-bilkent

Description

The CoSE layout for Cytoscape.js by the i-Vis group in Bilkent University. Please cite the following when using this layout:

U. Dogrusoz, E. Giral, A. Cetintas, A. Civril, and E. Demir, "A Layout Algorithm For Undirected Compound Graphs", Information Sciences, 179, pp. 980-994, 2009.

Dependencies

• Cytoscape.js ^2.4.0 || ^3.0.0

Usage instructions

Download the library:

• via npm: npm install cytoscape-cose-bilkent,
• via bower: bower install cytoscape-cose-bilkent, or
• via direct download in the repository (probably from a tag).

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var regCose = require('cytoscape-cose-bilkent');

regCose( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-cose-bilkent'], function( cytoscape, regCose ){
  regCose( cytoscape ); // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

API

When calling the layout, e.g. cy.layout({ name: 'cose-bilkent', ... }), the following options are supported:

var defaultOptions = {
  // Called on `layoutready`
  ready: function () {
  },
  // Called on `layoutstop`
  stop: function () {
  },
  // number of ticks per frame; higher is faster but more jerky
  refresh: 30, 
  // Whether to fit the network view after when done
  fit: true,
  // Padding on fit
  padding: 10,
  // Padding for compounds
  paddingCompound: 15,
  // Whether to enable incremental mode
  randomize: true,
  // Node repulsion (non overlapping) multiplier
  nodeRepulsion: 4500,
  // Ideal edge (non nested) length
  idealEdgeLength: 50,
  // Divisor to compute edge forces
  edgeElasticity: 0.45,
  // Nesting factor (multiplier) to compute ideal edge length for nested edges
  nestingFactor: 0.1,
  // Gravity force (constant)
  gravity: 0.25,
  // Maximum number of iterations to perform
  numIter: 2500,
  // For enabling tiling
  tile: true,
  // Type of layout animation. The option set is {'during', 'end', false}
  animate: 'end',
  // Represents the amount of the vertical space to put between the zero degree members during the tiling operation(can also be a function)
  tilingPaddingVertical: 10,
  // Represents the amount of the horizontal space to put between the zero degree members during the tiling operation(can also be a function)
  tilingPaddingHorizontal: 10,
  // Gravity range (constant) for compounds
  gravityRangeCompound: 1.5,
  // Gravity force (constant) for compounds
  gravityCompound: 1.0,
  // Gravity range (constant)
  gravityRange: 3.8
};

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

1. Set the version number environment variable: export VERSION=1.2.3
2. Publish: gulp publish
3. If publishing to bower for the first time, you'll need to run bower register cytoscape-cose-bilkent https://github.com/cytoscape/cytoscape.js-cose-bilkent.git