NodeGL: An online interactive viewer for NodeXL graphs uploaded to Google Spreadsheet

Recently Tony (Hirst) tipped me off about a new viewer for Gephi graphs. Developed by Raphaël Velt it uses JavaScript to parse Gephi .gefx files and output the result on a HTML5 canvas. The code for the viewer is on github available under a MIT license if you want to download and remash, I’ve also put an instance here if you want to play. Looking for a solution to render NodeXL data from a Google Spreadsheet in a similar way here is some background in the development of NodeGL – an online viewer of NodeXL graphs hosted on Google Spreadsheets

In the beginning there was Gexf-JS, and it was really good …

There are several features of Gexf-JS I really like: it rendering positions of nodes as generated in Gephi so can handle large datasets; some great UI features including node summary and highlighting connections; and a search box to find nodes.

If you have followed some of my previous work you’ll know I’m interest in getting output, mainly from NodeXL, online to allow users to explore and interact with the data (e.g.  A template for rendering small NodeXL visualisations on the web … or EDGESExplorer: Simple force layout diagrams from edge lists stored …)

Most of these solutions have centred around using the d3.js library to render force layout graphs. A drawback of this method is that with my implementations d3.js calculates node positions based on node links in realtime so you have limited control node placement and you also start experiencing performance issues with large datasets. Gephi and NodeXL on the other hand let the user choose from number of different layout algorithms to calculate node positions and even if needed make manual adjustments. What Gexf-JS is doing is taking Gephi generated layout data and rendering it in the browser in a scalable format.

One of the reasons I was interested in Gexf-JS is one of the improvements I’d like to make to my online Twitter conversation visualisation tool, TAGSExplorer, is the option to display a hashtag community graph (who is friends with who) as a different way to explore the data. In a previous experiment rendering a twitter community graph for #IIE2011 using d3.js the result wasn’t brilliant especially when you compare it to the same data processed in Gephi and viewed using gexf-js.

So one workflow I’m thinking for TAGSExplorer is to display the conversation graph using d3.js with an option for users to upload a community graph processed in NodeXL to the same Google Spreadsheet. As a first step towards this I was interested in modifying Raphaël’s Gexf-JS code to render NodeXL data uploaded to a Google Spreadsheet, mainly as proof of concept and to also familiarise myself with Raphaël’s code.

The good news is it works and rather than just having the code sit on my test server I’ve released NodeGL as an online service and also put the source code back into the community. So below is an example graph generated in NodeXL and here’s a link to the version generated from the same data stored on Google Spreadsheets

If you want to try out your own here’s how:

1. Generate your graph in NodeXL and File > Save As > Excel 97-2003 Workbook (*.xls) clicking Continue and Yes in the dialog popups
2. Upload the generated .xls file to Google Docs making sure you tick ‘Convert documents, presentations, spreadsheets and drawings to the corresponding Google Docs format‘
3. Open the uploaded spreadsheet and select File > Publish to the web… and publish all the sheets
4. Copy the spreadhseet key from the link box (it will be similar to the example key highlighted in this link https://docs.google.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AqGkLMU9sHmLdFFUc3V0T3RjcFlBMVZCekpCTGcxVVE&output=html
5. To view your graph replace the highlight part of this url with your own spreadsheet key http://hawksey.info/nodegl/#0AqGkLMU9sHmLdFFUc3V0T3RjcFlBMVZCekpCTGcxVVE

You should know that …

Compatibility

NodeGL uses the canvas element, which might cause compatibility issues with older browsers. It has been tested with the latest Chrome, Firefox and Internet Explorer versions. It doesn’t work with Internet Explorer 8 or older.

Limitations

Only part of the NodeXL graph schema has been implemented so features like node labels and shape are ignored.

And finally … the code

I’ve only done limited testing so feedback is very welcome or you can Download NodeGL Code and tweak yourself

And really finally …

NodeXL has it’s own GraphGallery which allows users to submit graphs in GraphML format. These can be downloaded and viewed within NodeXL but I thought it would be useful to also have an online viewer to preview these graphs. I’ve started work on a NodeXL Graph Gallery Viewer which can turn uploaded GraphML like one for IIE2011 in results like this (I’ve let the folks at NodeXL know about this, they seem keen to develop further ;)