Build your own interactive network

Similar to the map builder, there is a web-based version of the network builder under development. The web based version is useful as it provides immediate feedback on a new interactive visualization — due to browser security restrictions the visualizations will not run from a local computer without a webserver. Nevertheless, the scale and size of network data also demand an offline alternative for networks.

I am very happy to announce the first version of such an option: a Sigma.js export option for Gephi. The code we have written for this has been tested, but it should be considered an ‘alpha’ version. We very much welcome feedback and information on any bugs you discover.

To create an interactive network visualization with this offline approach, you will need to have Gephi installed. It is free and available for Linux, Mac, and Windows, and can be downloaded from the Gephi website.

Once installed, open Gephi and go to Tools->Plugins. Click “Available Plugins” and find “SigmaExporter” in the list. If you don’t see it, please click the “Reload Catalog” button and see if it then appears. Place a checkmark next to it and click the “Install” button at the bottom of the window. Accept the license agreement (GNU GPL v3), and click to install even though it hasn’t been signed (I’ll need update the plugin to address this later).

You must then exit Gephi and open it a second time. From that point onward, you will have a new menu option in the File->Export menu. Open any network and visualize it the way you like within Gephi. When you are ready to share your network online, click File->Export->Sigma.js template… . Close a suitable location and provide the necessary information (anything marked with * should be filled in at a minimum). Click ok and your network will be built. You will not be able to preview the network on your local machine without a webserver installed (this is why a web version is in the works). Upload the “network” folder in the location you specified to any webserver of your choice and share the link with all your friends. We’d love for you to share the link with us too and provide feedback.

If changes are needed, re-run the export wizard a second time and re-upload. The only files that change are config.json and data.json. Advanced users may also wish to just open and edit config.json in a text editor after formatting the JSON with JSONLint or another tool.

44 thoughts on “Build your own interactive network

  1. Hi there — Great plugin for Gephi, thanks!

    Can you direct me to which file would contain info on edge thickness & color, as I’d like to make the network easier to see by increasing edge thickness?

    Thanks,
    Trevor

  2. Is is possible to easily display edge labels either:

    1) attached to each edge, or
    2) in the info box (so for example a list of edge attribute info associated with each node listed in the info box).

    What I’d like to do is pass in a graph where the edge labels are descriptive text, and when I search for a node to see the other nodes it’s connected to, get a list of those nodes along with the appropriate edge description.

    (I guess the general case would be multi-edges with different labels, in which case it would be nice to list each label edge associated with a particular node).

  3. Hi Scott! This is a great tool; I’ve gotten overwhelmingly positive feedback when showing Gephi graphs exported to Sigma.

    Are you thinking of continuing this work further? I was wondering if there were any plans to allow for filtering via multiple groups, etc.

    I also had a specific question about group selection. It appears that right now each group is just assigned a number for selection, but this doesn’t really work well for large graphs with 2000+ nodes and 100+ groups. Have you looked at allowing selection by the actual attribute values? I think I may be able to hack that into my copy (via changing the ‘dataReady’ function a bit), but I was wondering if you’d looked at this already. Thanks!

    • It was actually fairly easy to hack this in if you’re interested. The only changes that need to happen:

      In the dataReady function, add:
      a.clusterTitles={};
      In the dataReady.a.iterNodes loop, add:
      if (config.features.groupSelectorAttribute)
      a.clusterTitles[b.color] = b.attr.attributes[config.features.groupSelectorAttribute];

      Change the text displayed for each group to:

      sigInst.clusterTitles[b] + ‘ (‘ + sigInst.clusters[b].length + ‘ members)’

      This doesn’t do any error checking or fall back to group labels, etc., but it got the job done for me. Sorry for the formatting and all, just wanted to update you with the changes if you were interested.

      • Awesome, Robert. I’m glad you’re finding the exporter helpful. I think that’s the same way I would have suggested it. Thanks for posting back the changes. There are a number of additional features I can to make available on the plugin where the JavaScript and HTML are already in place, but I need to brush up on my Java GUI understanding to expose these options elegantly in the wizard in Gephi. Once I get a solid block of time I’ll try to get this and some other features incorporated.

        Cheers,
        Scott

  4. This plugin is great! I’ve been using it for a project I’m working on to visualize court cases, but I have one issue with the Information Pane. I have a number of other attributes attached to each node and I would like to order them in a particular way but the plugin seems to randomize the order for each node. Is there a way to set an order to the attributes?

    • Hi Will,

      That’s an excellent point and one I’ve simply overlooked for now. The JavaScript simply displays the attributes in the order they are found in the data.json file. The data.json file in turn should list them in the order left to right as they appear in the Data Laboratory in Gephi. Unfortunately, I don’t think there is an easy way to re-order columns in Gephi. So, I’m going to email you now and we can find a quick fix to get you rolling and then I’ll return to building this into the exporter at some point (it fits with allowing the user to choose what attributes to include/omit, which is also on my todo list).

      Update: It seems you can click and drag a column in the Data laboratory view. With your data loaded and on the Data Laboratory tab try to drag and drop the column titles/headers into the order you want. After you’ve done that export again to update your data.json file. Let me know if that works.

      Cheers,
      Scott

  5. Pingback: Visualising the network of co-enrolled course subjects | MoocMoocher

  6. Hello,

    Just wanted to share with you my recent project in which I used you sigma.js exporter.
    http://alharak.org/nonviolence_map/en/

    This has been mentioned in an article from Amnesty International
    http://www2.amnesty.org.uk/blogs/campaigns/map-non-violent-activism-syria

    I also blogged about in:
    http://wp.me/p1rQ1i-5L

    You project name is mentioned in the Amnesty article and in my blog and I will include it in the more info page in the next update of the network.

    There is an English and Arabic version of the network. I had to change the CSS and main.js files for better alignment of Arabic text and I am happy to share it with you if you like.

    Thank you for this effort and hope that you keep up the good work. Looking forward to your future updates.

    Regards,
    Omar

    • Thanks, Omar, for sharing! Awesome work overall and on adapting it for Arabic as well. It’d be great to get just the CSS changes that were needed to make the Arabic text align properly. I’m keen to see the platform support additional languages (and Arabic is not among the language I speak right now unfortunately). Great work!

      • Scott,
        Yes sure i will send the CSS file for Arabic language by email.
        BTW, the mobile CSS is not working properly, is there any plans to make it work on mobile phones?
        Thanks, Omar

        • Thanks, Omar. Thanks for bringing the mobile issues to my attention. The code was tested on Android (3.x and above) and iOS when it was first released, but updates to the browsers in the meantime might have changed something. I’ll have a look. There are some underlying issues with canvas/sigma not registering pinch-and-zoom gestures correctly, which is why we added the buttons for zoom as well.

        • I’m studying for using gephi. And i find that sigma.js is excellent. But when i export the sigma.js with gephi , it’s a little bit different from yours.

          How can you add photo?or how can u add links?

          patrick

          • Hi Patrick,

            The plugin is using the original version of sigma.js—a newer version has been released recently, which may account for the differences you see. Images should be easy to add with the “imageAttribute” property in the config.json (see http://oxfordinternetinstitute.github.io/InteractiveVis/network/config.json for an example). Just make every vertex contain a link to the photo to show in the right side bar. URLs are not actually automatically converted to hyperlinks, but you can simply include html code in a vertex attribute and it will be rendered as such. Alternatively, there is probably a nice tweak to the main.js file to automatically find and make urls into hyperlinks—if you go this route it would be great to incorporate your change back into the plugin.

            Cheers,
            Scott

    • Hi, I really liked your work. Can you please tell me more about your work? Like which Layout have you used? How did you get your visualization on the website? I am a student , and I am building a Network Graph to connect Professors with their Research Interest. I used Sigma.js plugin to export the Graph, But now I do not knwo how to proceed further with this.

  7. Scott, I played with this tool a bit and think it’s clean and neat. I was thinking of modifying it and incorporating it into a project that I’m building, but wanted to clarify a couple of things about the license before deciding. It seems like you guys put a creative commons license on the tool, which requires attribution. I’m happy to put a link on the page that I’m building referencing that you all built most of the visualization, as well as keep all the attribution comments in the source code. But is it okay if I change the page title, remove/reduce some of the Oxford logos that appear on the page, etc.? Please let me know. I appreciate it.

  8. Thanks for this wonderful plugin. It made it super easy for me to create some dynamic graph pages. I modified a few things in the file layout (symlinks so all my graphs share the same CSS, index.html, and javascript) and tweaked the javascript a little bit to include other node attributes laid out how I wanted. You can see the work in progress here: https://www.stanford.edu/dept/DLCL/networks/ I also added the sigma.js Fisheye plugin, which you might consider including as an option during export. These are all very easy changes that made this plugin even more useful for me.

      • Hi Mike, Scott,

        I noticed in the projected of Stanford above that there is a link to the profile in the information pane, would you mind telling me how to include hyper links in this pane? I have a link for each node and I included it in the attributes but it appears as plain text not as a link.

        Regards,
        Omar

  9. Great work.
    I need to include some information for the nodes (as in the followers at @OIITwitter project). How can I do that? I have the data in my data table in Gephi under different columns.
    Thanks,

    • Hi Omar,

      This should happen automatically if you are using the SigmaExporter plugin. Each column in the Node view is listed in the right hand panel (the column name in bold followed by the value for the selected node). There is a limitation currently that extra edge information is not included (not sure where to put it at the moment), but nodes should be fully covered. If this isn’t working, please do follow up and we can track down the issue.

      Best wishes!

        • Replied to you in email a week ago, but also posting here for reference.
          ———————-
          Hi Omar,

          It looks as though you selected the attribute as the “image attribute”. In that case, it won’t appear but will try to load an image at the location stored in the attribute. Since that location doesn’t exist in your example nothing is shown.

          Try setting the image attribute to “None (default)” and your attribute should appear in the right hand panel.

          Scott

  10. Great plug-in that makes it a lot easier to get interactive network graphs from Gephy. A few things I would like to see in an update:
    *Make the info/legend/search-box on the right minimizable, sometimes you want to use as much of the screen as possible for the graph.
    *Include the possibility to chose between hiding and grayscaling all non-neighbours.

    • Hi Gunnar, apologies for the delay.

      I think these are both great suggestions. The HTML and JavaScript code is all open source; so if you or anyone you know wants to take a look at making the legend (etc.) minimizable that would be great.

      In the next release, the “dim” option is fixed and provides the option to grayscale non-neighbours (rather than the default of hiding them).

  11. Hi Scott, I really like your date graph example using political borders. I have some data related to internet access which I was looking to plot on this kind of map and you have the solution…I am wondering if and how it might be possible to make a map visualization out of language borders rather than political boarders. I have shape files and I have points with coordinates.
    Thanks.

  12. Hi,
    this plugin is great. thank so much. exactly what gephi needed.
    I’m trying to automate the building of a network for some relational data. so I was asking myself if it was possible to use this in combination with R leaving out gephi. The idea is to write a R-script which automaticly builds the /data.json file. Would this be possible or are there some dependencies I didnt untderstand?
    Another question is if there is a way to search within the node attributes?

    thanks

    • Hi, thank you for your interest. This is absolutely possible. The two things to note:
      1) The network has to be laid out in R/igraph already (i.e. it must have x,y coordinates for each node). The display framework is not actually doing any layout work
      2) It will also be necessary to supply the config.json file. This file has the display configuration options (title, logo, link, legend, etc.) in it. Looking at the examples the format should be self explanatory, but if not feel free to drop a comment/email and I’ll be very happy to help.

      To the second question, this isn’t currently within the framework, but could be added. I’ve raised a ticket in our issues tracker, but can’t promise when it might be addressed by.

    • Hi Griff, I’m glad you’re finding the exporter useful. There are a few settings in the config.json that are yet properly exposed in the UI. At each zoom level, the largest nodes are labeled. This behavior is controlled through “labelThreshold” in the config.js. To show more node labels:
      1) Open the config.json in a normal text editor (notepad, textmate, etc.)
      2) find the section that currently reads “labelThreshold”:10
      3) change this to “labelThreshold”:5
      4) Save the file, upload it, and refresh the graph in your browser

      The exact value in step three will be a bit of experimentation. “labelThreshold”:0 will label every node at every zoom level. A value somewhere between the current value of 10 and 0 should hopefully lead to a nice balance of labeling enough nodes to give a good orientation to the graph without swamping the viewer with too many labels.

      • Thanks for your help! It worked but is there not an option to make it scaled like it is in Gephi? i.e. large fonts for the big nodes and small fonts for the small nodes. Also, in my link, there is a broken image in the top left – what is this meant to be and how can it be fixed? Thanks.

        • No problem. There isn’t an option to make text labels scale at the moment, but this is a great suggestion. It is something I will add to the todo list.

          The broken image is the ‘logo’ specified in the wizard. The easy way to fix this is to simply find the part of config.json that reads:
          “file”:”www.itsfullofstars.net/griffsgraphs/”,
          and remove this completely (including the comma after closing “) or change it to a fully qualified URL to some image (e.g.
          “file”:”http://itsfullofstars.net/griffsgraphs/wp-content/uploads/2012/12/logo2.png”,
          )

  13. I am experimenting with your new plugin and have found it fantastic. My toy model is the simple disease graph but how much more work is it to say:

    My first test here: http://itsfullofstars.net/griffsgraphs/js/disease/index.html#

    *make it borderless
    *make the font size dynamic (currently swamped)

    I’m thinking of really putting some time in to converting all of my graphs to be viewed interactively. I’ve had quite a number of requests to do so and it seems like the natural next step with these graphs. Thanks for your efforts.

    GG

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>