What is the difference between D3.js and Cytoscape.js?

Question

What is the difference between D3.js and Cytoscape.js?

Why would someone choose Cytoscape over D3.js?

Solution

D3 is for charts and mostly static graphs. Cytoscape.js lets you manipulate highly-customisable and interactive graphs, and has an API as easy to use as jQuery.

D3 is for arbitrary SVG. This means that although it can be used to make lots of different things, you have to build the renderer, interaction, and model yourself. Sometimes that's what you need. (Note SVG tends not to be able to performantly render highly complex scenes with lots of SVG elements, so evaluate your app's requirements carefully.)

Cytoscape.js is a library focussed just on graph theory (networks). It has a builtin, performant renderer, it has gestures and events, it has a sophisticated graph model out of the box, etc. Because it's more focussed, Cytoscape.js lets you do much more with your graphs with less code -- but of course, you can't use it for things like bar charts or point charts.

If you want a simple chart for a website, D3 is great. If you want to build an app with a serious graph component without having to reinvent the wheel, Cytoscape.js is great.