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.
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
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 );
AMD:
require(['cytoscape', 'cytoscape-cose-bilkent'], function( cytoscape, regCose ){
regCose( cytoscape );
});
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 = {
ready: function () {
},
stop: function () {
},
refresh: 30,
fit: true,
padding: 10,
randomize: true,
nodeRepulsion: 4500,
idealEdgeLength: 50,
edgeElasticity: 0.45,
nestingFactor: 0.1,
gravity: 0.25,
numIter: 2500,
tile: true,
animate: 'end',
tilingPaddingVertical: 10,
tilingPaddingHorizontal: 10,
gravityRangeCompound: 1.5,
gravityCompound: 1.0,
gravityRange: 3.8
};
Publishing instructions
This project is set up to automatically be published to npm and bower. To publish:
- Set the version number environment variable:
export VERSION=1.2.3
- Publish:
gulp publish
- 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