7 ms·

Sigma.js, a JavaScript library dedicated to graph drawing

170 points by Yomguithereal 13y ago

nikokolu 13y ago
nice work !
beat 13y ago
What are the strengths of this library, relative to D3? How does Sigma work differently?
- tptacek 13y ago
  For one thing, Sigma appears to have an ortho layout; D3 only does force-directed, right?
  - jacomyal 13y ago
    Actually, as with d3, you can develop your own network visualization layouts. The main difference is that sigma only deals with graphs drawing, so it deals without effort with drag and drop (mouse or touch), scaling the graph to the screen, smooth zooming (with mousewheel or pinch)...
    - tptacek 13y ago
      Aren't the layouts the Hard part?
      - jacomyal 13y ago
        It is one hard part. But displaying thousands of elements in a web page is another one. Also, sigma does provide in a plugin a force-directed layout, ForceAtlas2, initially developed for Gephi.
      - _delirium 13y ago
        It depends on where your data's coming from, but I tend to avoid doing layout in JS, and instead pre-lay-out the data using Gephi or graphviz (possibly in a cron job if the data changes), loading the hardcoded initial layout in JS and using sigma.js only for display/interaction. In the non-cron case, also lets me tweak the layout a bit through trial and error or trying out different algorithms, to get something I like. Obviously doesn't work for every possible usage, though.
- nrub 13y ago
  Sigma is significantly faster than D3 for drawing large graphs; however, it's only able to draw graphs. D3 is a multipurpose library for many different kinds of visualizations.
  - nawitus 13y ago
    Are you comparing Sigma with using D3 with SVG? One could also use a canvas to make it render faster.
- me_bx 13y ago
  to add up on the other replies: sigma.js is plug-and-play, very easy to draw a force-directed graph with nice built-in features. d3.js requires more work to get to the same result. Advantage of d3.js is that it is easier to customize the display you want. other difference: sigma.js implements "force atlas 2 " algorithm - like the one found in Gephi, which may be more suitable for some graphs (when you want to highlight community structures)
- cwbrandsma 13y ago
  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 13y ago
    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.json https://github.com/jacomyal/sigma.js/blob/master/package.jso... ) 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.
pilopio 13y ago
only god nodes.
jvalencia 13y ago
On FF nightly in linux (lubuntu - no flash), none of the graphs work.
bicknergseng 13y ago
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.
frewsxcv 13y ago
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 13y ago
  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 13y ago
    Yeah, the two things I'm working on next are labels and click/hover events. Let me know if you have any other ideas
- myhf 13y ago
  Ah, the security levels of EVE Online systems. I'd recognize that data anywhere.
kmfrk 13y ago
Looks great, but I think it would benefit a lot from more examples. :)
- jacomyal 13y ago
  You can check the examples in the repository: https://github.com/jacomyal/sigma.js/wiki#wiki-getting-started https://github.com/jacomyal/sigma.js/wiki#wiki-getting-start...
  - dcre 13y ago
    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 13y ago
      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.
  - nkoren 13y ago
    ...after installing everything. Are they online anywhere so they can be browsed more casually?
deleted 13y ago
[deleted]
haberman 13y ago
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.
- jweir 13y ago
  I have never used it, but vis.js supports the DOT language. http://visjs.org/docs/graph.html http://visjs.org/docs/graph.html
- davidjgraph 13y ago
  Try https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre , it's using some of the latest and most performant algos, really nice + a D3 renderer.
- simonsarris 13y ago
  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 13y ago
    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-canvas/ http://www.tensegrity-software.com/category/javascript-html5... http://www.yworks.com/en/products_yfileshtml_about.html http://www.yworks.com/en/products_yfileshtml_about.html
huskyr 13y ago
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.
ests 13y ago
Looks very nice!
anaphor 13y ago
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.
tmad4000 13y ago
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!
Hyperized 13y ago
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.
nkozyra 13y ago
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 13y ago
  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-rescale-settings https://github.com/jacomyal/sigma.js/wiki/Settings#wiki-resc...

170 points by Yomguithereal 13y ago

nikokolu 13y ago

nice work !

beat 13y ago

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

tptacek 13y ago
For one thing, Sigma appears to have an ortho layout; D3 only does force-directed, right?
- jacomyal 13y ago
  Actually, as with d3, you can develop your own network visualization layouts. The main difference is that sigma only deals with graphs drawing, so it deals without effort with drag and drop (mouse or touch), scaling the graph to the screen, smooth zooming (with mousewheel or pinch)...
  - tptacek 13y ago
    Aren't the layouts the Hard part?
    - jacomyal 13y ago
      It is one hard part. But displaying thousands of elements in a web page is another one. Also, sigma does provide in a plugin a force-directed layout, ForceAtlas2, initially developed for Gephi.
    - _delirium 13y ago
      It depends on where your data's coming from, but I tend to avoid doing layout in JS, and instead pre-lay-out the data using Gephi or graphviz (possibly in a cron job if the data changes), loading the hardcoded initial layout in JS and using sigma.js only for display/interaction. In the non-cron case, also lets me tweak the layout a bit through trial and error or trying out different algorithms, to get something I like. Obviously doesn't work for every possible usage, though.
nrub 13y ago
Sigma is significantly faster than D3 for drawing large graphs; however, it's only able to draw graphs. D3 is a multipurpose library for many different kinds of visualizations.
- nawitus 13y ago
  Are you comparing Sigma with using D3 with SVG? One could also use a canvas to make it render faster.
me_bx 13y ago
to add up on the other replies: sigma.js is plug-and-play, very easy to draw a force-directed graph with nice built-in features. d3.js requires more work to get to the same result. Advantage of d3.js is that it is easier to customize the display you want. other difference: sigma.js implements "force atlas 2 " algorithm - like the one found in Gephi, which may be more suitable for some graphs (when you want to highlight community structures)
cwbrandsma 13y ago
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 13y ago
  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.json https://github.com/jacomyal/sigma.js/blob/master/package.jso... ) 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.

pilopio 13y ago

only god nodes.

jvalencia 13y ago

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

bicknergseng 13y ago

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.

frewsxcv 13y ago

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 13y ago
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 13y ago
  Yeah, the two things I'm working on next are labels and click/hover events. Let me know if you have any other ideas
myhf 13y ago
Ah, the security levels of EVE Online systems. I'd recognize that data anywhere.

kmfrk 13y ago

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

jacomyal 13y ago
You can check the examples in the repository: https://github.com/jacomyal/sigma.js/wiki#wiki-getting-started https://github.com/jacomyal/sigma.js/wiki#wiki-getting-start...
- dcre 13y ago
  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 13y ago
    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.
- nkoren 13y ago
  ...after installing everything. Are they online anywhere so they can be browsed more casually?

deleted 13y ago

[deleted]

haberman 13y ago

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.

jweir 13y ago
I have never used it, but vis.js supports the DOT language. http://visjs.org/docs/graph.html http://visjs.org/docs/graph.html
davidjgraph 13y ago
Try https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre , it's using some of the latest and most performant algos, really nice + a D3 renderer.
simonsarris 13y ago
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 13y ago
  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-canvas/ http://www.tensegrity-software.com/category/javascript-html5... http://www.yworks.com/en/products_yfileshtml_about.html http://www.yworks.com/en/products_yfileshtml_about.html

huskyr 13y ago

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.

ests 13y ago

Looks very nice!

anaphor 13y ago

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.

tmad4000 13y ago

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!

Hyperized 13y ago

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.

nkozyra 13y ago

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 13y ago
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-rescale-settings https://github.com/jacomyal/sigma.js/wiki/Settings#wiki-resc...