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