Using D3.js to visualise your analytics data

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

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