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
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
390
Databricksの生成AI戦略
taka_aki
1
380
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
SLOいつ決めましょう?
abnoumaru
3
860
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.5k
TDD - Test Driven Drupal
opdavies
0
3k
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
190
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
4.1k
YJIT Makes Rails 1.7x faster / RubyKaigi 2024
k0kubun
4
560
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
150
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
12
3.3k
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
340
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Gamification - CAS2011
davidbonilla
77
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Documentation Writing (for coders)
carmenintech
60
4k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
A designer walks into a library…
pauljervisheath
201
23k
Making Projects Easy
brettharned
109
5.5k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Code Reviewing Like a Champion
maltzj
516
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