$30 off During Our Annual Pro Sale. View Details »

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. A little thing I made with Facebook and D3 Patrick

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

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

    8, 13
  4. #360 Facebook Authentication #361 Facebook Graph API #363 Facebook Open

    Graph First Things First Get authentication set up Facebook Tuesday, January 8, 13
  5. Facebook A look around Tuesday, January 8, 13

  6. Koala Gem Facebook Tuesday, January 8, 13

  7. 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
  8. 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
  9. Facebook Tuesday, January 8, 13

  10. Graph API Explorer Facebook Tuesday, January 8, 13

  11. 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
  12. 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
  13. Data- Driven Documents Tuesday, January 8, 13

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

  15. D3 Tuesday, January 8, 13

  16. D3 An attempt to explain D3 Diagramatically! (Not a lot

    of code) Tuesday, January 8, 13
  17. D3 #some-div Tuesday, January 8, 13

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

  19. D3 svg element (canvas) #some-div force layout append apply Tuesday,

    January 8, 13
  20. D3 Tuesday, January 8, 13

  21. D3 Tuesday, January 8, 13

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

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

  24. 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
  25. D3 svg element (canvas) nodes add Tuesday, January 8, 13

  26. D3 svg element (canvas) nodes add images append Tuesday, January

    8, 13
  27. 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
  28. D3 svg element (canvas) Tuesday, January 8, 13

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

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

  31. 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
  32. 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
  33. Lets see that thing I built agian! Tuesday, January 8,

    13
  34. 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
  35. 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! pdougall1@gmail.com https:/ /github.com/pdougall1 About me :) Tuesday, January 8, 13