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
740
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
800
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.4k
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
900
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.8k
Other Decks in Technology
See All in Technology
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
2.9k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
410
Southwest airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
110
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
本が全く読めなかった過去の自分へ
genshun9
0
750
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
130
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
AWS認定を取る中で感じたこと
siromi
1
160
Frontier airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
110
ビギナーであり続ける/beginning
ikuodanaka
3
680
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Done Done
chrislema
184
16k
How GitHub (no longer) Works
holman
314
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
4 Signs Your Business is Dying
shpigford
184
22k
Balancing Empowerment & Direction
lara
1
410
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Cult of Friendly URLs
andyhume
79
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Docker and Python
trallard
44
3.5k
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