How to add custom visualization in Looker using javascript?

In Looker, there are two ways to add custom visualizations using Javascript:

1. Adding a custom visualization for all projects
2. Adding a custom visualization for a specific project

Adding a custom visualization for all projects:

1. Expand the “Admin” panel and click on the “Visualizations” page under the Platform header.
2. The Visualizations page will display all of the custom visualizations that are already added to your Looker instance.
3. On the top left corner of the page, click on the Add Visualization button. This would take you to the New Visualization page. Fill in the following line items:
   1. ID field : This is the unique ID of the visualization, which will be defined in JavaScript.
   2. Label field : The name of the visualization will be displayed in the visualization menu in explore.
   3. Main field : The URL of the visualization’s main JavaScript file in the code repository.
   4. Subresource Integrity (SRI) hash : This Advanced Option lets you enter the SRI hash if the site hosting the custom visualization code uses a Subresource Integrity for verification purposes. 
   5. Dependencies field : This is also an advanced option that lets you enter the URLs of any files that the visualization JavaScript may depend upon. You can enter multiple URLs separated by commas, or you can add multiple URLs one at a time by clicking the “Add” button. 
4. Once submitted, you should see the new visualization type in the visualization menu of an Explore, and you may use it like any other existing visualization type.

Adding a custom visualization for a specific project:

Alternatively, you can add a custom visualization to your LookML project by adding the following LookML to a project’s manifest file. Enter the same details as listed in point 3 of the above section (Adding a custom visualization for all projects):

visualization: {
  id: "demo-visualization-dev"
  label: "Demo Viz"
  url: "https://abc-test.com/viz-destination/demo.js"
  sri_hash: "xyz"
  dependencies: ["https://xyz/jquery.min.js","","",""]
}

Up Next:

Read How to show the column value labels without changing value label format for percent change in Looker?