Group Selector - Custom group titles and user-defined ordering

[manalooo]

I'm using SigmaExporter to display an interactive map done on Gephi.

I just have one small thing I would like to figure out.

Group Selector : How can I display the title of the group here instead of group 1 group 2 ...?

What should I change in config.json and main.js?

Thank you in advance for any help !

[aendra-rininsland]

I'm also trying to figure this out. This might be a feature request; line 280 of main.js makes the group name look pretty hard-coded:

for (b in sigInst.clusters) a.push('<div style="line-height:12px"><a href="#' + b + '"><div style="width:40px;height:12px;border:1px solid #fff;background:' + b + ';display:inline-block"></div> Group ' + (x++) + ' (' + sigInst.clusters[b].length + ' members)</a></div>');

[computermacgyver]

Hi both,

It is a good feature request indeed. The question is where to get the group names from an attribute of the nodes (which causes some duplication but is easy to generalize) or another specific list which would require a bit more tweaking of to make the general case work but would save space/bandwidth by not having to store the full string of the group for each node.

Let's assume we wan't another node attribute for the moment. In that case, when we initialize the "clusters" object at https://github.com/oxfordinternetinstitute/InteractiveVis/blob/master/network/js/main.js#L91
we'd want to store the name of the clusters here and recall these later when the list is printed.

The version of main.js in the groupNames branch does this with a clusterNames associative array. It associates a color with a name and then these are used to print the group list on the line AEndrew identified.

You likely don't want main.js exactly as is because it simply selects the label of some node in that group to be the name of the group. Instead, you'll want to tweak line 104 linked above to be something like
sigInst.clusterNames[b.color]=b.attr["groupName"];
assuming each node has a node property "groupName" that is a string with the name of the group.

Alternatively, you may want to add list of color & group name pairs to the config.json file and simply set sigInst.clusterNames to this value. That would avoid the repetition of the name in all nodes.

This all assumes you still want colors as the basis for groups. If nodes are colored by something completely differently then one could just replace sigInst.clusters with an associative array of whatever the property is that groups nodes and use that in the print out area.

[jthrilly]

Hi both

Thanks for taking an interest in the plugin!

As Scott says, this is something we thought a lot about, but couldn't come up with a solution we were happy with in the limited time we had to complete this project. By the sounds of it, you would both be able to get by with a manually provided list of group names. I've provided a sample implementation below:

First, we need to create an array to hold the names of the groups. Let's just call it groupNames.

var groupNames = ['Group One','Group Two','Group Three','Group Four','Group Five','Group Six','Group Seven','Group Eight','Group Nine','Group Ten'];

We need to add that at the top of main.js to ensure that is is available to us later on. You will of course replace the values in the array with the labels you require for your groups.

Next we need to modify the loop which increments the group select names to reference our new array. Change the code previously at line 280 of main.js to:

    var a = [],
        b,x=0;
        for (b in sigInst.clusters) a.push('<div style="line-height:12px"><a href="#' + b + '"><div style="width:40px;height:12px;border:1px solid #fff;background:' + b + ';display:inline-block"></div> ' + groupNames[x++] + ' (' + sigInst.clusters[b].length + ' members)</a></div>');

There are a few crucial differences form the old code here. First, we set the iterator (the variable x) to zero rather than one, because javascript uses zero indexed arrays. Our first label in our groupNames array will therefore be at groupNames[0].

Next we change the label to point to our new variable (the portion which reads groupNames[x++]).

Hope this helps! Please reply if you have difficulties and I'll see what I can do.

[manalooo]

Hi! Thank you both for replying. Now I see more clear . I will do some changings in the programs. I will keep you updated.

Thank you again !!

[manalooo]

It worked :)

[hdean83]

Hi - Thanks! I am trying to create several graphs that slice a few different ways through my data, but will have the same set of groups. Is it possible to have the list of groups come out in the same order and with the same color scheme every time? Even though in the gephi environmnent, they are always ordered the same (ranked from high percentage to low in terms of number of nodes), they come out in various and different orders each time I export the graph into sigma.js.

Thanks again!!
HD

[Karreg]

The workaround is great, but it would be great with a predictive group order. Does someone know how is generated the group order?