Ported: Tony Hirst’s Using Protovis to Visualise Twitter Connections to Google Spreadsheet with Embeddable Gadget

Update: The Social Graph API has been deprecated by Google and Protovis is no longer being developed. I've revisited this recipe using new tools in Deprecated Bye-bye Protovis Twitter Community Visualizer: Hello D3 Twitter Community Visualizer with EDGESExplorer Gadget

RT @psychemedia: How do folk who send you twitter messages connect? http://bit.ly/dNoKGK < see address bar (this is depressingly good)

Was what I tweeted on the 13th April 2011. What Tony had managed to do was use the Protovis JavaScript library to let people make their own network visualizations for Twitter search terms (if you haven’t seen Tony’s other work on hashtag communities, mainly using Gephi, its well worth a read). The concept for the latest iteration was explained in more detail by Tony in  Using Protovis to Visualise Connections Between People Tweeting a Particular Term.

Two limitations of this solution are: it relies on a current Twitter search which will disappear after 7 days; and it’s difficult to embed elsewhere. Tony and I had discussed collecting the data in a Google Spreadsheet using one of my many Twitter/Spreadsheet mashups and then draw the network visualization from the data.

I thought I would go one step further not only collecting the data in the Spreadsheet but then also generate the Protovis visualization in the sheet by making a gadget for it. The reason for going down the gadget route is in theory they provide an easy way to embed the visualization in other webpages and web apps.

This wouldn’t be my first foray into gadgets having already done My first Google Gadget to embed a flickr photoset with Galleria navigation, and I already knew that to gadgetize Tony’s original code just needed some xml wrapping and a dash of the Google Visualization API. In fact because I used Google Apps Script to collect the data there was very little needed to do with Tony’s code as both used JavaScript syntax.

So here it is the:

*** Protovis Twitter Community Visualizer ***
[If the link above doesn't work open this version and File > Make a copy (make sure you are signed in)]

and here is some output from it (if you are reading this in an RSS aggregator you'll need to visit this post) Update: Turns out the Protovis library doesn't work with IE so you'll just have to use a proper browser instead:

PS you can interact with the diagram by click-dragging nodes, using your mousescroll for zoom and click-drag empty parts to pan

Life is so much easier when you stand on the shoulders of giants ;)

16 thoughts on “Ported: Tony Hirst’s Using Protovis to Visualise Twitter Connections to Google Spreadsheet with Embeddable Gadget

  1. Pingback:

    Using Protovis to Visualise Connections Between People Tweeting a Particular Term « OUseful.Info, the blog…

  2. Pingback:

    OU Related Courses Network Visualisation Using Protovis and Open University Open Data « OUseful.Info, the blog…

  3. Lucien

    Hello!

    This is fantastic!

    I tried using the gadget on my own (very similar) spreadsheet with another dataset. Unfortunately, the graph is completely static. Any idea why? I have a pretty large dataset of 150 nodes and many (many) edges, that might be why.

    Also, and most importantly, is there any way to change the code of the visualisation, to add name on nodes for instance, or to change the force parameters…

    Thank you so much, your work is very inspiring!

    Lucien

    1. Martin Hawksey

      Post author

      Hi Lucien – Yes this currently only really works with upto around 60 usernames at which point the request url to Google Social Graph gets too big (I should really include a way to break it up. The text displayed with the nodes is stored in as the nodeName. Changing these values doesn’t effect the links which are stored separately. Some of the settings used to control the appearance of the visualisation are controled by the gadget xml. You can check the Protovis website for instructions on what can be changed. One final thing, since Google started Google+ it appears they are getting less data back from Twitter to the Social Graph data isn’t entirely accurate. I’ve added some extra code which I’ve written about here to plug the holes.
      Enjoy!
      Martin

  4. Lucien

    Hi Martin,

    Thanks for your answer! Actually, I didn’t explain my problem well. My goal is to map some people’s connexions belonging to an offline group. So I’m not using the Google Social Graph API part of your code, but rather the gadget that reads the “data” sheet to map the connections.

    Basically, I have a table in the first sheet, I wrote a little script that builds the “data” sheet according to a particular criterium (in the first sheet, each row represents a person, and people are connected if they have a matching, say, third column). So I end up with a “data” sheet having exactly the same format than yours, but built from a totally different process.

    From there, I want to display the graph, and this is when you example comes into play. I insert your gadget with the xml link, tell it to go fetch the data, and watch. The gadget tells me it is not verified, and I’m not sure if the problem (stillness of the graph) actually comes from that.

    If so, I’d have to find a way to feed an outside-of-googledoc Protovis (or D3) with the content of the “data” sheet to visualize it (if we can do this kind of things, I’m not even sure). Which would be too bad as I really like your gadget idea.

    I’ll try and see what’s in the xml in the mean time!

    Cheers!

  5. Pingback:

    Updates to Twitter Archiving Google Spreadsheet v2.3 [TAGS] « MASHe

  6. Pingback:

    Guardian Tag Explorer: When the Guardian Open Platform met d3.js « MASHe

  7. Pingback:

    A template for rendering small NodeXL visualisations on the web using the d3.js « MASHe

  8. Luis

    Martin:
    This article is fantastic! I was looking for a simple tool for visualizing tweeter’s user connections around a term, and came up with your spread sheet. I am an advanced user of excel spreadsheets and have been migrating some of my stuff to Google spreadsheets, to take advantage to all the “online” capabilities.
    I downloaded a copy of your spreadsheet which runs fine as long as I don’t change the search term. Cant’ figure out what’s wrong. The visualization is fine, the gadget is up and running, but as soon as I change the search term and add anything else and click “click to grab data”, no data is collected/visualized.
    Do you know if anything changed in the way the APIs work? Any insight about what I might be doing wrong? I don’t need to visualize a ton of connections, 20-30 would be enough for now.
    Thank you very much in advance for your help!
    Cheers

    1. Martin Hawksey

      Post author

      Hi Luis, Thanks for letting me know. Yes the script was broken (referencing the wrong cell). I’ve made some edits and It should work now if you take a fresh copy.

      Something to be aware of is this method appears to be deteriorating in quality. I think the main reason is the data returned from Google Social Graph is incomplete and the data that is being returned uses twitter user_ids rather than screen_name so an extra lookup is required. I did start working on a script that just gets data for larger networks from the Twitter API but started hitting problems because App Script automatically timeout after 5 minutes which wasn’t enough time to build all the data. This new code might however work for this scenario.

      Martin

  9. Pingback:

    Bye-bye Protovis Twitter Community Visualizer: Hello D3 Twitter Community Visualizer with EDGESExplorer Gadget – MASHe

  10. Pingback:

    My Not-So Successful Attempts To Visualise a Twitter User | Cast Digital Sandbox Process

  11. Pingback:

    Protovis Twitter Community Visualizations from a Google Spreadsheet (eAssessment Scotland delegate network) JISC CETIS MASHe

Comments are closed.