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

Using D3.js to visualise your analytics data

Edd S
October 21, 2013

Using D3.js to visualise your analytics data

Learn how to create easy hacks to create graphs of your users behaviour with D3.

Edd S

October 21, 2013
Tweet

More Decks by Edd S

Other Decks in Technology

Transcript

  1. Edd Sowden
    @edds

    View Slide

  2. D3.js

    View Slide

  3. [ ... ]

    View Slide

  4. Sin Wave

    View Slide

  5. [ 0, 1, 0, -1, 0 ]

    View Slide

  6. var xScale = d3.scale
    .linear()
    .domain([0, data.length-1])
    .range([0, graphWidth]);

    View Slide

  7. d3.svg.line()
    .x(function(d, i){ return xScale(i); })
    .y(function(d, i){ return yScale(d); });

    View Slide

  8. demo

    View Slide

  9. [
    [ ... ],
    [ ... ]
    ]

    View Slide

  10. D3 update pattern

    View Slide

  11. // select all existing elements
    ...
    // add new elements
    ...
    // update all the elements
    ...
    // remove the old elements
    ...

    View Slide

  12. // select all existing elements
    lines = graph.selectAll(‘path’)
    .data(data)

    View Slide

  13. // add new elements
    lines.enter().append(‘path’)

    View Slide

  14. // update all the elements
    lines.attr('d',
    function(d){ return line(d); });

    View Slide

  15. // remove the old elements
    path.exit().remove();

    View Slide

  16. demo

    View Slide

  17. Updating the lines

    View Slide

  18. demo

    View Slide

  19. Google Analytics

    View Slide

  20. app
    google
    window.location
    (query string)
    window.location
    (hash)
    JSONP (Ajax)

    View Slide

  21. accessToken

    View Slide

  22. https://www.googleapis.com/
    analytics/v3/management/accounts

    View Slide

  23. googleUser.apiRequest(
    endpoint, function(data){ ... }
    );

    View Slide

  24. Dimensions
    Metrics
    Sort order
    Start and end date

    View Slide

  25. Dimensions
    Metrics
    Sort order
    Start and end date

    View Slide

  26. Dimensions
    Metrics
    Sort order
    Start and end date

    View Slide

  27. Dimensions
    Metrics
    Sort order
    Start and end date

    View Slide

  28. OLAP Cube

    View Slide

  29. date
    device type
    operating system

    View Slide

  30. operating system
    date
    device type

    View Slide

  31. metrics
    ga:visitors
    dimensions
    ga:deviceCategory
    ga:nthDay

    View Slide

  32. https://www.googleapis.com/analytics/v3/data/ga?
    ids={{profileId}}&
    dimensions=ga:nthDay,ga:deviceCategory&
    metrics=ga:visitors&
    start-date=2013-01-01&
    end-date=2013-09-30&
    max-results=10000&
    sort=ga:nthDay&
    access-token={{accessToken}}

    View Slide

  33. [
    [desktop, 0, 7],
    [mobile, 0, 3],
    [tablet, 0, 7],
    [desktop, 1, 4],
    ...
    ]

    View Slide

  34. [
    {
    type: “desktop”,
    values: [7, 4, 5],
    },
    ...
    ]

    View Slide

  35. demo

    View Slide

  36. Getting the data in shape

    View Slide

  37. demo

    View Slide

  38. Browser Matrix
    http://edds.github.io/browser-matrix/

    View Slide

  39. View Slide

  40. Google Analytics Query Explorer 2
    http://ga-dev-tools.appspot.com/explorer/

    View Slide

  41. Demos from this talk
    https://github.com/edds/d3-presentation-examples

    View Slide

  42. Edd Sowden
    @edds

    View Slide