

Sigma.js, a JavaScript library dedicated to graph drawing - Yomguithereal
http://sigmajs.org/

======
frewsxcv
I started a project a couple months ago to create a 3D graph library similar
to Sigma.js using ThreeJS (WebGL). You can check it out here

[https://github.com/frewsxcv/graphosaurus](https://github.com/frewsxcv/graphosaurus)

And a really crappy demo (give it a few seconds to load):

[http://vps.rwell.org/index-eve.html](http://vps.rwell.org/index-eve.html)

~~~
elwell
That's pretty cool; judging by the 'crappy demo' it has potential but would
need some important features to be useful, such as: labels, improvements
regarding the visual appearance & clarity, and node selection to isolate
connections.

~~~
frewsxcv
Yeah, the two things I'm working on next are labels and click/hover events.
Let me know if you have any other ideas

------
haberman
I'd still love to see a graphviz equivalent for JS that does layout for
digraphs. This looks cool if you need undirected graphs, but doesn't seem to
have any digraph support.

~~~
simonsarris
The library that I make, GoJS ([http://www.gojs.net/](http://www.gojs.net/))
has a tree layout and layered digraph layout, both with many options.

Here's an overview of the options for the layered digraph layout:
[http://www.gojs.net/latest/samples/ldLayout.html](http://www.gojs.net/latest/samples/ldLayout.html)

The tree layout supports some fairly complicated tree structures, including
ones that alternate or have different configurations for leaves:
[http://www.gojs.net/latest/samples/tLayout.html](http://www.gojs.net/latest/samples/tLayout.html)

Disclosure: I'm a developer of this library and it is not free.

~~~
davidjgraph
Also commercial with digraph layout functionality:

[http://www.lassalle.com/](http://www.lassalle.com/)

[http://www.jgraph.com/](http://www.jgraph.com/)

[http://www.tensegrity-software.com/category/javascript-
html5...](http://www.tensegrity-software.com/category/javascript-
html5-canvas/)

[http://www.yworks.com/en/products_yfileshtml_about.html](http://www.yworks.com/en/products_yfileshtml_about.html)

------
beat
What are the strengths of this library, relative to D3? How does Sigma work
differently?

~~~
cwbrandsma
On the technical side: D3 is built on svg, looks like this is built on canvas.
There are a few implications to both of those as far as compatibility and
performance, but shouldn't make a difference in most cases.

In general, D3 looks to be a more general purpose graphing tool (also maps,
multiple charting types, and graphs), while this is more single purpose.

~~~
auvrw
upvote, because this is the correct answer to the question "how does this work
differently from d3," as opposed to the question, "what are the
advantages/disadvantages of using this over d3."

a quick f12-for-firebug reveals that sigma indeed uses the canvas element. i
haven't actually used the library, but it appears (
[https://github.com/jacomyal/sigma.js/blob/master/package.jso...](https://github.com/jacomyal/sigma.js/blob/master/package.json)
) to in fact be built _directly_ on canvas, which is impressive in some sense
but probably does duplicate a lot of work that could be avoided by using a
generic-canvas-drawing-but-not-specifically-graph-drawing library.

d3 stands for "data-driven-documents" and is actually not specific to graphs.
at the core, it's about (as the expanded name suggests) connecting html
documents to javascript data structures. of course, lots of libraries --
angular, etc. -- may be described in such general terms, so more specifically,
d3 is useful when you have both a lot of data (or a lot of structure to your
data) and a lot of html elements to layout according to that data.

it just so happens that <svg> is now actually a tag in html ( : / ? i mean
that, the advances in the browsers themselves, was news to me, when i looked
at d3 for the first time), so yeah, d3 is most commonly used when the elements
you want to lay out are a bunch of svg tags.

anyway, i really like d3 (and probably would like three.js, for that matter,
if i took the time to toy around with it) b/c i think it does one fairly
general thing, does it well, _and_ has practical applications.

------
tmad4000
Hello all, I'm a student at MIT working on a project building a general-case
platform to create and explore graphs called WikiNets
[http://wikinets.co.uk/](http://wikinets.co.uk/) with the goal of enabling
half-formed ideas separated across different people's heads to come together
(e.g. making a custom platform for
[http://hackathonprojects.tk/](http://hackathonprojects.tk/)). Anyone want to
work on this with us? I would love to find others who think on this same
wavelength and I lament that (ironically) there's not yet a way online for
people to find others with synergistic ideas! Feel free to poke me at
jcole@mit.edu Incidentally, we're currently using D3, but welcome suggestions
as well!

------
jvalencia
On FF nightly in linux (lubuntu - no flash), none of the graphs work.

------
huskyr
I've used both Sigma.js and Arbor.js
([http://arborjs.org/](http://arborjs.org/)) extensively. I liked Arbor a bit
better for smaller graphs, because of its flexible API and separated drawing
and math components. Unfortunately Arbor seems abandoned by the author last
updates were two years ago), so i guess Sigma might be a better choice right
now.

------
nkozyra
We tested this with some Super Bowl social data we collected as part of a
project.

First: looks really good, very easy to integrate.

Next: Am I missing it, or is there no way to visually represent the edge
strength? Everything appears to be a 1px connection no matter how strong the
edge.

~~~
jacomyal
That is weird, indeed. The thickness of the edges should be related to their
"size" value.

After that, check how sigma rescales the nodes and edges in the related wiki
page:

[https://github.com/jacomyal/sigma.js/wiki/Settings#wiki-
resc...](https://github.com/jacomyal/sigma.js/wiki/Settings#wiki-rescale-
settings)

------
Hyperized
Want to get started with PHP and GEXF to create dynamic input files for
sigma.js?
[http://stackoverflow.com/a/14719375](http://stackoverflow.com/a/14719375) If
there is enough interest, I will create a GEXF lib for PHP.

------
kmfrk
Looks great, but I think it would benefit a lot from more examples. :)

~~~
jacomyal
You can check the examples in the repository:
[https://github.com/jacomyal/sigma.js/wiki#wiki-getting-
start...](https://github.com/jacomyal/sigma.js/wiki#wiki-getting-started)

~~~
dcre
I know it's pretty simple to run the examples yourself, but it would be nice
if they were hosted on sigmajs.org. Great work, though. Pretty sure I'm going
to try this today or tomorrow.

~~~
jacomyal
I keep this in mind. We need to find an easy way to export examples formatted
with the good template etc... before putting anything public, to ensure it's
not too hard to update the production server when we release sigma.js.

------
bicknergseng
I'm kinda surprised there haven't been more WebGL based graphing libraries
popping up. I'd love to have one to replace the graphing I do in D3.

------
anaphor
Most JS graph libraries I've found have either been really hard to use or
buggy. Hope this is much better, seems to sound like it.

------
ests
Looks very nice!

------
pilopio
only god nodes.

------
nikokolu
nice work !

