Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Edd Sowden @edds
Slide 2
Slide 2 text
D3.js
Slide 3
Slide 3 text
[ ... ]
Slide 4
Slide 4 text
Sin Wave
Slide 5
Slide 5 text
[ 0, 1, 0, -1, 0 ]
Slide 6
Slide 6 text
var xScale = d3.scale .linear() .domain([0, data.length-1]) .range([0, graphWidth]);
Slide 7
Slide 7 text
d3.svg.line() .x(function(d, i){ return xScale(i); }) .y(function(d, i){ return yScale(d); });
Slide 8
Slide 8 text
demo
Slide 9
Slide 9 text
[ [ ... ], [ ... ] ]
Slide 10
Slide 10 text
D3 update pattern
Slide 11
Slide 11 text
// select all existing elements ... // add new elements ... // update all the elements ... // remove the old elements ...
Slide 12
Slide 12 text
// select all existing elements lines = graph.selectAll(‘path’) .data(data)
Slide 13
Slide 13 text
// add new elements lines.enter().append(‘path’)
Slide 14
Slide 14 text
// update all the elements lines.attr('d', function(d){ return line(d); });
Slide 15
Slide 15 text
// remove the old elements path.exit().remove();
Slide 16
Slide 16 text
demo
Slide 17
Slide 17 text
Updating the lines
Slide 18
Slide 18 text
demo
Slide 19
Slide 19 text
Google Analytics
Slide 20
Slide 20 text
app google window.location (query string) window.location (hash) JSONP (Ajax)
Slide 21
Slide 21 text
accessToken
Slide 22
Slide 22 text
https://www.googleapis.com/ analytics/v3/management/accounts
Slide 23
Slide 23 text
googleUser.apiRequest( endpoint, function(data){ ... } );
Slide 24
Slide 24 text
Dimensions Metrics Sort order Start and end date
Slide 25
Slide 25 text
Dimensions Metrics Sort order Start and end date
Slide 26
Slide 26 text
Dimensions Metrics Sort order Start and end date
Slide 27
Slide 27 text
Dimensions Metrics Sort order Start and end date
Slide 28
Slide 28 text
OLAP Cube
Slide 29
Slide 29 text
date device type operating system
Slide 30
Slide 30 text
operating system date device type
Slide 31
Slide 31 text
metrics ga:visitors dimensions ga:deviceCategory ga:nthDay
Slide 32
Slide 32 text
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}}
Slide 33
Slide 33 text
[ [desktop, 0, 7], [mobile, 0, 3], [tablet, 0, 7], [desktop, 1, 4], ... ]
Slide 34
Slide 34 text
[ { type: “desktop”, values: [7, 4, 5], }, ... ]
Slide 35
Slide 35 text
demo
Slide 36
Slide 36 text
Getting the data in shape
Slide 37
Slide 37 text
demo
Slide 38
Slide 38 text
Browser Matrix http://edds.github.io/browser-matrix/
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Google Analytics Query Explorer 2 http://ga-dev-tools.appspot.com/explorer/
Slide 41
Slide 41 text
Demos from this talk https://github.com/edds/d3-presentation-examples
Slide 42
Slide 42 text
Edd Sowden @edds