Menu
What is the difference between D3.js and Cytoscape.js?
Why would someone choose Cytoscape over D3.js?
408
Other than that the most obvious distinction between the two is that Chart. js is canvas based, while d3. js is mainly about SVG.
The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.
D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
