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
670
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
650
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
520
What even is a table? A quick look at Accessibility APIs
edds
8
2.2k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
330
Accessibility and how to get the most from your screenreader - Front End North
edds
3
930
GOV.UK Case Study - Fronteers 2013
edds
2
940
Using Sass on GOV.UK
edds
8
810
What the flash - Photography Introduction
edds
65
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
770
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
地理情報とAPIのトレンド
nagix
0
160
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
MySQLのロックの種類とその競合
yoku0825
6
1.6k
How to Think Like a Performance Engineer
csswizardry
4
590
Featured
See All Featured
Web development in the modern age
philhawksworth
203
10k
Speed Design
sergeychernyshev
9
270
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Large-scale JavaScript Application Architecture
addyosmani
506
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Designing for humans not robots
tammielis
247
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
A Philosophy of Restraint
colly
200
16k
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