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
660
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
870
GOV.UK Case Study - Fronteers 2013
edds
2
900
Using Sass on GOV.UK
edds
8
780
What the flash - Photography Introduction
edds
64
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
0
120
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1k
TDD - Test Driven Drupal
opdavies
0
3k
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
1
130
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
個人のAWSアカウントをマルチ運用してみた
miura55
2
290
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
180
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.6k
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
Real World Type Puzzle and Code Generation
yukukotani
4
620
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
420
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The Invisible Side of Design
smashingmag
294
49k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Bash Introduction
62gerente
605
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
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