Using D3.js to visualise your analytics data

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