
Sigma.js: a JavaScript library for graph drawing - tlack
http://sigmajs.org/
======
jedisct1
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/)

~~~
lobster_johnson
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
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.

~~~
lmeyerov
Hi Eggie, any way to contact you? Would love to see how to improve our
workflow to help what you're doing!

(And we regularly layout hundreds of thousands of nodes in real-time, so
sounds like a great stress test!)

~~~
eggie
Hi lmeyerov, I'll reach out by emailing you on GitHub or via graphistry.
Unfortunately, I won't be able to use anything proprietary in production. Also
I need solutions that are self contained executables and capable of scaling to
several billion nodes. External APIs are a no-go. That said I'm happy to talk
as it looks like y'all are doing cool things :)

------
iMark
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
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 [...]"

------
Buetol
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)

------
mirchiseth
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
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)

------
tptacek
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
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.

------
simonsarris
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.

------
morgante
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
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.

------
lmeyerov
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!

------
anantzoid
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.

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

------
cund
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
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/)

------
wangweij
What? No co-occurrence between Fantine and Cosette?

------
jack9
How does it compare to D3?

~~~
osi
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.

------
frik
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
No links?

