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 😉
Using Protovis to Visualise Connections Between People Tweeting a Particular Term « OUseful.Info, the blog…
[…] just posted how to take this recipe and really run with it, showing how it can be ported over to social network visualisation Google gadget that can be embedded pretty much […]
OU Related Courses Network Visualisation Using Protovis and Open University Open Data « OUseful.Info, the blog…
[…] something I’ve been meaning to do for ages, so spurred on by Martin Hawksey’s wonderful Google Gadgets port of my ad hoc Twitter network visulisation thing using Protovis (which Martin points out doesn’t work with IE9), I finally got round to it today: a wiring up […]
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
Martin Hawksey
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
Martin Hawksey
Actually that snippet of code in the last link is a bit meaningless – I need to integrate into the other code and document
Stay tuned!
Martin
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!
Martin Hawksey
Is it possible to share the spreadsheet with me m.hawksey at gmail.com?
Lucien
The invitation is sent! 🙂
Updates to Twitter Archiving Google Spreadsheet v2.3 [TAGS] « MASHe
[…] the code I use to grab ViralHeat sentiment analysis of tweets and some code to generate data for my Protovis gadget. To get the latest version of this spreadsheet use the link in the original […]
Guardian Tag Explorer: When the Guardian Open Platform met d3.js « MASHe
[…] from the last couple of days of pushing pixels. The big difference between d3 and the similar protovis library I used here is there is a lot more setting up to do in the code. The payoff is you have far more control of the […]
A template for rendering small NodeXL visualisations on the web using the d3.js « MASHe
[…] some of this interactivity, a bit like the way I can embed basic Twitter networks using the Hirst-Hawksey Protovis (Friendviz) Google Gadget. After I tip from Tony I had a look at the D3.js library which has superseded Protovis. I had a go […]
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
Martin Hawksey
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
Bye-bye Protovis Twitter Community Visualizer: Hello D3 Twitter Community Visualizer with EDGESExplorer Gadget – MASHe
[…] Graph API to get friend/follower relationships, no authentication required). Then I came along and dumped his code into Google Spreadsheet and wrapped the output in an embeddable gadget. Google then launched Google Plus which appears to coincide with a deterioration in friend/follower […]
My Not-So Successful Attempts To Visualise a Twitter User | Cast Digital Sandbox Process
[…] Spreadsheet (eAssessment Scotland delegate network).” This led me to this post, ”Ported: Tony Hirst’s Using Protovis to Visualise Twitter Connections to Google Spreadsheet with Em…” that explains how to use […]
Protovis Twitter Community Visualizations from a Google Spreadsheet (eAssessment Scotland delegate network) JISC CETIS MASHe
[…] is a slight variation on my previous post (Ported: Tony Hirst’s Using Protovis to Visualise Twitter Connections to Google Spreadsheet with Em…) in that instead of using a Twitter search to build a list of names to make a network diagram, it […]