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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Facebook
   A look around
   Tuesday, January 8, 13
   

   View Slide

6. Koala Gem
   Facebook
   Tuesday, January 8, 13
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Facebook
   Tuesday, January 8, 13
   

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

13. Data-
    Driven
    Documents
    Tuesday, January 8, 13
    

    View Slide

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

    View Slide

15. D3
    Tuesday, January 8, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. D3
    Tuesday, January 8, 13
    

    View Slide

21. D3
    Tuesday, January 8, 13
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide