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
610
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
500
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
880
GOV.UK Case Study - Fronteers 2013
edds
2
910
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
Real World Type Puzzle and Code Generation
yukukotani
4
640
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
290
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
.NET GraphQL Client のリアル
sansantech
PRO
1
250
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3k
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
150
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
770
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
190
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
2
170
Featured
See All Featured
KATA
mclloyd
16
12k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Six Lessons from altMBA
skipperchong
22
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Mythical Team-Month
searls
217
42k
Clear Off the Table
cherdarchuk
86
310k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Scaling GitHub
holman
457
140k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
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