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
ビギナーであり続ける/beginning
ikuodanaka
3
510
モバイル界のMCPを考える
naoto33
0
370
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
120
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
750
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
230
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
2.9k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
300
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
310
GitHub Copilot の概要
tomokusaba
1
150
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Producing Creativity
orderedlist
PRO
346
40k
Code Reviewing Like a Champion
maltzj
524
40k
Making Projects Easy
brettharned
116
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Side Projects
sachag
455
42k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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