How to build Looker Custom Visualizations?: 7 Easy Steps

The Looker Marketplace is popularly known as a centralized location for finding, deploying, and managing numerous types of Looker content, such as Looker Custom Visualizations, blocks, applications, plug-ins, etc. It is used by a wide variety of Looker users across the world to share their work with other users, allowing them to save a lot of time and effort.

This article will provide you with a step-by-step guide on how you can create and configure Looker Custom Visualizations for the Looker Marketplace.

What is Looker?

Looker is a Web-based Data Visualization and Business Intelligence platform, capable of transforming Graphical User Interface (GUI) based user input into SQL queries and sending it directly to the database in live mode. It houses numerous built-in visualizations that give users the ability to analyze their data in real-time. Since Looker is always operating in live mode with the database, it works in harmony with Cloud-based Data Warehouses like Google BigQuery, Amazon Redshift, or Snowflake, which scale up or down as per requirements to manage the levels of user concurrency and query load.

Looker houses a Data Modeling layer that is separate from the components that help visualize data. The functionalities offered by this layer can be leveraged by developers to transform data, perform numerous joins across tables, etc., which can then be used by business teams to perform the necessary analysis. This functionality is considered to be extremely important as it allows multiple developers to work parallelly on a model and merge their work with Github Sync.

Key Features of Looker

The key features of Looker are as follows:

• Modern Business Intelligence: Since Looker provides wholesome access to reliable and up-to-date data, it can be used to create real-time dashboards for an in-depth and consistent analysis, resulting in more precise reporting.
• Custom Applications: Looker gives users the ability to create custom applications that can deliver unique data experiences suited for each business. Looker also houses numerous embedded analytics solutions that provide users with the visualizations they need to perform an in-depth analysis based on their business and data requirements.
• Advanced Integrations: Looker supports seamless integration with Google BigQuery, Snowflake, AWS Redshift along with 50+ SQL dialects. This gives users the ability to link with multiple databases, avoid database lock-in, and maintain Multi-cloud Data environments. 
• Advanced Hosting: Looker supports hosting on public Cloud-based platforms such as Google Cloud Platform (GCP) or Amazon Web Services (AWS) along with other Multi-cloud and Hybrid environments.

Steps to Build Looker Custom Visualizations

Users can create and configure Looker Custom Visualizations for the Looker Marketplace by implementing the following steps:

• Step 1: Identifying Visualization Type
• Step 2: Creating a Looker Project
• Step 3: Pushing the Project to GitHub
• Step 4: Checking Functionality of Looker Custom Visualizations
• Step 5: Drafting Content for Looker Marketplace Listing
• Step 6: Submitting Looker Custom Visualizations for Review
• Step 7: Maintaining Looker Custom Visualizations

Step 1: Identifying Visualization Type

• You first need to identify the type of visualization you wish to create and ensure that it is not already available in the Looker Marketplace.
• Once you have decided the type for the Looker Custom Visualizations you wish to create and are sure that it is not already available in the Looker Marketplace, you can create the visualization using Looker Visualization API, Looker Visualization Testbed, or your existing personal environment.
• The visualization then has to be pushed to a Version Control tool such as GitHub.

Step 2: Creating a Looker Project

A new Looker project has to be created to represent Looker Custom Visualizations. Each of the Looker Custom Visualizations that has to be published in the Looker Marketplace should have the following files:

• LICENSE: List of Licenses with which the Looker Custom Visualizations are distributed.
• README.md: Used to give users an understanding of how your Looker Custom Visualizations work along with any other additional information.
• Condensed .js: A condensed JavaScript code that can be used to produce your Looker Custom Visualizations. This file is included to ensure packet management and proper versioning.
• Manifest: Used to specify a unique ID and a label to the Looker Custom Visualizations. A sample Manifest file for Looker Marketplace is as follows:

constant: vis_id {
   value: "default_id"
   export: override_optional
}
constant: vis_label {
   value: "default_label"
   export: override_optional
}
visualization: {
   id: "@{vis_id}"
   label: "@{vis_label}"
   file: "my_local.js"
   sri_hash: "my_sri_hash"
   dependencies: []
}

• Marketplace .json: Contains information on how the Looker Custom Visualizations will appear in the Looker Marketplace. A sample Marketplace .json file is as follows:

{
 "label": "Gauge Visualization",
 "category_label": "plug-ins",
 "branding": {
   "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
   "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
 },
 "constants": {
      "vis_label": {
         "label": "Visualization Label",
         "description": "This label will appear in the visualization selector in the Looker Explore UI."
      },
      "vis_id": {
         "label": "Visualization Id",
         "description": "This must be a unique ID across all visualizations.",
         "value_constraint": "visualization"
      }
   }
}

Step 3: Pushing the Project to GitHub

The Looker Custom Visualizations and all the required files have to be now pushed to a remote GitHub repository. This can be done through the Looker UI by implementing the following steps:

• Open the project in which you created your Looker Custom Visualizations and select Configuration in the Project Settings panel.
• If this is a new project with no Git configurations, select Configure Git. If you’re trying to modify the existing Git configurations of an old project, select Reset Git Connection.

• Log in to your GitHub account to make a copy of the HTTPS link of your GitHub repository. If you have created a new repository for your Looker Custom Visualizations, you will see the URL as part of your initial setup.

• If you’re using an existing GitHub repository for your Looker Custom Visualizations, you can see the URL in the Code tab in the upper right corner.

• Paste the URL in the Git Configuration popup on Looker and click on Continue.

• Looker will automatically detect your Git Provider and update it in the Git Configuration popup.

• You can now choose to use a single username and password for all users to access this repository or use the user’s attributes for the Username and Password.
• In the Username and Password field, enter the credentials that LookML will use to access the Git repository. If you choose to Use a single, constant username and password combination, then these credentials will be used by Looker to perform all Git operations. This means that this account should have read and write permissions to the repository. If you choose Use user attributes for username and password, these credentials will be used to pull the production version of the Looker Custom Visualizations from the repository. This means that this account should at least have read permissions to the repository.
• If you select Use user attributes for username and password, you will see another section called Development Mode Credentials. In this section, you can configure the user attribute settings. You can use the drop-down menus to select the user attributes for individual developers’ Git credentials.

• Click on Test and Finalize Setup to create the connection.

Step 4: Checking Functionality of Looker Custom Visualizations

Looker requires the following functions to be present in any Looker Custom Visualizations present in the Marketplace:

• Support for drilling into the visualization.
• Ability to inherit Looker’s Color Palettes.
• Responsiveness to screen and browser size.
• Consistent Font family i.e. Helvetica, Arial or sans-serif
• Ability to control Font sizing.
• Ability to toggle Axis Labels and Value Labels in the Visualization Configuration panel.
• Ability to visualize pivoted data.
• Visualization updates based on user interactivity using the Update Async function or Is Update function.
• Ability to clear error messages.
• All options in the Visualization Configuration panel make an apparent change to the visualization.
• Use of field’s value formatting by default.
• Error is thrown when a given query returns no results.

You can test your Looker Custom Visualizations by applying them to a suitable Look or Export and implementing the following steps:

• Navigate to a Look or Explore of your choice.
• Click on Edit.
• Click the three-dot menu found in the Visualization Type menu. This will open the drop-down list of all available visualizations.
• Select your Looker Custom Visualization.
• Click Save to save the change to the Explore or Look.

Step 5: Drafting Content for Looker Marketplace Listing

Every listing on the Looker Marketplace is a card with a thumbnail, along with a brief description of the Looker Custom Visualizations. Each listing should contain the following information:

• Detailed information about the Looker Custom Visualizations.
• Common use cases.
• List of inputs required to use the visualization and their format, i.e., as Dimensions or Measures.
• Visualization library used.
• A GIF file demonstrating the working of the visualization.

The following image shows the Marketplace listing for a Sankey Looker Custom Visualizations:

Step 6: Submitting Looker Custom Visualizations for Review

You can send the web copy, a link to the GitHub repository, and the associated screenshots of your Looker Custom Visualizations to your Looker Partner Manager or Looker’s Product team through the designated Account Manager. Looker will then review your submission and provide the necessary feedback for any revisions. Once the changes have been made, Looker will post your Looker Custom Visualizations to the Looker Marketplace within two weeks.

Step 7: Maintaining Looker Custom Visualizations

Once the visualization is available for use in the Marketplace, it is expected that all errors will be evaluated and rectified by you. Looker users can submit their reviews through comments in the Github repository of the Looker Custom Visualizations. You are expected to respond to these comments and fix all errors within 30 days, or the visualization will be removed from the Looker Marketplace.

You can also choose to release updates to your visualization by pushing all the changes to the associated Github repository and contacting your Looker Partner Manager or Account Manager with a small description of the update.

Conclusion

This article provided you with a step-by-step guide on how you can create Looker Custom Visualizations for the Looker Marketplace. It also provided you with an understanding of the functions and files that your custom visualization should have in order to get the necessary approvals from Looker. Looker Marketplace is considered one of the most significant advantages of using Looker since it saves a lot of time that would have otherwise been spent creating visualizations for your use case.

Hevo helps you directly transfer data from a source of your choice to a Data Warehouse, Business Intelligence tools such as Looker, etc., or desired destination in a fully automated and secure manner without having to write the code. It will make your life easier and make data migration hassle-free. It is User-Friendly, Reliable, and Secure.

 Have a look at our unbeatable pricing, which will help you choose the right plan for you. Give Hevo a try by signing up for the 14-day free trial today.