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
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
380
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
800
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
450
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.1k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
620
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
880
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
8
440
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.6k
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
280
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.2k
Featured
See All Featured
KATA
mclloyd
16
12k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
The Invisible Side of Design
smashingmag
294
49k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Producing Creativity
orderedlist
PRO
338
39k
Designing for Performance
lara
602
67k
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