Animated node highlighting with sigma.js

To get an idea of how the animation will look like, watch the video at the bottom of the page.

function highlight(search) 
{
if(search != "")
{  
//Center Graph
sigInst.position(0,0,1).draw(2,2,2);
}  
//Loop all nodes
sigInst.iterNodes(function(n) 
{
//creating new node attribute "big" to indicate if it is highlighted
n.attr["big"] = 0;
//if node label or index contains sarchterm
if((n.id.indexOf(search) != -1 || n.label.indexOf(search) != -1) && search != "") 
{ 
if(!n.attr["big"]) 
{
//keep original node size in mind
n.attr["true_size"] = n.size;
//set size to whatever (or color or label etc..)
n.size = 600;
//mark node as highlighted
n.attr["big"] = 1
}		
else 
{
//Set nodesize to original size
n.size = n.attr["big"] ? n.attr["true_size"] : n.size;
//mark as not highlighted
n.attr["big"] = 0
}
sigInst.zoomTo(n['displayX'],n['displayY'],3);    
}
}).draw(2, 2, 2)
}

Gnut.

4 thoughts on “Animated node highlighting with sigma.js

  1. Hi, i’m not clear how to include this function in my graph, where should I call highlight() and what’s the arg ‘search’?

    • Hi.

      the search arg ist the term you want to highlight in your graph. Watch the video. In this case highlight() is called by clicking a term in the timeline, but you can call it in any js-event you want. highlight() must be defined in a scope, where your graph is accessible via the sigInst object.

      Hope this helps..

      g.

  2. thanks!
    but sadly this function is outdated, there is a way to port this code to the current sigmajs release?

Leave a Reply

Your email address will not be published. Required fields are marked *