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.
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!
Hi Scott,
This is not the case in version. You can find two snapshots in the link below
https://drive.google.com/folderview?id=0BwU4wUbZkb__VnZHQmFEMTJmeXM&usp=sharing
Am I doing something wrong?
Thanks,
Omar
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
Hi Scott,
It worked
Many thanks for your reply
Thanks,
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).
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.
Hi Hugh, sounds exciting. I’m sending you an email now. Depending on the data and desired outcomes, something using the Leaflet framework might work well. An recent example of something Josh and I produced is here http://oxfordinternetinstitute.github.com/football-mapping/
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.
Sorry for my last post. I was using the incorrect exporter! Is there any way to show the text of each node. It has disappeared from my network.
http://itsfullofstars.net/griffsgraphs/js/disease/#
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”,
)
Also, can these be embedded within say a wordpress site rather than running it its own tab? Thanks.
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="http://itsfullofstars.net/griffsgraphs/js/disease/” 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="http://itsfullofstars.net/griffsgraphs/js/disease/” width="100%" height="500px">Your browser is not configured to show this content. Please try to <a href="http://itsfullofstars.net/griffsgraphs/js/disease/” target="_blank" rel="nofollow">view the network in a new window</a>.</iframe>
Thanks. Though, the hyperlink for the logo doesn’t work properly: it simply adds a directory to the end of the current directory which means you can’t link to any side “up” and can only linke down the tree. Or am I doing something wrong? See image link here:
http://itsfullofstars.net/griffsgraphs/media/project_files/diseases/js/
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
http://www.itsfullofstars.net/griffsgraphs/
(note the http://)
or make it a valid relative link. e.g.,
/griffsgraphs/
(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!
No problem. I think I’ve got a handle on it now. I’ll be adding a bunch of projects to:
http://itsfullofstars.net/griffsgraphs/interactive/
I’ll let you know if I have any problems. Thanks
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