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
710
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
720
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
560
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
370
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
860
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.8k
Other Decks in Technology
See All in Technology
5分でわかるDuckDB
chanyou0311
10
3.2k
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520
非機能品質を作り込むための実践アーキテクチャ
knih
2
610
CustomCopを使ってMongoidのコーディングルールを整えてみた
jinoketani
0
220
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
300
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
BBQ
matthewcrist
85
9.4k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
4 Signs Your Business is Dying
shpigford
181
21k
Code Reviewing Like a Champion
maltzj
520
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Become a Pro
speakerdeck
PRO
26
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Site-Speed That Sticks
csswizardry
2
190
YesSQL, Process and Tooling at Scale
rocio
169
14k
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