Create Custom Charts with Data Studio Community Visualizations

Create Custom Charts with Data Studio Community Visualizations

Have you ever wanted to use a chart type that’s not available in Data Studio? Perhaps you’d like to use a funnel to display a checkout flow, a treemap to show a category hierarchy, or a chord diagram to visualize complex relationships.

Thanks to Community Visualizations, any chart you dream up can be created and used in Data Studio!

Community Viz provides a framework for natively interfacing with Data Studio, so that you can retrieve data from a Data Source, process it into a custom visualization, and use it on your report canvas like any other chart.

Similar to the well-established Community Connectors feature, you can either build your own visualizations or use those created and shared by members of the Data Studio community.

Building a community visualization requires a fair degree of coding ability, specifically with HTML, CSS, and JavaScript. Data Studio does allow you to use visualization libraries (e.g. D3.js), so long as you can include the full source within your community viz script (i.e. no external script references). To assist with learning the development process, the Data Studio team has created a Community Visualization Codelab that walks you through building your first custom visualization.

We have put together a Community Visualization Showcase to demonstrate what’s possible with community visualizations, which include the examples below. The Data Studio team has also published their own featured examples.

1. Small Multiples (Click to view in Data Studio)
Visualizing trends in sessions, broken out by channel. This chart is created using the MetricsGraphics.js library.

2. Heatmap (Click to view in Data Studio)
Visualizing all of Stephen Curry’s shots during the 2017-18 Regular Season. This chart is created using the simpleheat.js library.

3. Connected Dot Plot (Click to view in Data Studio)
Visualizing the NHL Eastern Conference wins over the past three seasons. This chart was created using the d3.js library.

 

4. Jitter Plot (Click to view in Data Studio)
Visualizing the most demanding sport by skill requirement. This chart was created using the d3.js library.

5. Chord Diagram (Click to view in Data Studio)
Visualizing the relationship of one’s own hair colour and their preference of partner’s hair colour. This chart was created using d3.js based on Mike Bostock’s Chord Diagram. 

View our full Community Visualization Showcase in Data Studio.

By using Data Studio’s developer features together (community connectors and community visualizations), you can develop fully customized reporting solutions—connect to any data source and visualize that data however you want.

If you would like help building custom connectors and visualizations or exploring how Data Studio can work for your organization, get in touch!

Complete list of posts in our 2018 edition 12 Days of Data Studio series:
1. ClickInsight Data Viz Gallery
2. Comparing Multiple GA Segments on a Chart in Data Studio
3. Exporting to PDF from Data Studio
4. Using Bookmarks Links in Data Studio
5. Keyboard Shortcuts for Data Studio
6. Creating Heat Maps in Google Data Studio
7. Using Charts as Interactive Filters in Data Studio
8. Creating Diverging Bar Charts in Data Studio
9. Creating Thumbnail Images of Data Studio Reports
10. Embedding URLs in Data Studio
11. Open Source Community Connectors for Data Studio
12. Create Custom Charts with Data Studio Community Visualizations (this post)

 

By |2019-05-17T11:55:16-05:00December 18th, 2018|4 Comments
Categories: Data Studio

4 Comments

  1. Iwan January 2, 2019 at 1:07 am - Reply

    Great Post!!! This is really helpful. By the way, can you simply share Visualization ID for Tau Chart?

    • Marc Soares January 2, 2019 at 8:45 am - Reply

      Glad you found the post helpful. We created these examples to demonstrate the potential of community visualizations. We are not sharing our visualizations externally at this time.

  2. Tiago January 10, 2019 at 8:29 am - Reply

    Hi, awesome post!! This will be very usefull, is there a way to easily use the examples above?

    • Marc Soares January 11, 2019 at 5:39 pm - Reply

      Thanks for you comment. We created these examples to demonstrate the potential of community visualizations. We are not sharing our visualizations externally at this time, but we plan to make some available in the future.

Leave A Comment