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
690
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
690
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
540
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
340
Accessibility and how to get the most from your screenreader - Front End North
edds
3
970
GOV.UK Case Study - Fronteers 2013
edds
2
970
Using Sass on GOV.UK
edds
8
840
What the flash - Photography Introduction
edds
67
11k
HTML5
edds
11
1.7k
Other Decks in Technology
See All in Technology
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
110
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
3
700
New Relicを活用したシステム監視の強化とオブザーバビリティ向上
sugoto911
1
110
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
120
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
4
310
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
160
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
150
業務ヒアリングと知識の呪い
tamai_63
0
290
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
エンジニア向け会社紹介資料
caddi_eng
14
270k
Unlearn Modularity
lemiorhan
4
110
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
2.9k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
A Philosophy of Restraint
colly
203
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Being A Developer After 40
akosma
84
590k
Designing Experiences People Love
moore
138
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Gamification - CAS2011
davidbonilla
80
5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Design by the Numbers
sachag
278
19k
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