Using D3.js to visualise your analytics data

5ce91fa49a613cbc3e20d5f96856473f?s=47 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.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

October 21, 2013
Tweet

Transcript

  1. Edd Sowden @edds

  2. D3.js

  3. [ ... ]

  4. Sin Wave

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

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

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

    });
  8. demo

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

  10. D3 update pattern

  11. // select all existing elements ... // add new elements

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

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

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

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

  16. demo

  17. Updating the lines

  18. demo

  19. Google Analytics

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

  21. accessToken

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

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

  24. Dimensions Metrics Sort order Start and end date

  25. Dimensions Metrics Sort order Start and end date

  26. Dimensions Metrics Sort order Start and end date

  27. Dimensions Metrics Sort order Start and end date

  28. OLAP Cube

  29. date device type operating system

  30. operating system date device type

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

  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}}

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

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

    ]
  35. demo

  36. Getting the data in shape

  37. demo

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

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

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

  42. Edd Sowden @edds