Using Protovis to Visualise Connections Between People Tweeting a Particular Term
One of the downsides to my tinkering with the desktop version of Gephi is that I can’t publish a service that lets folk generate their own network visualisations. It is possible to run the Gephi Toolkit as a service that can generate graphs from the command line, but I haven’t worked out how to do that… I also try to avoid server based applications whenever I can, preferring instead client-side (that is, in-browser) apps.
There are, however, several powerful Javascript graphics libraries around that I haven’t really got to grips with before, but that do open up the possibility of all sorts of novel visualisations. So tonight it’s time to get started with one of the libraries, in particular, Protovis, and post a demo I’ve been meaning to do for ages – a force directed graph layout of the connections between people who’ve recently tweeted a particular search term.
You can try the demo out here: http://ouseful.open.ac.uk/twitter/friendviz.html
There are a couple of URL arguments you can use:
http://ouseful.open.ac.uk/twitter/friendviz.html?q=YOUR_QUERY&typ=TYP
where TYP is either q or tag, where q runs a normal Twitter search and tag runs a hashtag search.
In each case, the search returns 100 results, which are then parsed to identify the different people who published those tweets (we’ll call them the “recent tweeters” for convenience). The friends of the most recent 50 unique users are then grabbed from the Google Social Graph API and used to detect connections between the “recent tweeters”. If there are any, that’s what gets plotted.
The point of this? Firstly, to demonstrate how to use Protovis with JQuery, and in particular, with JQuery pulling in dynamic data from an external URL*. Secondly, the app demponstrates whether folk recently tweeting a particular term or hashtag all know each other, or whther the discussion going on around the term/tag is taking place outside of an echo chamber.
* I couldn’t work out how to do this myself – Protovis runs an event loop I couldn’t seem to break out of… But StackOverflow came to my aid, an in particular an answer by James Crook to this question I posted: Using Protovis with Dynamically Loaded Data via JQuery.
View Source on the app will reveal all there is to know about the app, but for convenience I’ve also popped a copy up as a gist.
PS some advanced search tricks seem to work, some don’t. Here’s one that does… To see how people who have sent you messages connect:
http://ouseful.open.ac.uk/twitter/friendviz.html?q=to:USERNAMEHERE
PPS Martin Hawksey 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 anywhere…
PPPS See also: OU Related Courses Network Visualisation Using Protovis and Open University Open Data
Tony: What a useful little tool. The connectedness question comes to mind every day for me. Thanks!
John Rigdon
April 12, 2011 at 10:51 pm
This is awesome, Tony! Exactly what I’ve been trying (and failing) to do manually with things. Thanks!
Jennifer Jones
April 13, 2011 at 7:58 am
I concur. Tony this is superb!
dkernohan
April 13, 2011 at 11:21 am
Hi Tony
Yup, like others have said this is great.
Sheila
Sheila MacNeill
April 13, 2011 at 1:50 pm
[...] map of social network connections between folk recently using a particular search term or hashtag (Using Protovis to Visualise Connections Between People Tweeting a Particular Term). It is possible to grab a KML URL from the geotwitter pipe and feed it into a Google map that can [...]
A Bit of NewsJam MoJo – SocialGeo Twitter Map « OUseful.Info, the blog…
May 30, 2011 at 5:40 pm
It always fun to build on your stuff. Just some things I found when doing making the gadget version I thought I’d share here:
Protovis doesn’t work on IE because of no support for SVG. The issue has been logged here http://code.google.com/p/protovis-js/issues/detail?id=15 The possible good news is @datamarket have produced some code which uses VML for IE users referenced in
http://blog.datamarket.com/2011/04/29/new-and-improved-charts-flash-youre-dead-to-us/
Not sure if it extends to force-directed layouts as used in this example. The code is supposed to be released but just not yet (I’ve asked for a copy)
I also found that adding the node labels after making the node draggable lets the user move nodes around e.g. (you can see the code in the gadget xml http://hosting.gmodules.com/ig/gadgets/file/108150762089462716664/friendviz.xml
:)
Martin
Martin Hawksey
June 8, 2011 at 11:23 am
@martin :-) I thought I had draggable nodes at one point!
Just been playing with another data set – OU courses – which I’ll try to blog later. However, I think that data would really benefit from arbor.js…. (you’ll probably work out why immediately when I post it!)
Tony Hirst
June 8, 2011 at 1:27 pm
I’d really love to integrate this into hashmash.it
Info about the project is here: https://github.com/simonpainter/Hashmash/wiki
Simon Painter
June 8, 2011 at 11:36 am
@simon So in hashmash.it, you have a set of tags, and a set of people who used each tag. There are several ways I could think of extending my recipe to do this; one would be just to graph co-occurring tags (this would give you a star shape, unless you then started searching around tags connected to the original one; a good way of doing this might be to use something like arbor.js [ http://arborjs.org/ ] which would let you explore the tag space – click on a tag and hashmash it in…)
A second route would be to see who used what tag, and have a bipartite graph that connects tags by people (so if A and B use tag x, there are connections A-x and B-x). You could then maybe add in another layer of friendship connections, so eg if A nd B have a social relationship on twitter, add in A-B.
Tony Hirst
June 8, 2011 at 1:38 pm
[...] Tony described in a blog post entitled OUseful.info: Using Protovis to Visualise Connections Between People Tweeting a Particular Term this service was developed in April in order to “publish a service that lets folk generate [...]
What Twitter Tells Us About The #DevCSI #a11yhack Event « UK Web Focus
June 23, 2011 at 7:59 am
[...] of calling that API using Javscript in my “live” Twitter friends visualisation script (Using Protovis to Visualise Connections Between People Tweeting a Particular Term) as well as in the A Bit of NewsJam MoJo – SocialGeo Twitter [...]
Visualising Twitter Friend Connections Using Gephi: An Example Using the @WiredUK Friends Network « OUseful.Info, the blog…
July 7, 2011 at 9:31 am
[...] up more people to connect to for your research. If you want to know more about the technical bits this blog might [...]
Catching up :) « Digital Literacy @ University of Worcester
October 20, 2011 at 10:35 am
[...] This may be a blessing for some of my readers as it means I can do less waffling. So in brief:Tony came up with this brilliant solution for plotting twitter hashtag community graphs (it was brilliant because it used Google Social Graph API to get friend/follower relationships, no [...]
Bye-bye Protovis Twitter Community Visualizer: Hello D3 Twitter Community Visualizer with EDGESExplorer Gadget – MASHe
December 11, 2011 at 10:58 pm
[...] where q runs a normal Twitter search and tag runs a hashtag search. For more information, see: OUseful.info: Using Protovis to Visualise Connections Between People Tweeting a Particular Term Here is the link: http://ouseful.open.ac.uk/twitter/friendviz.html?q=suifaijohnmak Facebook: [...]
#Change11 Visualization Tools | Learner Weblog
December 23, 2011 at 11:29 am