Cytoscape.js tutorial demo

Data

The data specifies what should be put in the graph. Select between one of the example data sets or specify your own custom data in the code.

Active dataset Social Genes Custom

Style

The stylesheet is used to specify rules that affect how the elements in the graph look. Select between one of the example stylesheets or specify your own custom stylesheet in the code.

Active stylesheet Plain Fancy Custom

Layout

The layout is used to specify how the nodes are positioned in the viewport. Select between one of the example layouts or specify your own in the code.

Active layout Force-directed Concentric by centrality Hierarchy by centrality Custom

Algorithms

Cytoscape.js can analyze data with a variety of graph theory algorithms, including Breadth-First Search and Depth-First Search.

Run algorithm None BFS DFS A* Custom

Using custom data

To use custom data, styles, or layouts, clone the repo and modify datasets/custom.json, js/index.js, or stylesheets/custom.cycss.