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
660
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
600
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
490
What even is a table? A quick look at Accessibility APIs
edds
8
2.1k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
310
Accessibility and how to get the most from your screenreader - Front End North
edds
3
870
GOV.UK Case Study - Fronteers 2013
edds
2
900
Using Sass on GOV.UK
edds
8
780
What the flash - Photography Introduction
edds
64
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
160
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
670
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
680
Taking Flight with Tailwind CSS
opdavies
0
4.3k
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
350
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
800
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
130
認知症フレンドリーテックとスタックチャン
naokiuc
0
400
ハードウェアを動かすTypeScriptの世界
9wick
3
1.1k
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
13
4.8k
1Q86
kawaguti
PRO
2
150
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
A better future with KSS
kneath
231
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Building an army of robots
kneath
300
41k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Raft: Consensus for Rubyists
vanstee
133
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
GraphQLとの向き合い方2022年版
quramy
33
12k
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