7 ms·

Sigma.js: a JavaScript library for graph drawing

201 points by tlack 11y ago

iMark 11y ago
I can't comment on the library yet, but I wish more libraries/frameworks had homepages like this. It tells me upfront what it is (so many miss this out!), gives me an example in code, details more features, and then presents a tutorial. Basically everything I need to know to understand it in a single page. Nice.
- kriro 11y ago
  I agree this has all the info I'd expect right on the initial page and looks pretty. Small typo in case the author reads this: """ Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications. """ Should be "It makes it easy to publish" (missing it) or something similar (I'm not a native speaker). Maybe just "It simplifies the publishing of networks on Web pages [...]"
tptacek 11y ago
Pretty. What layouts does this thing do? I see force-directed, and then an almost useless grid arrangement. Are there a bunch more in the library?
- jonesetc 11y ago
  I believe that the only bundled layout is a force atlas 2 force-directed. https://github.com/jacomyal/sigma.js/tree/master/plugins https://github.com/jacomyal/sigma.js/tree/master/plugins It does look like it should be reasonable to add in any custom layouts though.
- marktangotango 11y ago
  The title of this item is a bit misleading imo, as 'drawing' can mean a bit more than 'visualization', such as layout (node placement and edge routing) as you imply. Without intending to minimize the importance of design, presentation, and api, graph layout algorithm implementation can be quiet involved, which is why you see them rarely, imo.
morgante 11y ago
It'd be great to see a comparison of this against d3, which also provides pretty great graph drawing support and is also a general purpose tool.
- lmeyerov 11y ago
  It's useful to bucket these in magnitudes for the ability to run both layout and rendering. D3 is great up to ~5000 elements, sigma is probably the best open source and reaches up to ~50K (?). And, shameless plug, we've focused on bigger ones, and regularly do 1MM :) (See PyGraphistry link above.) For smaller graphs, the focus is generally more on styling, like SVG, so D3 is probably better. Larger graphs are used in analytic workloads like machine learning, network operations, etc. The emphasis is more on the ability to see big graphs (requiring smart rendering and layout), bind algorithm results to the visual encoding, and drill down. D3 and pure rendering libraries become a bit too low-level and clunky at this point.
- mentatseb 11y ago
  Watch this conference talk about how to choose a graph visualization library: https://www.youtube.com/watch?v=7BPbaApIOrc https://www.youtube.com/watch?v=7BPbaApIOrc Disclamer: talk given by an engineer who has worked on the sigma.js fork https://github.com/Linkurious/linkurious.js https://github.com/Linkurious/linkurious.js
jedisct1 11y ago
Better/faster Javascript interactive graph visualization engines: - https://github.com/anvaka/ngraph.pixel https://github.com/anvaka/ngraph.pixel - https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS and for large graphs: - https://github.com/anvaka/pm https://github.com/anvaka/pm with a pretty impressive example, displaying the whole internet (BGP adjacencies): http://as2914.net/ http://as2914.net/
- dajohnson89 11y ago
  What makes you say the other ones are faster? Have you done benchmarks? If so, please share.
  - semi-extrinsic 11y ago
    Benchmark in the second link he gave was quite impressive, and also includes sigma.js (bottom left corner): https://www.youtube.com/watch?v=Ax7KSQZ0_hk https://www.youtube.com/watch?v=Ax7KSQZ0_hk
- frewsxcv 11y ago
  Shameless self plug: Graphosaurus, a three-dimensional graph viewer. https://github.com/frewsxcv/graphosaurus https://github.com/frewsxcv/graphosaurus
- lobster_johnson 11y ago
  Note while the package renderer (your last link) is impressively fast, it's only a renderer. It consumes a graph that has already been laid out; layout is computationally more expensive than just rendering it. (It can also work with a layout, but that won't scale in real time to those Internet-wide graphs.)
  - eggie 11y ago
    For layout I have found nothing faster than mars https://github.com/marckhoury/mars https://github.com/marckhoury/mars. I have to work with graphs of hundreds of millions of nodes. Just looking at fragments of them of tens of thousands of nodes in reasonable time requires something like mars. I have not found anything else remotely as scalable.
jack9 11y ago
How does it compare to D3?
- arsalanb 11y ago
  I'd say D3 is a super set of the features in SigmaJS. D3 is more comprehensive in the sense that there are so many types of visualizations you can make using just D3.
- osi 11y ago
  I used an older (~ 2yr) version of sigma in a case where D3 couldn't hack it. There were 10's of thousands of nodes, and D3's approach of SVG elements were not as efficient as the sigma.js canvas approach. my needs were minimal though, so none of the extra d3 features came into play (and this was also before sigma had plugins). to lay out the graph i was running dot from graphviz on the server. took too long client-side.
mirchiseth 11y ago
Another one - http://js.cytoscape.org/ http://js.cytoscape.org/ Cytoscape as a project has been there for a long time and has good following in bio, genetics fields.
- DanielRibeiro 11y ago
  Cytoscape's demos[1] look amazing! Also nice to see its library comes with a few graph algorithms[2] implemented. Thanks for sharing. [1] http://js.cytoscape.org/ http://js.cytoscape.org/ [2] http://js.cytoscape.org/#collection/algorithms http://js.cytoscape.org/#collection/algorithms
- bordercases 11y ago
  It's pretty heavy but on the other hand they pretty much cover every use case you would be able to think of within its own API. For that it's kind of nice.
simonsarris 11y ago
I like it for what it is (very small footprint @ 84kb!) But it doesn't do much more than what you see on the homepage, and the project looks barely active. Last release on Aug 22, 2014, and no commits to the core JS for some time. If you're looking for much more fully-featured graph drawing that's been actively developed for years, have a look at GoJS (http://gojs.net http://gojs.net). Canvas diagrams with a focus on interactivity (text editing/undo/etc), layouts, data-binding, and presentation. Big disclaimer: I'm a lead dev for GoJS and while it packs a huge amount of functionality, it's a commercial JS Library.
lmeyerov 11y ago
For 10-100X more data (and more of a focus on batteries-included data exploration), we've been building https://github.com/graphistry/pygraphistry https://github.com/graphistry/pygraphistry that leverages GPGPU tech. Ping for an alpha API key :) Not to detract from Sigma: it's a great project, and impressive for open source here!
Buetol 11y ago
If you like sigma.js, it's worth checking out a very active fork of the library with commercial support: https://github.com/Linkurious/linkurious.js https://github.com/Linkurious/linkurious.js For example, sigma.js is blurry with an hdpi screen. Here is my PR to fix that: https://github.com/jacomyal/sigma.js/pull/639 https://github.com/jacomyal/sigma.js/pull/639
wangweij 11y ago
What? No co-occurrence between Fantine and Cosette?
frik 11y ago
For my use case to display an interactive graph with thousands of connected nodes on smartphones in a web app, no available graph library was fast enough. Sigma.js, VivaGraph, D3 based ones, etc. are all way to slow. WebGL hadn't good support on mobile devices 2 years ago. I ended up coding a terse JS library (20kb) with a Canvas and SVG renderer and physics simulation that runs on 60fps.
- rymohr 11y ago
  No links?
espeed 11y ago
What's the best JavaScript library for visually representing, animating, and interacting with general data structures, such as various tree and hash algorithms?
cund 11y ago
Is Sigma.js able to create things like flow-charts? I've been using GoJS and I'm not thrilled with it, but I haven't found a better alternative.
- arsalanb 11y ago
  I tried to use JsPlumb and it was a nightmare. I think there is a lot of documentation for JsPlumb, but it's structured so poorly that it makes it hard to use. I'm pretty sure I had an unpleasant experience with JsPlumb mostly because the framework behaves much differently than what the documentation suggests. You should still check it out though. It might work for you. https://jsplumbtoolkit.com/ https://jsplumbtoolkit.com/
anantzoid 11y ago
I tried using it for one of my projects, but the feature support is very little, and I had to actually manually draw the nodes. Reverted back to using D3.js, which, though having a high learning curve, gracefully solved my problem.

201 points by tlack 11y ago

iMark 11y ago

I can't comment on the library yet, but I wish more libraries/frameworks had homepages like this. It tells me upfront what it is (so many miss this out!), gives me an example in code, details more features, and then presents a tutorial. Basically everything I need to know to understand it in a single page. Nice.

kriro 11y ago
I agree this has all the info I'd expect right on the initial page and looks pretty. Small typo in case the author reads this: """ Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications. """ Should be "It makes it easy to publish" (missing it) or something similar (I'm not a native speaker). Maybe just "It simplifies the publishing of networks on Web pages [...]"

tptacek 11y ago

Pretty. What layouts does this thing do? I see force-directed, and then an almost useless grid arrangement. Are there a bunch more in the library?

jonesetc 11y ago
I believe that the only bundled layout is a force atlas 2 force-directed. https://github.com/jacomyal/sigma.js/tree/master/plugins https://github.com/jacomyal/sigma.js/tree/master/plugins It does look like it should be reasonable to add in any custom layouts though.
marktangotango 11y ago
The title of this item is a bit misleading imo, as 'drawing' can mean a bit more than 'visualization', such as layout (node placement and edge routing) as you imply. Without intending to minimize the importance of design, presentation, and api, graph layout algorithm implementation can be quiet involved, which is why you see them rarely, imo.

morgante 11y ago

It'd be great to see a comparison of this against d3, which also provides pretty great graph drawing support and is also a general purpose tool.

lmeyerov 11y ago
It's useful to bucket these in magnitudes for the ability to run both layout and rendering. D3 is great up to ~5000 elements, sigma is probably the best open source and reaches up to ~50K (?). And, shameless plug, we've focused on bigger ones, and regularly do 1MM :) (See PyGraphistry link above.) For smaller graphs, the focus is generally more on styling, like SVG, so D3 is probably better. Larger graphs are used in analytic workloads like machine learning, network operations, etc. The emphasis is more on the ability to see big graphs (requiring smart rendering and layout), bind algorithm results to the visual encoding, and drill down. D3 and pure rendering libraries become a bit too low-level and clunky at this point.
mentatseb 11y ago
Watch this conference talk about how to choose a graph visualization library: https://www.youtube.com/watch?v=7BPbaApIOrc https://www.youtube.com/watch?v=7BPbaApIOrc Disclamer: talk given by an engineer who has worked on the sigma.js fork https://github.com/Linkurious/linkurious.js https://github.com/Linkurious/linkurious.js

jedisct1 11y ago

Better/faster Javascript interactive graph visualization engines: - https://github.com/anvaka/ngraph.pixel https://github.com/anvaka/ngraph.pixel - https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS and for large graphs: - https://github.com/anvaka/pm https://github.com/anvaka/pm with a pretty impressive example, displaying the whole internet (BGP adjacencies): http://as2914.net/ http://as2914.net/

dajohnson89 11y ago
What makes you say the other ones are faster? Have you done benchmarks? If so, please share.
- semi-extrinsic 11y ago
  Benchmark in the second link he gave was quite impressive, and also includes sigma.js (bottom left corner): https://www.youtube.com/watch?v=Ax7KSQZ0_hk https://www.youtube.com/watch?v=Ax7KSQZ0_hk
frewsxcv 11y ago
Shameless self plug: Graphosaurus, a three-dimensional graph viewer. https://github.com/frewsxcv/graphosaurus https://github.com/frewsxcv/graphosaurus
lobster_johnson 11y ago
Note while the package renderer (your last link) is impressively fast, it's only a renderer. It consumes a graph that has already been laid out; layout is computationally more expensive than just rendering it. (It can also work with a layout, but that won't scale in real time to those Internet-wide graphs.)
- eggie 11y ago
  For layout I have found nothing faster than mars https://github.com/marckhoury/mars https://github.com/marckhoury/mars. I have to work with graphs of hundreds of millions of nodes. Just looking at fragments of them of tens of thousands of nodes in reasonable time requires something like mars. I have not found anything else remotely as scalable.

jack9 11y ago

How does it compare to D3?

arsalanb 11y ago
I'd say D3 is a super set of the features in SigmaJS. D3 is more comprehensive in the sense that there are so many types of visualizations you can make using just D3.
osi 11y ago
I used an older (~ 2yr) version of sigma in a case where D3 couldn't hack it. There were 10's of thousands of nodes, and D3's approach of SVG elements were not as efficient as the sigma.js canvas approach. my needs were minimal though, so none of the extra d3 features came into play (and this was also before sigma had plugins). to lay out the graph i was running dot from graphviz on the server. took too long client-side.

mirchiseth 11y ago

Another one - http://js.cytoscape.org/ http://js.cytoscape.org/ Cytoscape as a project has been there for a long time and has good following in bio, genetics fields.

DanielRibeiro 11y ago
Cytoscape's demos[1] look amazing! Also nice to see its library comes with a few graph algorithms[2] implemented. Thanks for sharing. [1] http://js.cytoscape.org/ http://js.cytoscape.org/ [2] http://js.cytoscape.org/#collection/algorithms http://js.cytoscape.org/#collection/algorithms
bordercases 11y ago
It's pretty heavy but on the other hand they pretty much cover every use case you would be able to think of within its own API. For that it's kind of nice.

simonsarris 11y ago

I like it for what it is (very small footprint @ 84kb!) But it doesn't do much more than what you see on the homepage, and the project looks barely active. Last release on Aug 22, 2014, and no commits to the core JS for some time. If you're looking for much more fully-featured graph drawing that's been actively developed for years, have a look at GoJS (http://gojs.net http://gojs.net). Canvas diagrams with a focus on interactivity (text editing/undo/etc), layouts, data-binding, and presentation. Big disclaimer: I'm a lead dev for GoJS and while it packs a huge amount of functionality, it's a commercial JS Library.

lmeyerov 11y ago

For 10-100X more data (and more of a focus on batteries-included data exploration), we've been building https://github.com/graphistry/pygraphistry https://github.com/graphistry/pygraphistry that leverages GPGPU tech. Ping for an alpha API key :) Not to detract from Sigma: it's a great project, and impressive for open source here!

Buetol 11y ago

If you like sigma.js, it's worth checking out a very active fork of the library with commercial support: https://github.com/Linkurious/linkurious.js https://github.com/Linkurious/linkurious.js For example, sigma.js is blurry with an hdpi screen. Here is my PR to fix that: https://github.com/jacomyal/sigma.js/pull/639 https://github.com/jacomyal/sigma.js/pull/639

wangweij 11y ago

What? No co-occurrence between Fantine and Cosette?

frik 11y ago

For my use case to display an interactive graph with thousands of connected nodes on smartphones in a web app, no available graph library was fast enough. Sigma.js, VivaGraph, D3 based ones, etc. are all way to slow. WebGL hadn't good support on mobile devices 2 years ago. I ended up coding a terse JS library (20kb) with a Canvas and SVG renderer and physics simulation that runs on 60fps.

rymohr 11y ago
No links?

espeed 11y ago

What's the best JavaScript library for visually representing, animating, and interacting with general data structures, such as various tree and hash algorithms?

cund 11y ago

Is Sigma.js able to create things like flow-charts? I've been using GoJS and I'm not thrilled with it, but I haven't found a better alternative.

arsalanb 11y ago
I tried to use JsPlumb and it was a nightmare. I think there is a lot of documentation for JsPlumb, but it's structured so poorly that it makes it hard to use. I'm pretty sure I had an unpleasant experience with JsPlumb mostly because the framework behaves much differently than what the documentation suggests. You should still check it out though. It might work for you. https://jsplumbtoolkit.com/ https://jsplumbtoolkit.com/

anantzoid 11y ago

I tried using it for one of my projects, but the feature support is very little, and I had to actually manually draw the nodes. Reverted back to using D3.js, which, though having a high learning curve, gracefully solved my problem.