Learn how to create easy hacks to create graphs of your users behaviour with D3.
Edd Sowden@edds
View Slide
D3.js
[ ... ]
Sin Wave
[ 0, 1, 0, -1, 0 ]
var xScale = d3.scale.linear().domain([0, data.length-1]).range([0, graphWidth]);
d3.svg.line().x(function(d, i){ return xScale(i); }).y(function(d, i){ return yScale(d); });
demo
[[ ... ],[ ... ]]
D3 update pattern
// select all existing elements...// add new elements...// update all the elements...// remove the old elements...
// select all existing elementslines = graph.selectAll(‘path’).data(data)
// add new elementslines.enter().append(‘path’)
// update all the elementslines.attr('d',function(d){ return line(d); });
// remove the old elementspath.exit().remove();
Updating the lines
Google Analytics
appgooglewindow.location(query string)window.location(hash)JSONP (Ajax)
accessToken
https://www.googleapis.com/analytics/v3/management/accounts
googleUser.apiRequest(endpoint, function(data){ ... });
DimensionsMetricsSort orderStart and end date
OLAP Cube
datedevice typeoperating system
operating systemdatedevice type
metricsga:visitorsdimensionsga:deviceCategoryga:nthDay
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}}
[[desktop, 0, 7],[mobile, 0, 3],[tablet, 0, 7],[desktop, 1, 4],...]
[{type: “desktop”,values: [7, 4, 5],},...]
Getting the data in shape
Browser Matrixhttp://edds.github.io/browser-matrix/
Google Analytics Query Explorer 2http://ga-dev-tools.appspot.com/explorer/
Demos from this talkhttps://github.com/edds/d3-presentation-examples