Sigma.js: a JavaScript library for graph drawing

[jedisct1]

Better/faster Javascript interactive graph visualization engines:

- https://github.com/anvaka/ngraph.pixel

- https://github.com/anvaka/VivaGraphJS

and for large graphs:

- https://github.com/anvaka/pm

with a pretty impressive example, displaying the whole internet (BGP adjacencies):

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

[dajohnson89]

What makes you say the other ones are faster? Have you done benchmarks? If so, please share.

[prohor]

This also also very nice list of Graph libraries done by the NGraph author. The best part of it is, that you can test each of the libraries with various types of graphs and sizes (both configurable):

http://anvaka.github.io/graph-drawing-libraries/#/all

[frewsxcv]

Shameless self plug: Graphosaurus, a three-dimensional graph viewer.

https://github.com/frewsxcv/graphosaurus

[lmeyerov]

Hi Jedisct1, any chance you know the dataset and performance numbers for the "proof" benchmark? Would love to show why we switched to a GPU cloud architecture :)

[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

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

[mirchiseth]

Another one - 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/

[2] http://js.cytoscape.org/#collection/algorithms

[bordercases]

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.

[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

It does look like it should be reasonable to add in any custom layouts though.

[marktangotango]

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.

[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). 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.

[mentatseb]

Watch this conference talk about how to choose a graph visualization library: 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

[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 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/

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

[arsalanb]

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.

[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?