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
//Loop all nodes
//creating new node attribute "big" to indicate if it is highlighted
n.attr["big"] = 0;
//if node label or index contains sarchterm
if(( != -1 || n.label.indexOf(search) != -1) && search != "") 
//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
//Set nodesize to original size
n.size = n.attr["big"] ? n.attr["true_size"] : n.size;
//mark as not highlighted
n.attr["big"] = 0
}).draw(2, 2, 2)


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


  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 *