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
750
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
810
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
590
What even is a table? A quick look at Accessibility APIs
edds
8
2.5k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
400
Accessibility and how to get the most from your screenreader - Front End North
edds
3
1.1k
GOV.UK Case Study - Fronteers 2013
edds
2
1.1k
Using Sass on GOV.UK
edds
8
910
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.8k
Other Decks in Technology
See All in Technology
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
180
KotlinConf 2025_イベントレポート
sony
1
130
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
830
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
330
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.9k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
470
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Featured
See All Featured
Designing for Performance
lara
610
69k
Embracing the Ebb and Flow
colly
87
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Being A Developer After 40
akosma
90
590k
Music & Morning Musume
bryan
46
6.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Six Lessons from altMBA
skipperchong
28
4k
Agile that works and the tools we love
rasmusluckow
330
21k
Docker and Python
trallard
45
3.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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