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
730
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
790
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
580
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
SRE/インフラエンジニアの市場価値とキャリアパス/Market value and career path for SRE-infrastructure engineers
takumakume
1
240
生成AI時代における人間の情熱とプロダクト志向 / 20250517 Takuya Oikawa
shift_evolve
2
390
PandaCSSでつくる 型で守られたスタイリング基盤
dendaiman
1
110
Cloudflare Use Cases at CADDi
minato128
2
330
KubeCon + CloudNativeCon Europe 2025 Recap: The GPUs on the Bus Go 'Round and 'Round / Kubernetes Meetup Tokyo #70
pfn
PRO
0
180
技術選定の仕方 - FLEXYウェビナー / How to select technology
shinden
1
130
インラインRBSコメントに鯛pe checkersもニッコリ
sansantech
PRO
2
230
Опыт использования Nessie в Азбуке Вкуса
emeremyanina1234
0
510
え!! 日本国内でGo言語のバイリンガル勉強会を!?
logica0419
2
110
正解のない未知(インボイス制度対応)をフルサイクル開発で乗り越える方法 / How to overcome the unknown invoice system with full cycle development
carta_engineering
0
170
ゆるくはじめるSLI・SLO
yatoum
1
150
ホワイトボックス& SONiC アーキテクチャ(全体像) - SONiC Workshop Japan 2025
ebiken
PRO
1
450
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
It's Worth the Effort
3n
184
28k
BBQ
matthewcrist
88
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Facilitating Awesome Meetings
lara
54
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Done Done
chrislema
184
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making Projects Easy
brettharned
116
6.2k
Documentation Writing (for coders)
carmenintech
71
4.8k
4 Signs Your Business is Dying
shpigford
183
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
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