Upgrade to Pro — share decks privately, control downloads, hide ads and more …

facebook_and_d3_keynote

 facebook_and_d3_keynote

My first talk at the Atlanta Ruby Meetup Group. Collecting data from Facebook graph and using d3.js to present friends using a force directed layout.

Patrick Dougall

January 08, 2013
Tweet

Other Decks in Technology

Transcript

  1. #360 Facebook Authentication #361 Facebook Graph API #363 Facebook Open

    Graph First Things First Get authentication set up Facebook Tuesday, January 8, 13
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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