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 …

Gexf-JS ViewerThere 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

iie2011

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

7 thoughts on “NodeGL: An online interactive viewer for NodeXL graphs uploaded to Google Spreadsheet

  1. Danielle

    This is a great tool! I’ve been using nodexl for a little bit, but I really wanted to be able to display an interactive map. Exporting it to graphml and using graphml viewer worked to some extent, but it’s a bit clunky. This seems like a great alternative. Are there current plans to continue developing it and extending it to include all of the options/labels/vertices of nodexl?

    Also, I don’t know if others have experienced this, but while I was able to get the lines of my map to display on nodegl, I was unable to see the labels for any of the nodes (I can see them on your example). Is this a common problem?

    http://hawksey.info/nodegl/#0Ag33wO77s1yldEJBdVk0WkkydEV3bXRHeXNSUmo4bEE

    Thanks so much for a great tool!

    1. Martin Hawksey

      Post author

      Hi Danielle – glad you find this useful. The missing labels is due to a scaling issue I never quite resolved. If you look at the source spreadsheet for the example you’ll see I’ve fiddled with the node size (gephi, which the code was originally written for by Raphaël Velt, uses a different node scale). I’ve no plans to develop the code further but it’s all open source so anyone can take it and improve.
      Martin

  2. Pingback:

    NodeGL: An online interactive viewer for NodeXL graphs uploaded to Google Spreadsheet « Another Word For It

  3. Dhaval Bhavsar

    Hi, I think this is the best thing, I just can’t get it to work. I have tried the steps outlined in the pop-up to the tool, copied the key to after the hawkeye portion, but when it comes to the renderer, nothing seems to load. I am curious what reasons could lead to this.

  4. pooja

    hi, i have been capturing twitter tweets usin tags template 2.3, but the results are different from yours for example in our edges and vertices list i am not getting degree, between ness values, what can be the reason, because of which i dont get satisfactory output.
    pls suggest the reason and the amendment. i gor tags templet from ur post on getting “hashtags community”.

  5. Pingback:

    #LAK13: Recipes in capturing and analyzing data – Using SNA on Canvas Discussions with NodeXL (for when it’s not a SNAPP) Jisc CETIS MASHe

Comments are closed.