Sigma.js: a JavaScript library for graph drawing | Hacker News Reader

Sigma.js: a JavaScript library for graph drawing

sigmajs.org

201 pointstlack34 comments

Open articleView on HN

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/

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

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

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

https://github.com/frewsxcv/graphosaurus

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

For layout I have found nothing faster than 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.

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

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

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

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

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.

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

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

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.

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

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.

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?

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.

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.

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.

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.

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.

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

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!

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.

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

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.

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/

What? No co-occurrence between Fantine and Cosette?

How does it compare to D3?

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.

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.

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.

No links?

Reply on news.ycombinator.com