6 ms·

Cytoscape.js – Graph theory / network library for analysis and visualisation

145 points by octosphere 8y ago

villuv 8y ago
Nice, just two dependencies!
dbranes 8y ago
Some context would be nice as this (very nice library) has been around for a while: was there a new release? What are we supposed to be looking for Here?
- octosphere 8y ago
  I just felt like sharing it. I was foraging around Twitter for good links and found this. I honestly didn't know it was around for a while, but it stimulated my intellectual curiosity so I shared it.
  - dvh 8y ago
    There was one post requiring it on upwork two days ago. Coincidence?
brian_herman__ 8y ago
How does this compare to something like Gephi?https://gephi.org https://gephi.org
- jeremieb 8y ago
  Gephi and Cytoscape (https://cytoscape.org/ https://cytoscape.org/) are both open-source Java-based network analysis and visualization software. Cytoscape.js is a graph theory and network visualization Javascript library. It can be compared to SigmaJS (http://sigmajs.org/ http://sigmajs.org/) or the more generic D3 data visualization toolkit (https://d3js.org/ https://d3js.org/).
  - oliyoung 8y ago
    Cytoscape.js is MUCH more capable than those, it can do client side network algorithms (A* etc) and traversal, Sigma & D3 are 'just' visualisation tools, where Gephi is an 'offline' tool
    - jeremieb 8y ago
      I agree, Cytoscape.js provides more graph theory algorithms; but Sigma.js also has some, including A*: https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.pathfinding.astar https://github.com/jacomyal/sigma.js/tree/master/plugins/sig...
kurjam 8y ago
There's this anvaka guy on github ( https://github.com/anvaka https://github.com/anvaka ) who does some amazing graph stuff. His ngraph has less features than cytoscape but if you need to plot large graphs it has a crazy good performance. And his galaxies are amazing as well, https://anvaka.github.io/pm/#/?_k=9kvbgq https://anvaka.github.io/pm/#/?_k=9kvbgq . Precalculated positions for all NPM packages for example. Crazy stuff, really fun. But yeah, cytoscape.js is nice and has great set of features.
- ChrisCinelli 8y ago
  Yes! I looked at a bunch graph visualization libraries in the past. Cytoscape did not impressed me. Anvaka's ngraph and VivaGraphJS seemed pretty closer to what I wanted.
  - dustingetz 8y ago
    VivaGraph might be what I've been looking for! Thanks! http://www.yasiv.com/amazon#/Search?q=graph%20drawing&category=Books&lang=US http://www.yasiv.com/amazon#/Search?q=graph%20drawing&catego... https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS Cryptoscape looks really awesome but i'm having trouble locating the source code of the demos like this one http://js.cytoscape.org/demos/images-breadthfirst-layout/ http://js.cytoscape.org/demos/images-breadthfirst-layout/ actually figured out how to open dev tools without a mouse and its simple too. How hard is it to teach either of these libs about Clojure data structures? (Without copying them into plain js objects) Cryptoscape - unclear how to use actual dom to style nodes, not just css classes (or if this is possible at all)
- anvaka 8y ago
  Thank you so much for your kind words! Made my day :)
adwhit 8y ago
We use this is production. It is fast, looks good, decent API. The kind of thing that makes the web go round. Thanks, whoever made it!
deleted 8y ago
[deleted]
jordache 8y ago
would this be useful for visualization of hierarchical data? or does it have to be network data structure?
- lobo_tuerto 8y ago
  Aren't hierarchies a type of graph?
- jeremieb 8y ago
  Yes, Cytoscape.js can be used to visualize hierarchical data; the DAGRE layout comes handy for DAGs and trees: http://js.cytoscape.org/demos/dagre-layout/ http://js.cytoscape.org/demos/dagre-layout/
kureikain 8y ago
Love this library so much that I include it in my news letter[0] for code to read sections for JavaScript category Some thing about this project: - It has all kind of npm shortcut - Minimal dependencies: only 2, other are for build time, not run time. It's too good that he opt to use `lodash.debounce` instead of whole `lodash` - Pure JavaScript. TypeScript is nice but its generated code is such a beast - Files are small(Many files are < 100 lines) - Method are short Very easy to read and follow. --- [0]: https://betterdev.link/issues/77 https://betterdev.link/issues/77
rjmill 8y ago
I can't say enough good things about this library. The library is fast, the API is great, the features are awesome, and it is actively maintained. When I was evaluating the library for my use case, I submitted a PR for a small feature on their roadmap, and the maintainer had gotten back to me, made suggestions, and merged the PR in a matter of hours. Shout out to Max Franz for being such a dedicated, responsive, and competent maintainer for such a cool project!

145 points by octosphere 8y ago

Nice, just two dependencies!

Some context would be nice as this (very nice library) has been around for a while: was there a new release? What are we supposed to be looking for Here?

octosphere 8y ago
I just felt like sharing it. I was foraging around Twitter for good links and found this. I honestly didn't know it was around for a while, but it stimulated my intellectual curiosity so I shared it.
- dvh 8y ago
  There was one post requiring it on upwork two days ago. Coincidence?

brian_herman__ 8y ago

How does this compare to something like Gephi?https://gephi.org https://gephi.org

jeremieb 8y ago
Gephi and Cytoscape (https://cytoscape.org/ https://cytoscape.org/) are both open-source Java-based network analysis and visualization software. Cytoscape.js is a graph theory and network visualization Javascript library. It can be compared to SigmaJS (http://sigmajs.org/ http://sigmajs.org/) or the more generic D3 data visualization toolkit (https://d3js.org/ https://d3js.org/).
- oliyoung 8y ago
  Cytoscape.js is MUCH more capable than those, it can do client side network algorithms (A* etc) and traversal, Sigma & D3 are 'just' visualisation tools, where Gephi is an 'offline' tool
  - jeremieb 8y ago
    I agree, Cytoscape.js provides more graph theory algorithms; but Sigma.js also has some, including A*: https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.pathfinding.astar https://github.com/jacomyal/sigma.js/tree/master/plugins/sig...

kurjam 8y ago

There's this anvaka guy on github ( https://github.com/anvaka https://github.com/anvaka ) who does some amazing graph stuff. His ngraph has less features than cytoscape but if you need to plot large graphs it has a crazy good performance. And his galaxies are amazing as well, https://anvaka.github.io/pm/#/?_k=9kvbgq https://anvaka.github.io/pm/#/?_k=9kvbgq . Precalculated positions for all NPM packages for example. Crazy stuff, really fun. But yeah, cytoscape.js is nice and has great set of features.

ChrisCinelli 8y ago
Yes! I looked at a bunch graph visualization libraries in the past. Cytoscape did not impressed me. Anvaka's ngraph and VivaGraphJS seemed pretty closer to what I wanted.
- dustingetz 8y ago
  VivaGraph might be what I've been looking for! Thanks! http://www.yasiv.com/amazon#/Search?q=graph%20drawing&category=Books&lang=US http://www.yasiv.com/amazon#/Search?q=graph%20drawing&catego... https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS Cryptoscape looks really awesome but i'm having trouble locating the source code of the demos like this one http://js.cytoscape.org/demos/images-breadthfirst-layout/ http://js.cytoscape.org/demos/images-breadthfirst-layout/ actually figured out how to open dev tools without a mouse and its simple too. How hard is it to teach either of these libs about Clojure data structures? (Without copying them into plain js objects) Cryptoscape - unclear how to use actual dom to style nodes, not just css classes (or if this is possible at all)
anvaka 8y ago
Thank you so much for your kind words! Made my day :)

adwhit 8y ago

We use this is production. It is fast, looks good, decent API. The kind of thing that makes the web go round. Thanks, whoever made it!

deleted 8y ago

[deleted]

jordache 8y ago

would this be useful for visualization of hierarchical data? or does it have to be network data structure?

lobo_tuerto 8y ago
Aren't hierarchies a type of graph?
jeremieb 8y ago
Yes, Cytoscape.js can be used to visualize hierarchical data; the DAGRE layout comes handy for DAGs and trees: http://js.cytoscape.org/demos/dagre-layout/ http://js.cytoscape.org/demos/dagre-layout/

kureikain 8y ago

Love this library so much that I include it in my news letter[0] for code to read sections for JavaScript category Some thing about this project: - It has all kind of npm shortcut - Minimal dependencies: only 2, other are for build time, not run time. It's too good that he opt to use `lodash.debounce` instead of whole `lodash` - Pure JavaScript. TypeScript is nice but its generated code is such a beast - Files are small(Many files are < 100 lines) - Method are short Very easy to read and follow. --- [0]: https://betterdev.link/issues/77 https://betterdev.link/issues/77

rjmill 8y ago

I can't say enough good things about this library. The library is fast, the API is great, the features are awesome, and it is actively maintained. When I was evaluating the library for my use case, I submitted a PR for a small feature on their roadmap, and the maintainer had gotten back to me, made suggestions, and merged the PR in a matter of hours. Shout out to Max Franz for being such a dedicated, responsive, and competent maintainer for such a cool project!