Custom viz

Custom viz

With the Custom viz widget, you can build a visualization based on your custom JavaScript code. To create a custom visualization, you need to select the data columns that are used to generate the query, and then add the code on how to process and visualize the data.

When to use

Use this widget when you cannot find an alternative visualization in the widgets pane. You need to be familiar with JavaScript and CSS to build your custom visualization.

Data requirements

To build this chart, define the required and optional data fields as follows:

  • Columns – Dimensions and measures that you want to use in the visualization. The order of the columns is used in the visualization query. In other words, you write the code considering the column’s order (the first column, the second column, and so on).

  • Other – (Optional) List of columns to be included in the query scope but not used in the visualization layout.

Actions are not supported for the Custom viz as a source. However, you can select the Custom viz as a target for actions except for highlighting.

You can use the Filter widget with the Custom viz. For details, see Filter.

Code Manager

In the Code & resources section, click Code Manager.

Use case

The following heatmap shows the magnitude of the earthquakes around the world. The custom visualization is built using Leaflet, an open source JavaScript library.

Heatmap showing earthquakes


Try building your first custom viz: Build a custom JavaScript viz – Tutorial.

For details on how to customize your visualization, see Visualization settings.

For a whole list of visualizations, see the following topics: