32

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

Why would someone choose Cytoscape over D3.js?

Erik Kaplun
  • 37,128
  • 15
  • 99
  • 111
mblaettermann
  • 1,916
  • 2
  • 17
  • 23

1 Answers1

67

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.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • 1
    Does all of this still hold as of March '16? What has changed meanwhile? – Erik Kaplun Mar 26 '16 at 11:55
  • 1
    Cytoscape.js has gotten even faster and has more features than in 2013. D3 is still DOM/SVG-only and generic. SVG is still slow for large visualisations, and it will almost certainly always be slower than the raster graphics that Cytoscape.js uses. D3 is nice for bar charts or pie charts -- simple, mostly static things. – maxkfranz Mar 28 '16 at 15:15
  • 7
    static things? have you checked the D3 example gallery? – Erik Kaplun Mar 28 '16 at 17:20
  • Yes -- and while SVG allows for smaller, simpler visualisations -- larger, more complex ones are much harder or not possible with SVG/D3. As said before, having to manually manage basic things like traversal support or gesture and touch support means more work for the dev. To each his own. – maxkfranz Apr 20 '16 at 15:14
  • No I agree that Cytoscape is nice and gets you going faster – Erik Kaplun Apr 20 '16 at 16:00
  • 3
    5 years after @ErikKaplun asked "does this 3 year old answer still hold?", I ask "does this 8 year old answer still hold?" – Mawg says reinstate Monica Jan 23 '21 at 20:08
  • For simple understanding, use cytoscape js if you need to implement something like a [network graph](http://graphml.abhishekbhardwaj.xyz/) as it's designed for graph theory. If you need something custom and you are good with JavaScript and have no problem implementing functionality from scratch then go for D3 js. You can refer to the [D3 gallery](https://observablehq.com/@d3/gallery) – Abhi May 23 '21 at 15:26
  • I use cytoscape js for graph theory work and for plotting charts [chart.js](https://www.chartjs.org/docs/latest/samples/animations/loop.html) / [plotly](https://plotly.com/javascript/) as it is simple to implement and looks good. D3 only for custom plots – Abhi May 23 '21 at 15:26
  • 1
    cytoscape [example](https://github.com/Abhi5h3k/graphml-viewer) – Abhi Jun 02 '21 at 10:36