TiborUdvari · July 7, 2014 09:48
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="utf-8">

    <script type="text/javascript" src="d3/d3.v3.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 	<title>Hello facebook</title>
 <style>

 .node {
  stroke: #fff;
  stroke-width: 1.5px;
 }

 .link {
  stroke: #999;
  stroke-opacity: .6;
 }

 </style>
 <script>

      $(document).ready(function() {
        // Execute some code here
    
 /////////// D3 stuff

  var width = 960,
    height = 500;

 var force = d3.layout.force()
    .charge(-50)
    .linkDistance(10)
    .size([width, height]);

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

 function startVisualisation(graph) { 
  console.log("Time to visualise links " + graph.links + " and nodes " + graph.nodes );
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return d.value; });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", "green")
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });

 }

    $("#login").click(function()
        {
        	FB.login(function(response) 
        	{
   				if (response.authResponse) 
   				{
     				console.log('Welcome!  Fetching your information.... ');
     					FB.api('/me', function(response) 
     					{
       						console.log('Good to see you, ' + response.name + '.');
    						var facebookData = { nodes : null, links : null};

    						FB.api("me/friends", function(response)
    						{
    							facebookData.nodes = response.data;
    							facebookData.links = [];
    					   
                  var fbIdToNormalId = {};
                  var friend;

    							for (var i = 0, l=response.data.length; i<l; i++ )
    							{
    								  friend = response.data[i];
                      fbIdToNormalId[friend.id] = i;
    							}

                var linksQuery = "SELECT uid1,uid2 from friend WHERE uid1 in (SELECT uid from user where uid in (select uid1 from friend where uid2 = me())) and uid2 in (SELECT uid from user where uid in (select uid1 from friend where uid2 = me()))";

                FB.api("/fql?q="+escape(linksQuery), 
                  function(result) 
                  {
                    for (var i = 0; i < result.data.length; i++)
                    {
                        sourceIndex = fbIdToNormalId[result.data[i].uid1];
                        destinationIndex = fbIdToNormalId[result.data[i].uid2];
                        if (sourceIndex < destinationIndex)
                            {
                              facebookData.links.push( { source : sourceIndex, target : destinationIndex, value : 1 } );
                            }
                    }

                    console.log("Right moment");
                    startVisualisation(facebookData);
                  }
                  );

                 
    						});
     					});
    			}
    			else
    			{
    				console.log('User cancelled login or did not fully authorize.');
    			}
    			
 	    	});
 		});
  

         $.ajaxSetup({ cache: true });
  		 $.getScript('//connect.facebook.net/en_UK/all.js', function(){
    FB.init({
      appId      : '680598878619507',                        // App ID from the app dashboard
      channelUrl : '//localhost/channel.html', // Channel file for x-domain comms
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);

    function updateStatusCallback()
    {
    	console.log('We have called this method');
    }
  });


      });
    </script>
 </head>

 <body>

 <a href = "#" id = "login"> Login </a>

 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">

	<script type="text/javascript" src="d3/d3.v3.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<title>Hello facebook</title>
	<style>

	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.link {
	stroke: #999;
	stroke-opacity: .6;
	}

	</style>
	<script>

	$(document).ready(function() {
	// Execute some code here

	/////////// D3 stuff

	var width = 960,
	height = 500;

	var force = d3.layout.force()
	.charge(-50)
	.linkDistance(10)
	.size([width, height]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	function startVisualisation(graph) {
	console.log("Time to visualise links " + graph.links + " and nodes " + graph.nodes );
	force
	.nodes(graph.nodes)
	.links(graph.links)
	.start();

	var link = svg.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return d.value; });

	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", 5)
	.style("fill", "green")
	.call(force.drag);

	node.append("title")
	.text(function(d) { return d.name; });

	force.on("tick", function() {
	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	});

	}

	$("#login").click(function()
	{
	FB.login(function(response)
	{
	if (response.authResponse)
	{
	console.log('Welcome! Fetching your information.... ');
	FB.api('/me', function(response)
	{
	console.log('Good to see you, ' + response.name + '.');
	var facebookData = { nodes : null, links : null};

	FB.api("me/friends", function(response)
	{
	facebookData.nodes = response.data;
	facebookData.links = [];

	var fbIdToNormalId = {};
	var friend;

	for (var i = 0, l=response.data.length; i<l; i++ )
	{
	friend = response.data[i];
	fbIdToNormalId[friend.id] = i;
	}

	var linksQuery = "SELECT uid1,uid2 from friend WHERE uid1 in (SELECT uid from user where uid in (select uid1 from friend where uid2 = me())) and uid2 in (SELECT uid from user where uid in (select uid1 from friend where uid2 = me()))";

	FB.api("/fql?q="+escape(linksQuery),
	function(result)
	{
	for (var i = 0; i < result.data.length; i++)
	{
	sourceIndex = fbIdToNormalId[result.data[i].uid1];
	destinationIndex = fbIdToNormalId[result.data[i].uid2];
	if (sourceIndex < destinationIndex)
	{
	facebookData.links.push( { source : sourceIndex, target : destinationIndex, value : 1 } );
	}
	}

	console.log("Right moment");
	startVisualisation(facebookData);
	}
	);


	});
	});
	}
	else
	{
	console.log('User cancelled login or did not fully authorize.');
	}

	});
	});


	$.ajaxSetup({ cache: true });
	$.getScript('//connect.facebook.net/en_UK/all.js', function(){
	FB.init({
	appId : '680598878619507', // App ID from the app dashboard
	channelUrl : '//localhost/channel.html', // Channel file for x-domain comms
	});
	$('#loginbutton,#feedbutton').removeAttr('disabled');
	FB.getLoginStatus(updateStatusCallback);

	function updateStatusCallback()
	{
	console.log('We have called this method');
	}
	});


	});
	</script>
	</head>

	<body>

	<a href = "#" id = "login"> Login </a>

	</body>

	</html>
No results found