Google Analytics Heartbeat Data Visualization

An experiment in real-time data visualization

About a year ago, I was right in the middle of training for my 4th triathlon and just picked up a new Garmin watch along with all the sensors I deemed necessary at the time. I started to really monitor my heart rate while I was training and would adjust my activity level to make sure I kept it in a sustainable zone. At the same time, I was working on implementing Google Analytics on a website the team at 20nine was about to launch and brainstorming some cool ways to monitor the success of the site. My goal was to create an interesting animated visual using the Google’s Real-Time Reporting API (in beta).

I realized that a heart rate could potentially be just as good of an indicator of activity level for fitness as it could be for a website launch or marketing campaign.

What if I could translate the real-time website analytics into an EKG style chart? This would be a fun and interesting way to see, at a quick glance, how a campaign was doing.

I started doing some research to see how I could merge the two ideas. My first stop was what an EKG looked like for a normal heartbeat.

I used the diagram above as my basis for the design. To differentiate between states I started looking at different EKG charts. I learned a little bit about the various heart rhythms and what they meant. In an attempt to keep this data visualization simple, at least for the first iteration, I decided to keep it to 4 different states/rhythms:

• Asystole (flat)
• Bradycardia (Some activity, but low)
• Normal (Healthy activity)
• Tachycardia (High activity level)

The Development

Before diving into the code, I needed to figure out how I was going to match up website activity to the above heart rhythms. The combination of traffic, events and conversions was going to be the best gauge at the health of the campaign, but they would need to be weighted according to importance.

The graph should generally work on any website so, when initially loaded, it will always need to start with data collection to get an idea of the normal activity. The algorithm will need to get all the data points (traffic, events and conversions, etc..), weight them accordingly and save it in an array.

At the next interval, the algorithm would run and check the current value against the averages of the past to determine what the rhythm is. This isn’t perfect, but fine for a proof of concept.

Step one was setting up the Google Analytics Real-Time reporting API through Google’s developer console. Once the Google API was authenticated, I’m querying two reports: active users and goal completions. Due to query restrictions in the API documentation, we can’t get this information in one API call. I had to stagger these requests and then call my Heartbeat function.

Check out this guide for documentation on getting started with the Reporting API: https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

The D3.js line graph ended up being the best bet to create the look of the heart rhythms. There was a lot of trial and error to get the speed and line graph to resemble an EKG, but what worked best was separating the states into functions with an array of hard-coded values.

Here’s an example of what the normal rhythm function looks like:

The Demo

Here’s a video of the visualization in action.

Thanks For Reading!

You can find the full code here to adjust and try on your own analytics setup:

https://github.com/jzeoli/heartbeat