A little thing I made with Facebook and D3 Patrick Dougall Tuesday, January 8, 13

General Outline Facebook/Graph API web interface D3 a diagrammatic presentation Tuesday, January 8, 13

First Things First Get authentication set up Facebook Tuesday, January 8, 13

#360 Facebook Authentication #361 Facebook Graph API #363 Facebook Open Graph First Things First Get authentication set up Facebook Tuesday, January 8, 13

Facebook A look around Tuesday, January 8, 13

Koala Gem Facebook Tuesday, January 8, 13

def facebook @facebook = Koala::Facebook::API.new(oauth_token) end Koala Gem def facebook_object facebook.fql_query("SELECT column FROM table WHERE condition") end Facebook Tuesday, January 8, 13

def facebook_object facebook.fql_multiquery({ "query1" => "SELECT column FROM table WHERE condition", "query2" => "SELECT column FROM table WHERE condition", "query3" => "SELECT column FROM table WHERE condition" }) end def facebook @facebook = Koala::Facebook::API.new(oauth_token) end Koala Gem Facebook Tuesday, January 8, 13

Facebook Tuesday, January 8, 13

Graph API Explorer Facebook Tuesday, January 8, 13

Railscast http:/ /railscasts.com/episodes/360- facebook-authentication Omniauth-facebook https:/ /github.com/mkdynamic/omniauth- facebook Koala gem https:/ /github.com/arsduo/koala Resources Facebook Tuesday, January 8, 13

Railscast http:/ /railscasts.com/episodes/360- facebook-authentication Omniauth-facebook https:/ /github.com/mkdynamic/omniauth- facebook Koala gem https:/ /github.com/arsduo/koala Resources Tuesday, January 8, 13

Data- Driven Documents Tuesday, January 8, 13

D3 You should just see it! Tuesday, January 8, 13

D3 Tuesday, January 8, 13

D3 An attempt to explain D3 Diagramatically! (Not a lot of code) Tuesday, January 8, 13

D3 #some-div Tuesday, January 8, 13

D3 svg element (canvas) #some-div append Tuesday, January 8, 13

D3 svg element (canvas) #some-div force layout append apply Tuesday, January 8, 13

D3 Tuesday, January 8, 13

D3 Tuesday, January 8, 13

D3 svg element (canvas) Tuesday, January 8, 13

D3 svg element (canvas) nodes add Tuesday, January 8, 13

D3 svg element (canvas) nodes add var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); Tuesday, January 8, 13

D3 svg element (canvas) nodes add Tuesday, January 8, 13

D3 svg element (canvas) nodes add images append Tuesday, January 8, 13

D3 svg element (canvas) nodes add images append var image = node.append("image") .attr("xlink:href", function(d) {return d.pic_square;} ) .attr("x", -25) .attr("y", -25) .attr("width", 50) .attr("height", 50) .style("opacity", 0); Tuesday, January 8, 13

D3 svg element (canvas) Tuesday, January 8, 13

D3 svg element (canvas) Tuesday, January 8, 13

D3 svg element (canvas) links add Tuesday, January 8, 13

D3 svg element (canvas) links add function tick() { 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; }); }); } Tuesday, January 8, 13

D3 svg element (canvas) links add links: [{“source”:0, “target”:1, “affiliation”:2}, {“source”:0, “target”:2, “affiliation”:0}, {“source”:0, “target”:3, “affiliation”:0}, {“source”:0, “target”:4, “affiliation”:1}, {“source”:0, “target”:5, “affiliation”:4}] links x1 = d.source.x y1 = d.source.y x2 = d.target.x y2 = d.target.y id 2 id 0 id 3 id 4 id 5 id 1 Tuesday, January 8, 13

Lets see that thing I built agian! Tuesday, January 8, 13

Wrap it up Facebook, a lot of data! All you need is permission! D3, do a lot with your data Steep learning curve, but a lot of potential! Tuesday, January 8, 13

I’m a beginner programmer (around 1 year) I graduated with an MS in Neuroscience last December. I learned how to teach myself hard stuff Similar conceptual thinking Looking for employment! [email protected] https:/ /github.com/pdougall1 About me :) Tuesday, January 8, 13