Data Studio, which is Google’s Business Intelligence tool, is actively taking steps toward building an interactive community with its latest release: Community Visualizations. The new feature, which is still currently in beta, allows 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 analyses or even in-browser machine learning.
 
The community visualization features offer users the flexibility to use any visualization library and add custom JavaScript and CSS. It also provides the capability to define which style elements your visualization requires in the Data Studio property panel. The feature is highly dynamic since it’s built as an event-driven model that posts data and style information to your visualization as users interact with the report.
 

New Galleries for Data Studio Community Visualizations

 
Alongside the new feature, Data Studio also launched the Community Visualization Report Gallery.
 
There, you can explore how others in the community have leveraged Community Visualizations to make the most of their data and dashboards. Additionally, Google added a new gallery of Partner Community Visualizations that we’ve made available. You can check them out here.

 

How You Can Build Visualizations

 

Step 1: Complete the Community Visualization Codelab

 
Use the Community Visualization Codelab to get started with Community Visualizations. The codelab provides a step-by-step guide to building a community visualization and can be completed in about 30 minutes.
 

Step 2: Join the Developer Community (Optional)

 
Join the Data Studio Developer Community to stay up-to-date with developer feature announcements.
 

Step 3: Define the Visualization Config

 
Data and style options for a community visualization are defined in a config JSON. The data configuration sets the number of dimensions and metrics the visualization supports. The style configuration defines the style selectors available in the property panel.
 

Step 4. Write the Visualization Code

 
The Data Studio helper library provides an interface between you and Data Studio. To use the library, provide a callback function that renders the visualization.
 
The most salient function in the library is subscribeToData, which takes two arguments: a callback function that renders the visualization and an options object that specifies what kind of transformation you’d like your data to take. To learn more, review the library reference.
 
The following provides an outline of what your visualization JavaScript could look like.
 

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

There are a few key things to keep in mind when writing a community visualization.
 
Updates from the subscribeToData function occur when the data, styling, or iframe size changes.
 
For example:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
  // viz code goes here
}

 
Data Studio loads and runs JavaScript files, not HTML. All DOM manipulation needs to happen through JavaScript.
 
For example, the following code defines and appends a div to the DOM.
 

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

 
Data Studio community visualizations only allow you to load one JavaScript file. The uploaded code should be a single file that includes the dscc helper library, any JavaScript visualization libraries, and your visualization code.
 
To do this in bash, you can use the cat command, like below.
 

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

 
The visualization manifest file provides metadata about the visualization, as well as information about the location of visualization resources. The location of the manifest file is referred to as the “component ID,” and used to load a Community Visualization.
 
Review the manifest reference to see a sample manifest.

 

Step 5: Upload Your Visualization

 
Now that your visualization code is written, Data Studio needs to be able to access your resources. For Data Studio to load a Community Visualization, all of your resources must be publicly available in a Google Cloud Storage bucket.
 
Create a bucket and upload files using either the web interface or the gsutil command-line tool.
 
If your visualization files are in your current working directory, you can use the following command to upload your files to your storage bucket.
 

gsutil cp -a public-read * gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
 

To load a Community Visualization you’ve developed, use the location of the manifest file prefixed by gs://.
 

Step 6: Use Your Visualization

 
In the toolbar, click Community visualizations and components

 

Image Source: developers.google.com/datastudio


 
In the dialog, click Explore more to open the Community Gallery shade
 

Image Source: developers.google.com/datastudio


 
Click Build your own visualization
 
Enter your Manifest Path and click Submit. One visualization icon will be rendered for each component in your manifest. Click a visualization icon to add it to your report.
 

Image Source: developers.google.com/datastudio


 

Step 6: Sharing a Community Visualization

 
After you build a Community Visualization, you can share the Component ID with other users so that they can use it in their reports.
 
There are three ways to share your Community Visualization more broadly:
 

  1. Publishing it to the Data Studio Community Gallery.
  2. Submitting a report with your visualization to the Report Gallery
  3. Sharing the code on GitHub

 

Step 7: Publish Your Community Visualization

 
Publishing your visualization will allow all Data Studio users to easily find your visualization in the Data Studio gallery. Visualizations in the gallery will be considered for additional promotion and publicity, including inclusion in the Data Studio newsletter.
 
Check here the publishing criteria, as established by Google 

How It Can Be Used

 
For example, let’s imagine you want to use the Partner Visualizations. In order to add these Partner Visualizations to a report, click “Explore more” in the Community Visualizations dropdown. There, you can browse and install a variety of partner-built charts, including funnel visualizations and Gantt charts.
 
Community Visualizations can add to a Data Studio dashboard in different ways, from providing custom charts and styling to integrating calculations with reporting.
 

Image Source: Data Studio Visualizations Gallery/ Google Marketing Platform


 
 

How We Can Help

 
Great visualizations will not only help you understand more about your data, but they’ll also offer faster, more meaningful answers to questions your clients may have, and even inspire others to ask and answer new questions. 
 
Remember, you need impactful visualizations in order to keep your audience engaged. Don’t sell yourself short with poor visualizations. Instead, constantly try to improve your work. I hope these tips can help make some improvements to your own visualizations. 
 
If you’re itching for an even deeper dive, contact us at Cognetik. Our team of experts is more than willing to help you tell the story of your data.
 

About the author

Sebastian Stan

Sebastian is a journalist and digital strategist with years of experience in the news industry, social media, content creation and management, and digital analytics.

White Paper: Retail Industry Analysis Report

Retail Industry Analysis Report

Related Articles