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
720
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
750
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
570
What even is a table? A quick look at Accessibility APIs
edds
8
2.3k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
380
Accessibility and how to get the most from your screenreader - Front End North
edds
3
1k
GOV.UK Case Study - Fronteers 2013
edds
2
1k
Using Sass on GOV.UK
edds
8
880
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.8k
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
60k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
250
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
870
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
120
短縮URLをお手軽に導入しよう
nakasho
0
130
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
240
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
130
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
130
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
180
実は強い 非ViTな画像認識モデル
tattaka
1
980
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
12
3.6k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Practical Orchestrator
shlominoach
186
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Site-Speed That Sticks
csswizardry
4
400
A Tale of Four Properties
chriscoyier
158
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
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