Data Studio is a great tool to create visualizations of any kind. Its usefulness comes from the fact that even a non technical person can easily understand and create visualization, with some basic understanding of the platform concepts and the rest is drag and drop.

Data Studio had only one major disadvantage for me. Since I have created visualizations with D3.js and Chart.js, I really liked the customization that a particular chart can have, be it animations or on hover effects.

There was no room in data studio to have custom built charts for a specific report, until data studio added the option for community visualizations.

Community Visualization

Using this feature one can use any chart library for building visualizations and create a generic set of options in data studio to even customize that. It was looking so cool in theory and I wanted to try it out and eventually got the chance too.

If you will dive into the docs you will find the following three steps to create a community visualization-

• Defining the config: This is the starting point where you can define the various configurations that can be changed by the end user using the visualization. The options can include setting up the dimensions and styles like color etc.
  

• Writing a visualization: This is the part where you write the code for the visualization. The final code needs to be compiled in these files- Index.js and Index.css  and finally creating a manifest.json file that contains all the details like name, version and repository details of the visualization.
  
  Since I was working with React at that time I built over the React data studio visualization starter and added chartJs for creating the bar chart with the animations.
  
  

• Hosting the visualization: This part is simple but restricted. Once you have written and compiled your code you need to add the files in a gcs bucket. They can’t be hosted anywhere else.
  
  
  
• After the files have been added to the bucket we can use the visualization in any data studio report using the link gs://{your-bucket-name}. In the above case the link would be gs://data-studio-graph
  
  

There is one final part after this, you can share your visualization after publishing, if you think it’s generic enough to support multiple use cases and other people can take benefit from it.

This is why the name starts with Community 😬

Adding my Github Repo link for the community to use: https://github.com/mdshamoon/data-studio-visualization