Build your own interactive network

15 November 2012 62

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.

62 thoughts on “Build your own interactive network

  1. Griff

    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:

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


  2. Scott Post author

    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.

  3. Griff

    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.

  4. Griff

    Also, can these be embedded within say a wordpress site rather than running it its own tab? Thanks.

  5. Scott Post author

    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:
    and remove this completely (including the comma after closing “) or change it to a fully qualified URL to some image (e.g.

  6. Scott Post author

    I think the experience is a bit better in a full window, but it is possible to embed them in a wordpress entry using an iframe (the same as e.g. YouTube video embeds). So, for example, including the following code in the “html” view of the wordpress editor would include the visualization above:

    <iframe src="” width="100%" height="500px"></iframe>

    It is possible to put something before the ending tag that will show only when a browser does not support iframes — really every browser should now, but you could do something the following to include the direct link just in case:

    <iframe src="” width="100%" height="500px">Your browser is not configured to show this content. Please try to <a href="” target="_blank" rel="nofollow">view the network in a new window</a>.</iframe>

  7. Scott Post author

    The url is interpreted as a relative path unless it is an absolute, fully qualified url (e.g. starting with http:// or https://).

    So, either change the hyperlink to
    (note the http://)

    or make it a valid relative link. e.g.,
    (no http://, but staring with a /, and assuming it’s on the same server)

    Looks like the network display is really coming together. I appreciate your time to ask these questions, because it points out where we need validation and documentation. Happy New Year!

  8. supersambo

    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?


  9. Scott Post author

    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.

  10. Hugh

    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.

  11. Gunnar

    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.

  12. Omar

    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.

  13. Scott Post author

    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!

  14. Scott Post author

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

  15. Scott Post author

    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.


  16. Omar

    Hi Scott,

    It worked πŸ™‚
    Many thanks for your reply


  17. Mike Widner

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

  18. Behram

    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.

  19. Scott Post author

    Thanks, Mike, for sharing. I’m glad you could make use of the plugin, and the fisheye option is a good idea too.

  20. Omar

    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.


  21. Omar

    I managed to do it by manipulating main.js file.

  22. Omar al Assil


    Just wanted to share with you my recent project in which I used you sigma.js exporter.

    This has been mentioned in an article from Amnesty International

    I also blogged about in:

    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.


  23. Scott Post author

    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!

  24. Omar al Assil

    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

  25. Scott Post author

    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.

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

  27. Will

    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?

  28. Scott Post author

    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.


  29. Robert Coop

    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!

  30. Robert Coop

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

  31. Scott Post author

    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.


  32. Raksha Agarwal

    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.

  33. Tony HIrst

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

  34. Trevor Richter

    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?


  35. Patrick

    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?


  36. Scott Post author

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


  37. PrinceN

    Hello, this Add on to Gephi is awesome, thank you very much.
    I have changed some things to adapt it to what I want (label threshold, straight edges, etc.) but after days I have to admit I am unable to change the default zoom level, I have tried to change the sigma canvas and other things.

    But unsuccesful, now I really need help to be able to show the graph at 70% zoom when you launch it.
    Thank you very much if you can answer,

  38. Mahdi Moqri

    Dear Scott,

    I tried the fix you mentioned, but unfortunately it does not work. Gephi still produce the same json file with the same random order. Please let me know if you have any other suggesitons.


  39. Scott Post author


    Thank you for your interest in the plugin.

    You can use the zoomTo(x,y,ratio) JavaScript function to change the zoom level after the network loads.

    For example, we use the following when the user clicks the Zoom In button:
    var a = sigInst._core;
    sigInst.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 1.5));

    And this for the Zoom Out:
    var a = sigInst._core;
    sigInst.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 0.5));

    You may also need to change the “minRatio” and “maxRatio” of the sigma.mouseProperties section of the config.json file to control how far in/out the user can zoom on the network.


  40. Scott Post author

    Hi Mahdi,

    I’ll need to re-investigate this. Thanks for letting me know. The only workaround I can think of as a quick, short fix is to manually (e.g., with python or similar) reformat the data.json file to put the attributes in the order you require.


  41. Scott Post author


    Thank you for your interest in the plugin.

    You can use the zoomTo(x,y,ratio) JavaScript function to change the zoom level after the network loads.

    For example, we use the following when the user clicks the Zoom In button:
    var a = sigInst._core;
    sigInst.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 1.5));

    And this for the Zoom Out:
    var a = sigInst._core;
    sigInst.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 0.5));

    You may also need to change the “minRatio” and “maxRatio” of the sigma.mouseProperties section of the config.json file to control how far in/out the user can zoom on the network.


  42. annie

    I’d like to change the font — or even just the font family — and the font size/scale for the labels on nodes.

    Changing the defaultLabelSize in config.json doesn’t have any effect except on hover. I have a fairly sparse network and would like the non-hovered labels to fill up more real estate/be more readable, but all I can get is tiny.

    I also can’t figure out how to change the font or the font family for the non-hovered labels. I thought I had tracked down the font setting in sigma.js (along with an option for the defaultLabelSize). But again, nothing I changed there actually changed the

    I feel like I must be missing something big, and must be mis-interpreting the various places where configurations are scaled. Any thoughts?

  43. Mahdi

    Thanks Scott,
    Another way I found around it is to change the attribute orders in nodeActive() in your main.js. The attributes are staked in an array named “e”. For example adding these lines will change the order of attribute 0 and 1:
    var b = e[0];
    e[0] = e[1];
    e[1] = b;

  44. Scott Post author

    Great. I hadn’t thought of that, but it does make sense as a quick hack for this situation. Thanks for sharing. Looks like I need to brush up on my Java UI to get an ordering option into the export dialogue. Cheers.

  45. Scott Post author

    Hi, sorry I just saw this comment now. Try to open the config.json in a text editor (e.g., notepad) and add/change the following properties, which should all be within the sigma->drawingProperties object.

    "sigma": {
    font: 'Arial',
    hoverFont: '',
    activeFont: '',
    fontStyle: '',
    hoverFontStyle: '',
    activeFontStyle: ''

  46. annie

    Thanks for the reply, Scott! I’m not quite there yet . . .

    When I change the font properties in drawingProperties, as you suggested, the changes apply to the labels that show up when I’m hovering on a specific node. For instance, changing “defaultLabelSize” makes the hover text larger. I was able to change the font, too, but again it only applies to the hover labels. I’d like to change, though, the standard text that shows up in the visualization for all nodes, not just the one I’m currently hovering on.

    Looking at your response from earlier, it may be that I need to add a new property to cover this type of text, but I don’t know what its name would be.

    To use one of your project’s examples, for instance, I took a look at the “Links between UK central government websites.” When that loads, I can see all across the visualization the individual labels for nodes —,, etc. Those are the labels I would like to be able to make larger.

    (Apologies that I’m likely being unclear — the language for this is new to me!)

  47. Paige Brown Jarreau (@FromTheLabBench)

    Hi! I’m really interested in this plugin, and creating an interactive graphic with some data I already have. However, I don’t know anything about uploading the resulting network folder to a webserver, or how I would do that. Perhaps you can point me in the right direction? Would I have to start with buying a domain name for a website?

  48. Imtiaz

    I want to prepare the edges and nodes files for trade data, i have list of exporters and importers with the amount of trade. I want nodes size according to the total trade of a country and edges thickness showing the bilateral trade. Can you help me with this issue?

  49. serizay

    Hi Omar, Scott, Mike,

    I would like to have in the information panel an image and a link different for each node, as it is in Mike’s website.

    But i don’t know which line i need to change in the main.js to have te hyperlink instead of the plain text in the information panel?

    And i don’t know how to attribute an image to each node?

    Thank you a lot for your help,

  50. Prateeti


    where do I put this line “sigInst.clusterTitles[b] + β€˜ (β€˜ + sigInst.clusters[b].length + β€˜ members)’” in the code.

  51. Scott Hale Post author

    Before other modifications described, it is line 290. See

    You would want to change

    Group ‘ + (x++) +

    ‘ + sigInst.clusterTitles[b] +

    (the rest of the line giving the number of nodes in the group is unchanged from what is already in the file.)

    If your group attribute is a colour, then the above code will just print the name/code of the colour. In that case, look instead at the changes shown here:
    You will want to update b[“label”] to whatever attribute (column) has the text you want displayed in your graph (e.g., b.attr[“group_name”])

Comments are closed.