The new custom heatmap visualization. Link to report here.

Heatmapping in Data Studio Using Custom Viz (Part 2)

Ben Kates
Ben Kates
Feb 28 · 3 min read

When I first learned about the team here at CompassRed, the article below from Data Analytics Team Lead Patrick Strickler stood out. Creating a custom click heatmap using Google Analytics, Google Tag Manager, and Google Data Studio was (and still is) an innovative approach to extending Google Analytics capabilities.

In order to get the data required for the view shown in this article, you will need to follow the instructions outlined in Pat’s original post. There, you’ll find the JavaScript for Google Tag Manager to capture x/y coordinates of a click in a Google Analytics event. If you’re just here for a cool viz, keep reading!

The previous heatmap visualization using a native scatterplot.

The original visualization resulting from the custom implementation work is awesome. A report viewer can get an understanding of which areas on the page are generating the most engagement.

Unfortunately, when you scale this up, the size of the bubbles gets lost and it’s hard to differentiate exactly which part of a small area is getting the most engagement. Radius size starts to lose its value at scale.

With the arrival of custom visualizations using JavaScript, HTML, and CSS in Google Data Studio’s Community Visualizations, I wondered if this report could be brought to the next level. Using the simpleheat library from Leaflet creator Vladimir Agafonkin, here’s the result:

The new custom heatmap visualization. Link to report here.

Now, report viewers are able to get a better sense of engagement using a familiar heatmap visualization. Tightly packed data points are rolled up into a nice red shade making it easier to derive insight.

Note: we’re adding a Device Type filter for desktop and a relevant screenshot of the page underneath the visualization itself (per the original post). It’s not possible to make external requests in Data Studio Community Visualizations so uploading an image into the Data Studio report itself is required.

A demo of the custom heatmap visualization. Link to report here.

The dimensions and metrics required are straight forward. If you‘ve followed the tutorial in the original post, then you’ll have X Val and Y Val calculated dimensions to use and native Total Events for the metric.

The Style configuration available in the custom visualization component provides a few customization factors.

Radius Size (px) will adjust…radius for each data point.

Blur Size (px) helps the gradient become more/less precise. Higher blur results in a smoother gradient.

Minimum Opacity (0 to 1) will help decrease the visibility of lower value data points.

Color Selection will adjust the color gradient. User input can control the colors for the following stop values: Low (25%), Mid (55%), High (85%) and Max (100%).


If you’ve implemented the heatmap eventing described in the original post and want to try out this custom visualization, you can use the following Google Cloud Storage bucket link when adding a new community visualization via manifest path.

gs://ds-viz-cr/public/heatmap

We’re excited to share this custom visualization with the community. Please share your thoughts and questions, either here on Medium or Twitter! Happy Heatmapping!

CompassRed Data Blog

We live for data and analytics.

Ben Kates

Written by

Ben Kates

Data Analyst living in Philadelphia, PA | benkates.com

CompassRed Data Blog

We live for data and analytics.

More From Medium

More from CompassRed Data Blog

More on Data Visualization from CompassRed Data Blog

More on Data Visualization from CompassRed Data Blog

Our Favorite COVID-19 Data Visualizations

More on Analytics from CompassRed Data Blog

More on Analytics from CompassRed Data Blog

R vs Python, why not both?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade