A data visualization that takes real-time traffic and graphs it as a heartbeat.

1. Finding the Pulse
of your Website
Joe Zeoli - Lead Developer

2. The Background
+

3. The Research

4. The Variations
Asystole

5. The Variations
Bradycardia

6. The Variations
Normal

7. The Variations
Tachycardia

8. The Libraries

9. Google Analytics Realtime-Reporting API (beta)
1. Set-up a developer account
2. Authorize
3. Query
4. Get the heartbeat
https://developers.google.com/analytics/devguides/reporting/realtime/v3/

10. Google Analytics Realtime-Reporting API (beta)
1. Set-up a developer account
2. Authorize (gapi.auth.authorize)
3. Query
4. Get the heartbeat
https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

11. Google Analytics Realtime-Reporting API (beta)
1. Set-up a developer account
2. Authorize (gapi.auth.authorize)
3. Query
4. Get the heartbeat
https://developers.google.com/analytics/devguides/reporting/realtime/dimsmets/
ACTIVE
USERS
GOAL
CONVERSIONS
rt:activeUsers rt:goalCompletionsAll

12. Google Analytics Realtime-Reporting API (beta)
1. Set-up a developer account
2. Authorize (gapi.auth.authorize)
3. Query
4. Get the heartbeat
https://developers.google.com/analytics/devguides/reporting/realtime/dimsmets/

13. Google Analytics Realtime-Reporting API (beta)
1. Set-up a developer account
2. Authorize (gapi.auth.authorize)
3. Query
4. Get the heartbeat

14. The Cycle
Get Data
Save change
in history
Get heartbeat
type
Redraw
the line

15. The Line Graph with D3
● Set the dimensions of the canvas
● Set the ranges
● Define the line
● Add the SVG to the canvas
● Get the data
● Scale the range of the data

16. The Line Graph with D3

17. The Beats

18. The Demo (20nine.com)

19. The Future
● BPMs based on inputs
○ Padding the middle
● Irregular heartbeats
○ Example: high bounce rate causing an arrhythmia
● Machine Learning
○ Using past data to determine the site performance

20. THANKS!
https://github.com/jzeoli/heartbeat
Twitter - @joezeoli
Email - joe@20nine.com