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
750
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
810
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
590
What even is a table? A quick look at Accessibility APIs
edds
8
2.5k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
400
Accessibility and how to get the most from your screenreader - Front End North
edds
3
1.1k
GOV.UK Case Study - Fronteers 2013
edds
2
1.1k
Using Sass on GOV.UK
edds
8
910
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.8k
Other Decks in Technology
See All in Technology
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
120
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
230
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.7k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
190
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
920
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.1k
バイブコーディングと継続的デプロイメント
nwiizo
2
390
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
820
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
280
o11yで育てる、強い内製開発組織
_awache
3
100
Windows で省エネ
murachiakira
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for humans not robots
tammielis
254
25k
Automating Front-end Workflow
addyosmani
1371
200k
Docker and Python
trallard
46
3.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
The World Runs on Bad Software
bkeepers
PRO
71
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
A designer walks into a library…
pauljervisheath
208
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Context Engineering - Making Every Token Count
addyosmani
4
160
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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