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
670
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
650
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
520
What even is a table? A quick look at Accessibility APIs
edds
8
2.2k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
330
Accessibility and how to get the most from your screenreader - Front End North
edds
3
930
GOV.UK Case Study - Fronteers 2013
edds
2
940
Using Sass on GOV.UK
edds
8
810
What the flash - Photography Introduction
edds
65
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
How to Think Like a Performance Engineer
csswizardry
4
590
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Featured
See All Featured
Building Applications with DynamoDB
mza
89
5.8k
Docker and Python
trallard
37
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Done Done
chrislema
179
15k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Agile that works and the tools we love
rasmusluckow
325
20k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
A Philosophy of Restraint
colly
200
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Invisible Side of Design
smashingmag
294
50k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.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