Created
March 12, 2011 21:58
-
-
Save psychemedia/867611 to your computer and use it in GitHub Desktop.
First attempt at plugging Twitter social network into force directed layout using protovis. Doesn't work...:-( Race condition.. Need to hold off rendering the graph till all the data is in...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head><title></title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> | |
| <script type="text/javascript" src="../protovis-3.2/protovis-r3.2.js"></script> | |
| <script type="text/javascript"> | |
| //getNet is where we get a list of Twitter usernames | |
| function getNet(){ | |
| url="http://search.twitter.com/search.json?q=jisc11&rpp=100&callback=?" | |
| // maybe need to consider paging here to get more than 100 results | |
| // - (rpp - results per page - is capped at 100 | |
| // - twitter api allows you to get up to 1500 tweets (15 pages of rpp=100)) | |
| $.getJSON(url,function(json){ | |
| users=[] | |
| uniqusers={} | |
| for (var u in json['results']) { | |
| uniqusers[json['results'][u]['from_user']]=1 | |
| } | |
| for (var uu in uniqusers) | |
| users.push(uu) | |
| getConnections(users) | |
| }) | |
| } | |
| //getConnections is where we find the connections between the users identified by the list of Twitter usernames | |
| function getConnections(users){ | |
| // Google social api limits you to requesting social data from 50 urls | |
| // Need to tweak this to page blocks of 50 users and make repeated requests | |
| if (users.length>50) | |
| users=users.slice(0,49) | |
| str='' | |
| for (var uic=0; uic<users.length; uic++) | |
| str+='http://twitter.com/'+users[uic]+',' | |
| url='http://socialgraph.apis.google.com/lookup?q='+str+'&edo=1&callback=?'; | |
| //url='http://socialgraph.apis.google.com/lookup?q=http://twitter.com/'+$('#user1').val()+',http://twitter.com/'+$('#user2').val()+'&edo=1&edi=1&callback=?'; | |
| $.getJSON(url,function(json){ | |
| graph={} | |
| graph['nodes']=[] | |
| userLoc={} | |
| for (var uic=0; uic<users.length; uic++){ | |
| graph['nodes'].push({nodeName:users[uic]}) | |
| userLoc[users[uic]]=uic | |
| } | |
| graph['links']=[] | |
| for (u in json['nodes']) { | |
| name=u.replace('http://twitter.com/','') | |
| for (var i in json['nodes'][u]['nodes_referenced']){ | |
| si=i.replace('http://twitter.com/','') | |
| if ( si in userLoc ){ | |
| if (json['nodes'][u]['nodes_referenced'][i]['types'][0]=='contact') | |
| graph['links'].push({source:userLoc[name], target:userLoc[si]}) | |
| } | |
| } | |
| } | |
| followers={} | |
| followers={nodes:graph['nodes'],links:graph['links']} | |
| }); | |
| } | |
| $(document).ready(function() { | |
| users=['psychemedia','mweller','mhawksey','garethm','gconole','ambrouk'] | |
| getConnections(users) | |
| //getNet() | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div id="center"><div id="fig"> | |
| <script type="text/javascript+protovis"> | |
| //This code is grabbed directly from a protovis example | |
| //The code seems to run in an event loop: | |
| // -- how do we get it to wait until the follower data is read? | |
| var w = document.body.clientWidth, | |
| h = document.body.clientHeight, | |
| colors = pv.Colors.category19(); | |
| var vis = new pv.Panel() | |
| .width(w) | |
| .height(h) | |
| .fillStyle("white") | |
| .event("mousedown", pv.Behavior.pan()) | |
| .event("mousewheel", pv.Behavior.zoom()); | |
| var force = vis.add(pv.Layout.Force) | |
| .nodes(followers.nodes) | |
| .links(followers.links); | |
| force.link.add(pv.Line); | |
| force.node.add(pv.Dot) | |
| .size(function(d) (d.linkDegree + 4) * Math.pow(this.scale, -1.5)) | |
| .fillStyle(function(d) d.fix ? "brown" : colors(d.group)) | |
| .strokeStyle(function() this.fillStyle().darker()) | |
| .lineWidth(1) | |
| .title(function(d) d.nodeName) | |
| .event("mousedown", pv.Behavior.drag()) | |
| .event("drag", force) | |
| //comment out the next line to remove labels | |
| //.anchor("center").add(pv.Label).textAlign("center").text(function(n) n.nodeName) | |
| vis.render(); | |
| </script> | |
| </div></div> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment