3 awesome examples of Google Data Studio community visualizations — and how to build your own

When our friends at Google suggested that we team up on the launch of their new Data Studio community visualizations gallery, we jumped at the chance. In fact, Supermetrics developer, Touko Peltomaa, was one of the first non-Googlers to create visual components that are now available in the gallery.

In this post, we explain what Data Studio community visualizations are all about and introduce the three handy components Touko built to make Data Studio even better.

What are Data Studio community visualizations?

Google Data Studio community visualizations allow anyone to build, use, and share custom visualizations in Google Data Studio. These elements are essentially graphs, tables and filters for data. The new gallery that was launched in January 2020, makes community visualizations available for everyone in an easy-to-use gallery within Data Studio. The gallery allows users to easily enrich their dashboards with custom made visual components that work in Data Studio just like the native visual elements do.

To borrow from Google’s Developer Advocate Yulan Lin, “Data Studio community visualizations allow you to create and integrate custom JavaScript components into your dashboards. You can use community visualizations to expand your chart selection, customize your report styling, or create custom components that perform advanced analysis.”

Enter Touko — the force behind Supermetrics’ 3 new community visualizations

Touko is a first-year computer science student at the University of Helsinki. He’s a full-stack developer who started to code around the age of 15. “I wanted to figure out how to do some cool things and ended up trying and learning a bit of everything over time; PHP, JavaScript, Python, a little bit of Java, among many others,” says Touko. “I’m mostly interested in web development and mobile app development. Machine learning is something I’d like to specialize in later on,” he continues.  

“I’ve worked with Google products before, for example with Tag Manager and Google Analytics. I also have experience in marketing related programming prior to joining Supermetrics. So I had a good starting point for my work being familiar with the environment as well as understanding the needs of marketers,” says Touko. 

Touko joined Supermetrics in the summer 2019 and took the lead of the Data Studio community visualization project.

Community visualization no. 1: Gantt chart

It was time for Touko to roll up his sleeves and get to work. Touko explains, “We decided to start with a Gantt chart because it seemed there was a need for one and there was nothing like that available in Data Studio at the time.”

The Gantt chart splits data by date, so you can easily see which marketing campaigns or channels were active at a certain time period and for how long. It has light boxes that show more detailed data per channel or campaign and you can filter the rest of the dashboard by clicking on one of the bars in the chart. “But this is just one example, you can do all kinds of things with it, for example, review the history of activities or monitor which activities run parallel to each other,” says Touko.

See the Gantt chart component here >>

Community visualization no. 2: Date picker filter

The second visualization component Touko created is a date picker filter. It is a handy visual filter that allows its users to easily compare metrics month to month & year to year in one view.

See the date picker filter here >>

Community visualization no. 3: Country & currency selector

The third Google Data Studio visualization Touko created is a country & currency selector that makes it easy to get an overview of for example marketing campaign performance per country and currency. “All components can also be used to filter data in other charts created with the same data source,” adds Touko.

See the country & currency selector here >>

The three visualizations Touko created are now available for Data Studio users all over the world in the Data Studio community visualizations gallery.

How to add your own community visualization into Data Studio

The good news is that anyone can build custom community visualizations for Google Data Studio. While it does require some development skills, basic HTML, CSS, and JavaScript should already get you pretty far.

“The Data Studio community visualization development is a bit like building a website but the end result is a visual component,” describes Touko. “Google Data Studio is a data visualization tool, so the components need to look nice and be easy and pleasant to consume. You need to have an eye for that sort of stuff in order to create good quality components,” Touko says. 

“You can use almost any web technologies to create these custom visualizations, which gives developers the freedom to use their favourite tools. I went with Preact which is a web framework similar to the famous React developed by Facebook. It has almost identical API but it’s more lightweight making it a perfect match for custom visualizations. All three of our new visualizations benefit from Preact state management and component based architecture. Preact allows users to have a great performing and customizable custom visualizations and developers are happy to use modern technologies,” explains Touko.

As the Data Studio community visualizations gallery is still in its infancy, it might take a while to figure out what the best ways of doing the visualizations are. It took Touko all summer to finalize the three components, so it is by no means a quick and easy task. “There are different libraries I could’ve used, but I thought it would be better to build it from scratch because then I was able to make it exactly the way I wanted to. This way, I was able to include channel logos and a handy slider on top of the Gantt chart.”

“There are still very few community visualizations there, so I didn’t have many examples when I started. There was a lot of trial and error in the process,” says Touko. “Data Studio gives you a lot of freedom, which is great, but it also means you’re starting from scratch,” he continues. 

“All in all, creating these visualizations was quite a lot of work. It’ll get easier, I’m sure, as the gallery develops further and the number of visualizations grows. There are also some improvements we could even make at Supermetrics to make production a little easier and speedier.”

Touko feels that Data Studio community visualizations still require some improvements from Google’s side. “There’s no proper development environment where I could test the code and make sure the visualizations work the way they are supposed to, for example,” Touko adds. 

“Google always has good documentation though. That helps a lot.”

To get started with your own Data Studio community visualizations, check out the gallery >>

And to automate your marketing data flows from different data sources, check out the Data Studio connector gallery >>