Home

How to create an interactive network:
coming soon

Information about the project / contributing:
This project contains the gephi plugin code to export a network in json format, display a dialogue window to gather settings and write these to config.json.

It then places these two files (data.json and config.json) into an existing template held as a zip file in this project. That template/zip file comes the network directory in the following repository https://github.com/oxfordinternetinstitute/InteractiveVis/tree/master/network If anyone wishes to contribute changes to the HTML/JavaScript, please branch that repository. Thanks!

What are the others technologies used to generate the page ?

• FancyBox : fancybox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. (Licensed under both MIT and GPL licenses). It's used to display node information. More information : official website

• excanvas : Used to be abble to use the html5 render canvas under Internet explorer. More info : http://excanvas.sourceforge.net/

• sigma.js : Used to draw the graph, sigma is a jquery library to display graph inside a browser using html5 and javascript. More info : [http://sigmajs.org/]

How to configure the rendering ? Inside the export folder generated by gephi you will find a config.json file in wich many parameters can be configured (some of them are accessible via the export dialog inside gephi). Open config.json in a text editor (gedit, kate, notepad, textmate, etc.) to edit it.

Some examples are:

Node labels Labels are printed depending on how zoomed in the graph is and the size of the node at that zoom level (in order not to have too many labels printed that they become unreadable). You can customise this behavior by changing the value : "labelThreshold". This is an example of what you can do with the config.json file.

Edge thickness / Node size

The maximum and minimum node sizes and edge thicknesses are in the "graphProperties" section of the config.json file. The default values are

      "minEdgeSize": 0.2,
      "maxNodeSize": 7,
      "maxEdgeSize": 0.5,
      "minNodeSize": 1

Feel free to adjust the min/max sizes of edges and nodes to suit your particular data. After making a change and saving (possibly uploading) the file you will need to refresh your browser (ctrl+r) to see the change.

Curved vs straight lines config.json has the default property of

"defaultEdgeType": "curve",

which produces curved edges. Currently, edge arrows are not as visible on curved edges as on straight edges. To try the graph with straight edges, change this line to

"defaultEdgeType": "line",