Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Using D3.js to visualise your analytics data
Search
Edd S
October 21, 2013
Technology
0
650
Using D3.js to visualise your analytics data
Learn how to create easy hacks to create graphs of your users behaviour with D3.
Edd S
October 21, 2013
Tweet
Share
More Decks by Edd S
See All by Edd S
Using React at Deliveroo - LRUG
edds
0
600
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
490
What even is a table? A quick look at Accessibility APIs
edds
8
2.1k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
310
Accessibility and how to get the most from your screenreader - Front End North
edds
3
860
GOV.UK Case Study - Fronteers 2013
edds
2
900
Using Sass on GOV.UK
edds
8
770
What the flash - Photography Introduction
edds
64
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
180
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
Azureの基本的な権限管理の勉強会
yhana
0
180
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
web-application-security
matsuihidetoshi
0
160
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
本当のAWS基礎
toru_kubota
0
510
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
160
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.9k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Into the Great Unknown - MozCon
thekraken
10
990
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
The Invisible Customer
myddelton
114
12k
Documentation Writing (for coders)
carmenintech
60
3.9k
Bash Introduction
62gerente
604
210k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
Edd Sowden @edds
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 elements lines = graph.selectAll(‘path’) .data(data)
// add new elements lines.enter().append(‘path’)
// update all the elements lines.attr('d', function(d){ return line(d); });
// remove the old elements path.exit().remove();
demo
Updating the lines
demo
Google Analytics
app google window.location (query string) window.location (hash) JSONP (Ajax)
accessToken
https://www.googleapis.com/ analytics/v3/management/accounts
googleUser.apiRequest( endpoint, function(data){ ... } );
Dimensions Metrics Sort order Start and end date
Dimensions Metrics Sort order Start and end date
Dimensions Metrics Sort order Start and end date
Dimensions Metrics Sort order Start and end date
OLAP Cube
date device type operating system
operating system date device type
metrics ga:visitors dimensions ga:deviceCategory ga: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], }, ...
]
demo
Getting the data in shape
demo
Browser Matrix http://edds.github.io/browser-matrix/
None
Google Analytics Query Explorer 2 http://ga-dev-tools.appspot.com/explorer/
Demos from this talk https://github.com/edds/d3-presentation-examples
Edd Sowden @edds