Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
cytoscape-cose-bilkent
Advanced tools
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.
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'
}
});
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).
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.
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.
The CoSE layout for Cytoscape.js by Bilkent in the i-Vis group
Download the library:
npm install cytoscape-cose-bilkent
,bower install cytoscape-cose-bilkent
, orrequire()
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.
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 () {
},
// Whether to fit the network view after when done
fit: true,
// Padding on fit
padding: 10,
// Whether to enable incremental mode
randomize: false,
// 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.4,
// Maximum number of iterations to perform
numIter: 2500,
// For enabling tiling
tile: true,
//whether to make animation while performing the layout
animate: true
};
This project is set up to automatically be published to npm and bower. To publish:
export VERSION=1.2.3
gulp publish
bower register cytoscape-cose-bilkent https://github.com/cytoscape/cytoscape.js-cose-bilkent.git
FAQs
The CoSE layout for Cytoscape.js by Bilkent with enhanced compound node placement
The npm package cytoscape-cose-bilkent receives a total of 535,687 weekly downloads. As such, cytoscape-cose-bilkent popularity was classified as popular.
We found that cytoscape-cose-bilkent demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.