Skip to content

Instantly share code, notes, and snippets.

@jacomyal
Created March 26, 2012 20:57
Show Gist options
  • Save jacomyal/2209633 to your computer and use it in GitHub Desktop.
Save jacomyal/2209633 to your computer and use it in GitHub Desktop.
sigma.js - How to programmatically adjust the size of the nodes based on the number of outbound edges
/*
Add the function to the public prototype :
*/
sigma.publicPrototype.outDegreeToSize = function() {
this.iterNodes(function(node){
node.size = node.outDegree;
}).draw();
};
/*
Of course, it works as well with node.degree and node.inDegree.
How to test it:
1. Open any sigma example - http://sigmajs.org/examples.html
2. Open a console - http://bit.ly/GVshi6
3. Enter the previous code
4. Try it on the first sigma.js instance on the page:
sigma.instances[1].outDegreeToSize();
Also, if you want to choose the minimum/maximum node sizes:
sigma.instances[1].graphProperties({
minNodeSize: 1,
maxNodeSize: 3
});
*/
@vgheri
Copy link

vgheri commented Mar 27, 2012

Thank you very much for your help!
The only problem I'm having with your code is that node.outDegree is undefined!
I'm using node.degree at the moment, and I'm trying to change the color of the node based on the degree as well, so that important nodes can be immediately spotted in the graph by the user.
I will do the same for the edges.
Would be good if you could release an updated version of the library that is defining inDegree and outDegree for each node.
I'm also having problem displaying directions for edges, even though all my edges are directed and I correctly specified source and target.
Do you have any clue about this?
Here is my stripped down graph (I replaced "<" with "(" ):
(graph mode="static" defaultedgetype="directed")
(nodes)
(node id="i260" label="Johnson Stephen"/)
(node id="1003234" label="Gujral Dorothy"/)
....
(/nodes)
(edges)
(edge id="2" source="i260" target="1003234" /)
(/edges)
(/graph)

@jacomyal
Copy link
Author

About the inDegree and outDegree node attributes, I pushed them yesterday to the core, but I forgot to update sigma.min.js on the website, now it's ok (the updated file is here).

About your edge direction issue, how does it appear, exactly?

@vgheri
Copy link

vgheri commented Mar 27, 2012

Thanks a lot again for your help!
I download the library again, changed back the code to use node.outDegree but in the Chrome debugger I got the "undefined" error, and as you can see for yourself here, http://dl.dropbox.com/u/6326953/NoOutDegree.JPG , there's no attribute named like outDegree or inDegree in the node object.

About the edge direction issue, I expected to see a sort of directed arrow instead of just a "link" between the source and the target.
Here is what I see: http://dl.dropbox.com/u/6326953/Edges.JPG

Thanks!

Valerio

@jacomyal
Copy link
Author

About the issue with outDegree and inDegree, I will take a look as soon as I can - i will let you know when I solve the problem.

About the edge direction issue:
To have the edges drawn as curves, you can either add a type attribute to your directed edges when you create them, like:

sigma.instances[1].addEdge('hello_world','hello','world',{
    type: 'curve'
});

Or you can set the defaultEdgeType to curve (by default, it's line):

sigma.instances[1].drawingProperties({
    defaultEdgeType: 'curve'
});

Currenlty line and curve are the only types implemented, but it is possible to add some more later (like arrow, for instance).

@vgheri
Copy link

vgheri commented Mar 27, 2012

Ok thanks a lot for all the effort in supporting me, it is really appreciated!
I changed the defaultEdgeType to curve, though I think that the attribute's name is a bit misleading as in the GEXF schema, that name is used to say if the edge is directed, undirected or mutual.

Thanks,

Valerio

@vgheri
Copy link

vgheri commented Mar 27, 2012

Also I found a very small mistake in the sigma.parseGexf.js library to parse the gexf file:
at line 138 you have: var al = attvalueNode.getAttribute('value'); and then the next line is edge.attributes.push({attr:attr, val:val});
But variable val doesn't exist as the defined variable name is al by mistake.

Valerio

@jacomyal
Copy link
Author

First, about the edges and the GEXF schema, I get your point, but sigma.js is initially only a graph drawing engine - which is why even the ForceAtlas2 is implemented as a plugin. So, I prefer the type of an edge to be describing its appearance, then it is easier to customize how to draw them (like arrow, curve2, dotted, etc...).

About the mistake in the GEXF parser, thanks a lot, I am fixing it, it will be updated in the repository soon :)

@vgheri
Copy link

vgheri commented Mar 28, 2012

I see and understand your point.
Anyway the library is working perfectly now about inDegree and outDegree attributes, thanks a lot for all the time you spent dealing with me!

Valerio

@hgillh
Copy link

hgillh commented Aug 3, 2013

Hi,

can we get pagerank, Closeness Centrality, Eigenvector Centrality of nodes ?

Thanks

@sp00
Copy link

sp00 commented Aug 28, 2013

I'd also be interested in hgillh request

@UzmanZafarMalik
Copy link

Hi,
sigma.publicPrototype.outDegreeToSize = function() {
this.iterNodes(function(node){
node.size = node.outDegree;
}).draw();
};

/*
Of course, it works as well with node.degree and node.inDegree.

How to test it:

  1. Open any sigma example - http://sigmajs.org/examples.html
  2. Open a console - http://bit.ly/GVshi6
  3. Enter the previous code
  4. Try it on the first sigma.js instance on the page:
    sigma.instances[1].outDegreeToSize();

Also, if you want to choose the minimum/maximum node sizes:
sigma.instances[1].graphProperties({
minNodeSize: 1,
maxNodeSize: 3
});

I need working example for ""outDegreeToSize"" plz help me every thing else is working fine with Sigma.js plz give me the even the shortest example but give me the one which is working i will modify it accordingly... waiting for reply..

@UzmanZafarMalik
Copy link

By example i mean like other example on sigma.js they are so helpfull put this code in one of this example and post it here .. thats all i want... Thanx in advance...

@g8d3
Copy link

g8d3 commented Jan 30, 2014

Did this change with v1.0.0? I am opening examples/basic.html but I am getting one error. I will post what I do.

@g8d3
Copy link

g8d3 commented Jan 30, 2014

First, I am trying sigma.instances(), but this method is not working without id:

TypeError: Object #<Object> has no method 'extends'

@gitbestsou
Copy link

This is throwing an error:"sigma.publicPrototype is undefined".What to do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment