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
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
240
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
エラーとアクセシビリティ
schktjm
1
1.2k
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
400
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
910
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
240
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
390
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Scaling GitHub
holman
463
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
GitHub's CSS Performance
jonrohan
1032
460k
A designer walks into a library…
pauljervisheath
207
24k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Being A Developer After 40
akosma
90
590k
Building Applications with DynamoDB
mza
96
6.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
How GitHub (no longer) Works
holman
315
140k
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