Add groups to legend.

[ConnorHayward]

Hello.

I have produced a graph which has groups made by a node attribute, Department. Using one of the other tips, I have managed to change the group selector to show the correct group names and colours.

However, I would also like to have a similar list visible in the legend part, to allow easier reading of the graph without opening the drop down. I have fudged it by creating separate images and calling those from the style sheet, but I was wondering if there was a more elegant solution using the main.js?

I have very little CSS, html or JavaScript knowledge, so I apologise if this is an easy fix.

[computermacgyver]

Hi Connor,
This is a nice idea for a new feature to be added in a future version, and I will keep it open as a reminder for that. Also, longer term, but linked with this, is a need to make sure the legend doesn't become too tall such that it doesn't fit on the screen (particularly with mobile devices).

I don't have a quick and easy fix for you to implement right now, I'm afraid. The nicest looking solution would probably be editing the HTML of the index.html file to add in the legend, but this will require some more familiarity with HTML.

[ConnorHayward]

I have had a good look at the scripts running in the background, and with a fair bit of poking around, have found a fairly simple solution. It requires reading through the nodes to get the groups, then pushing these to a table.

You can also reuse the html from the group select box to populate the table, although the reliance on color to group makes this somewhat unreliable.

[CBC88]

Hi Connor

This is a long shot but I seem to have the same issue (for example I want to change 'Group 1' to 'Material' and so on). Could you explain how you managed to fix this please? Bare in mind I'm a complete noob for programming.

This is for a network of all researchers in additive manufacturing

[ConnorHayward]

Well, it has been a long time since I have looked at any of it, or JS in general, but I will help as much as I can.

Step 1:
In the config.json file that is generated, there is a line like:

"groupSelectorAttribute": "foo",

Where foo is the attribute storing the group name in the node (this is what the column is called in Gephi, I believe).

Now this is where my memory is hazy, as I added a few more features as well, and I only vaguely remember what was what (I should comment my code more).

In essence, you need to loop over all the nodes, reading in their value for the foo variable, filter to get unique names, then use that to populate a table in the legend section. I can give code examples when I get my head around what I did last time.

Sorry I can't be of more help right now.

[CBC88]

hi! thanks for the reply! I'll try it out thanks so much ! It was a longshot anyway! Chris

…

On 22 February 2017 at 19:40, ConnorHayward ***@***.***> wrote: Well, it has been a long time since I have looked at any of it, or JS in general, but I will help as much as I can. Step 1: In the config.json file that is generated, there is a line like: "groupSelectorAttribute": "foo", Where foo is the attribute storing the group name in the node (this is what the column is called in Gephi, I believe). Now this is where my memory is hazy, as I added a few more features as well, and I only vaguely remember what was what (I should comment my code more). In essence, you need to loop over all the nodes, reading in their value for the foo variable, filter to get unique names, then use that to populate a table in the legend section. I can give code examples when I get my head around what I did last time. Sorry I can't be of more help right now. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYv7b54ravBEhLPKLldsBrth-85bHb5xks5rfIEggaJpZM4FozW7> .

[ConnorHayward]

Found the line! I may have fist pumped on a train too!

In the main.js file, there is a function called configSigmsElements

This function does a lot, but the line you want looks like

For(b in sigInst.clusters) a.push...

Then some HTML stuff. In here, it has 'Group' + x++' which assigns the groups their name. Change the x++ to sigInst.clusterTitles[b] and that should get the names to appear in the group selector.

A similar line in the legend section can be added to make a legend too, iirc.

[ConnorHayward]

Forgot a few key points!

Around line 90 something, there is a line
Dataready = function()

Add a line:
a.clusterTitles = {};
Below this.

Then in the function(b) section add an if statement reading in the group titles if they match what ever attribute you set in the config file. I can give more details if needed.

[CBC88]

Hah wow ! That's really great thanks - glad this thread brought joy to two of us in one way or another haha. Will switch on my laptop abd try it out, thanks again !

…

On 27 Feb 2017 19:24, "ConnorHayward" ***@***.***> wrote: Found the line! I may have fist pumped on a train too! In the main.js file, there is a function called configSigmsElements This function does a lot, but the line you want looks like For(b in sigInst.clusters) a.push... Then some HTML stuff. In here, it has 'Group' + x++' which assigns the groups their name. Change the x++ to sigInst.clusterTitles[b] and that should get the names to appear in the group selector. A similar line in the legend section can be added to make a legend too, iirc. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYv7b__NA2KTo5Y_6bklxotwWqbr7lTYks5rgxT5gaJpZM4FozW7> .

[CBC88]

Hi Connor First off thanks again I've tried to do what you suggested but unfortunately I am a complete noob at programming. I've looked up places online to try figure out what you meant for the if statement etc but couldn't get my head around it. Could you maybe explain what you meant in lamen's terms hehe? thanks!

…

On 27 February 2017 at 19:41, ConnorHayward ***@***.***> wrote: Forgot a few key points! Around line 90 something, there is a line Dataready = function() Add a line: a.clusterTitles = {}; Below this. Then in the function(b) section add an if statement reading in the group titles if they match what ever attribute you set in the config file. I can give more details if needed. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYv7b-8aMOdxSVVAs2on_todsScSGA7Mks5rgxjPgaJpZM4FozW7> .

[StoicNZ]

network.zip

@CBC88

Replace your network.zip with this or extract this and copy it over your exported directory.

If you have groupings checked, it'll name the groups after your group value.

@computermacgyver I'll pull request this, this evening - it's a little weird pull-requesting a zip file though, heh.

[computermacgyver]

Thank you, @StoicNZ! I can grab the zip from here --- no need for a pull request of the zip. If do have time to create a pull request, the best place for that would be the "network" folder of this repository where the HTML code is

[StoicNZ]

Seems to be quite a few changes in that repo, @computermacgyver - with CSS, ReadMes, config files. Having some 2FA issues (moved country, 2FA issues to push - thankfully still logged in here though). Do you mind pushing that network file to this repo and I'll go ahead and migrate changes to that other repo this coming weekend?

[schignel]

I have a very similar issue as @ConnorHayward. I have a column that I would like to base the groups off of so that people can slice the graph by different categories. @StoicNZ and @computermacgyver, it looks like you were working on a simple way to do this? I'd be very grateful for any help!

[computermacgyver]

Hi @schignel , Thank you for flagging that this still needed to be incorporated. Does replacing your js/main.js file exported from Gephi with the file of the same name from the zip file uploaded by StoicNZ do what you want? Please keep all the other files the same and only replace the js/main.js file. When you export your graph from Gephi, you should choose choose the column with the names as the column to use for the group values.

[schignel]

Thanks @computermacgyver! Replacing the js/main.js file as you suggested worked.

I have a quick follow up question on this:

The legend worked for three of my groups (the black, white, and grey nodes). However, I have separate colors assigned to different nodes in the fourth group, "Sustainable Development Goals." Is there a way to have these represented as a single group based on the column value rather than split out by the node colors? I've attached a screenshot for you.