psychemedia/protovisForceTest.html

## protovisForceTest.html
<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>
	<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>