🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

cytoscape

Package Overview
Dependencies
Maintainers
5
Versions
260
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cytoscape

Graph theory (a.k.a. network) library for analysis and visualisation

3.32.0
latest
Source
npm
Version published
Weekly downloads
1.2M
-13.87%
Maintainers
5
Weekly downloads
 
Created

What is cytoscape?

Cytoscape is a graph theory library for visualizing and analyzing networks. It provides a comprehensive set of features for creating, manipulating, and rendering graphs, making it suitable for a wide range of applications from bioinformatics to social network analysis.

What are cytoscape's main functionalities?

Graph Creation

This feature allows you to create a graph with nodes and edges. The code sample demonstrates how to initialize a Cytoscape instance, add elements (nodes and edges), and apply styles and layouts.

const cytoscape = require('cytoscape');
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

Graph Manipulation

This feature allows you to dynamically add and remove elements from the graph. The code sample shows how to add a new node and edge, and how to remove an existing node.

cy.add({ group: 'nodes', data: { id: 'c' } });
cy.add({ group: 'edges', data: { id: 'bc', source: 'b', target: 'c' } });
cy.remove(cy.$('#a'));

Graph Layouts

This feature provides various layout algorithms to arrange the graph elements. The code sample demonstrates how to apply a circular layout to the graph.

cy.layout({ name: 'circle' }).run();

Graph Styling

This feature allows you to style the graph elements. The code sample shows how to change the background color of all nodes to blue.

cy.style().selector('node').style({ 'background-color': 'blue' }).update();

Event Handling

This feature enables event handling for graph elements. The code sample demonstrates how to log a message when a node is tapped.

cy.on('tap', 'node', function(evt){
  var node = evt.target;
  console.log('Tapped ' + node.id());
});

Other packages similar to cytoscape

Keywords

graph

FAQs

Package last updated on 01 May 2025

Did you know?

Socket

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.

Install

Related posts