> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.omni.co/feedback

```json
{
  "path": "/visualize-present/visualizations/types/custom",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Custom visualizations

> Omni supports the most common visualization types and settings out of the box. However, if your business needs customization, you can:

* [Leverage an iframe tag in a Markdown tile](#iframe-custom-visualizations)
* [Create a Vega-Lite visualization](#vega-lite-visualizations)

## iframe custom visualizations

One way to create a custom visualization is to leverage an iframe tag in a Markdown tiles. The data in results + [postMessages](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) will render your custom iframes and provide a ton of flexibility.

For example:

```html theme={null}
<iframe src="https://example.html"></iframe>
```

**Note**: Included images won't render if they are scheduled. Additionally, the file must be hosted outside of Omni.

## Vega-Lite visualizations

Many of Omni's charts are backed by [Vega-Lite](https://vega.github.io/vega-lite/), which is a JSON-based spec for visualizations. You can directly edit a chart's code to customize it beyond what Omni provides out of the box.

If you are unfamiliar with Vega-Lite, check out the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/) before perusing the [example gallery](https://vega.github.io/vega-lite/examples/).

### Accessing the advanced editor

<Warning>
  Before opening the advanced editor, note that:

  * **The existing visualization will break**. To experiment with the advanced editor, create a copy of the query so you don't lose your work.
  * **Drill functionality will be unavailable**
</Warning>

In the **Chart** tab of any workbook query, there are two ways to access the advanced editor:

* **In the Chart selector** - Click the `{ ... }` icon to select the **Vega code** option. This will open the advanced editor, but without any pre-populated Vega code. This can be useful to start from scratch, such as with an [example from Vega](https://vega.github.io/vega-lite/examples/) or [one from the example gallery on this page](#examples).

* **In the chart editor** - For any chart powered by Vega-Lite, there will be a `{ }` icon in the chart editor. Clicking it will open a menu with the following options:

  * **View source** - Opens a dialog with the Vega-Lite JSON
  * **Open in advanced editor** - Copies the current chart code and opens it in the **Advanced editor**

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/custom-vis-view-source-menu-13bb32a4f5ffa54e273a125387c38143.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=3abb5b6ebb635fd5c01ba343472c7feb" alt="screenshot of the View Source menu" width="1000" height="643" data-path="images/docs/visualization-and-dashboards/assets/images/custom-vis-view-source-menu-13bb32a4f5ffa54e273a125387c38143.png" />

### Referencing data in the advanced editor

To use data from the results query, you'll need to reference the field by its view and field name as they are defined in the model. This will look like `view_name\\.field_name` in the editor.

The double forward-slashes (`\\`) are included because periods and brackets must be escaped. For example:

| Omni object               | Vega object                     |
| ------------------------- | ------------------------------- |
| `users.id`                | `users\\.id`                    |
| `users.age`               | `users\\.age`                   |
| `users.created_at`        | `users\\.created_at`            |
| `users.created_at[date]`  | `users\\.created_at\\[date\\]`  |
| `users.created_at[month]` | `users\\.created_at\\[month\\]` |
| `id`                      | `id`                            |

**Note**: In the last example, `id` would only occur from a raw SQL query as Omni will alias with the view.

### Saving and resetting changes

Custom visualizations must be manually saved. While the visualization will update as you edit, the code is not auto-saved. Periodically click the **Save** button to save your changes.

To remove all edits made to the code, click **Reset**. This will revert the code to its original version.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/custom-vis-save-button-730e69a163ad39bf65a454b1c11e08dc.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=42a50c15e7c880b8cf0bec18a3429f57" alt="Saving a Vega code visualization" width="1000" height="654" data-path="images/docs/visualization-and-dashboards/assets/images/custom-vis-save-button-730e69a163ad39bf65a454b1c11e08dc.png" />

## Examples

<Check>
  In addition to custom Vega-Lite visualizations, you can also build custom visualizations using HTML, CSS and Markdown. Check out the [Markdown visualization examples](/visualize-present/visualizations/types/markdown) for some inspiration.
</Check>

### US state map

<Warning>
  Omni recommends using the [native map visualization](/visualize-present/visualizations/types/map) for this visualization.
</Warning>

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/us-map-state-5c1d6ed8c46886dd5a517bcca68edd84.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=3834e5b1def6efbfffba192bf955feb7" alt="" width="1594" height="1214" data-path="images/docs/visualization-and-dashboards/assets/images/us-map-state-5c1d6ed8c46886dd5a517bcca68edd84.png" />

**Query fields**:

* `users.state` - Full-length state names are required for this visualization. To remove the legend, add `"legend":null` within `color{...`
* `users.user_count`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "data": {
        "url": "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json",
        "format": {
          "type": "topojson",
          "feature": "states"
        }
      },
      "mark": {
        "fill": "lightgray",
        "type": "geoshape",
        "stroke": "black"
      }
    },
    {
      "mark": "geoshape",
      "width": "container",
      "height": "container",
      "encoding": {
        "href": {
          "type": "nominal",
          "field": "url"
        },
        "color": {
          "type": "quantitative",
          "field": "COLOR"
        },
        "shape": {
          "type": "geojson",
          "field": "geo"
        },
        "tooltip": [
          {
            "field": "STATE",
            "title": "State"
          },
          {
            "type": "quantitative",
            "field": "COLOR",
            "title": "User Count"
          }
        ]
      }
    }
  ],
  "width": "container",
  "height": "container",
  "transform": [
    {
      "as": "STATE",
      "calculate": "datum['your_view.your_state']"
    },
    {
      "as": "COLOR",
      "calculate": "datum['your_view.your_measure']"
    },
    {
      "as": "geo",
      "from": {
        "key": "properties.name",
        "data": {
          "url": "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json",
          "format": {
            "type": "topojson",
            "feature": "states"
          }
        }
      },
      "lookup": "STATE"
    },
    {
      "as": "url",
      "calculate": "'https://sandbox.proto.exploreomni.com/w/0a494c7e-3d8a-4f31-aa53-cb8d1e62f4fa/drill?ephemeral=DyXjRBEJ%2CRveZe1I6%2CZUK24UVr%2CHehug3WH%2CbuG0igrs%2CcNuuSY8a%2CnOHD__EL%2C3Dgpwy5c%2C0ta1FE8v%2CSsbC6Jdf&field=users.count&filters=%7B%7D&miniUuid=ZUK24UVr&row=%7B%22users.state%22%3A%22' + datum['users\\.state'] + '%22%2C%22state_id.state_id%22%3A%221%22%2C%22users.count%22%3A%221625%22%7D' "
    }
  ],
  "projection": {
    "type": "albersUsa"
  }
}
```

### US map with latitude and longitude

<Warning>
  Omni recommends using the [native map visualization](/visualize-present/visualizations/types/map) for this visualization.
</Warning>

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/10-custom-vis-us-map-505d35fb6ccbf821170ff18e56598489.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=72a0ab6f9b9f215e22c1033287e8e43e" alt="" width="1314" height="1114" data-path="images/docs/visualization-and-dashboards/assets/images/10-custom-vis-us-map-505d35fb6ccbf821170ff18e56598489.png" />

**Query fields:**

* `users.zip`
* `users.zip_first_digit`
* `users.latitude_average`
* `users.longitude_average`
* `users.user_count`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "data": {
        "url": "https://vega.github.io/editor/data/us-10m.json",
        "format": {
          "type": "topojson",
          "feature": "states"
        }
      },
      "mark": {
        "fill": "lightgray",
        "type": "geoshape",
        "stroke": "white"
      }
    },
    {
      "transform": [
        {
          "as": "LATITUDE",
          "calculate": "datum['users\\.latitude_average']"
        },
        {
          "as": "LONGITUDE",
          "calculate": "datum['users\\.longitude_average']"
        },
        {
          "as": "COLOR",
          "calculate": "datum['calc_1']"
        }
      ],
      "mark": {
        "type": "circle",
        "tooltip": true
      },
      "encoding": {
        "size": {
          "value": 5
        },
        "color": {
          "type": "nominal",
          "field": "COLOR",
          "scale": {
            "scheme": "magma"
          },
          "legend": null
        },
        "latitude": {
          "type": "quantitative",
          "field": "LATITUDE"
        },
        "longitude": {
          "type": "quantitative",
          "field": "LONGITUDE"
        }
      }
    }
  ],
  "width": "container",
  "height": "container",
  "projection": {
    "type": "albersUsa"
  }
}
```

### US map - zip code choropleth

<Warning>
  Omni recommends using the [native map visualization](/visualize-present/visualizations/types/map) for this visualization.
</Warning>

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/map-zips-b5363a47cd71f182eb8b585ed940244b.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=cbb1a7ad577fc3576674458ffb6cf4dc" alt="" width="1660" height="1034" data-path="images/docs/visualization-and-dashboards/assets/images/map-zips-b5363a47cd71f182eb8b585ed940244b.png" />

**Query fields**:

* `users.zip`
* `users.user_count`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "data": {
        "url": "https://vega.github.io/editor/data/us-10m.json",
        "format": {
          "type": "topojson",
          "feature": "states"
        }
      },
      "mark": {
        "fill": "white",
        "type": "geoshape",
        "stroke": "black"
      }
    },
    {
      "mark": "geoshape",
      "width": "container",
      "height": "container",
      "encoding": {
        "color": {
          "type": "quantitative",
          "field": "users\\.count",
          "scale": {
            "domain": [
              0,
              20
            ],
            "scheme": "blues"
          },
          "legend": null
        },
        "shape": {
          "type": "geojson",
          "field": "geo"
        },
        "tooltip": [
          {
            "field": "ZIP"
          },
          {
            "type": "quantitative",
            "field": "COLOR",
            "title": "Users Count"
          }
        ]
      }
    }
  ],
  "transform": [
    {
      "as": "ZIP",
      "calculate": "datum['users.zip']"
    },
    {
      "as": "COLOR",
      "calculate": "datum['users.count']"
    },
    {
      "as": "geo",
      "from": {
        "key": "properties.zip",
        "data": {
          "url": "https://gist.githubusercontent.com/jefffriesen/6892860/raw/e1f82336dde8de0539a7bac7b8bc60a23d0ad788/zips_us_topo.json",
          "format": {
            "type": "topojson",
            "feature": "zip_codes_for_the_usa"
          }
        }
      },
      "lookup": "ZIP"
    }
  ],
  "projection": {
    "type": "albersUsa"
  }
}
```

### US map with labeled points

<Warning>
  Omni recommends using the native map visualization for standard geographic plotting. However, if you need to add labels directly to your map marks, you will need to use a custom Vega-Lite visualization to do so.
</Warning>

<img src="https://mintcdn.com/omni-e7402367/Liyjj2Ujl0gPFfa5/visualize-present/images/custom-vis-us-point-map-with-labels.png?fit=max&auto=format&n=Liyjj2Ujl0gPFfa5&q=85&s=2d9b163ecac4b53b0a5a52f02b0134b8" alt="" width="2280" height="1270" data-path="visualize-present/images/custom-vis-us-point-map-with-labels.png" />

This visualization layers text marks directly inside colored coordinate points over a TopoJSON base map of the United States. It utilizes the `albersUsa` projection to automatically arrange the states appropriately.

**Query fields**:

* `view_name.latitude` - The latitude coordinate of the point.

* `view_name.longitude` - The longitude coordinate (must be a negative number for the albersUsa projection).

* `view_name.rank` - The text value to display inside the map marker.

* `view_name.category` - The categorical field used to assign colors to the points.

* `view_name.city` - Additional detail for the hover tooltip.

* `view_name.state` - Additional detail for the hover tooltip.

```json expandable title="Visualization code" theme={null}
{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": { "name": "query" },
  "width": "container",
  "height": "container",
  "projection": { "type": "albersUsa" },
  "layer": [
    {
      "data": {
        "url": "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json",
        "format": { "type": "topojson", "feature": "states" }
      },
      "mark": { "type": "geoshape", "fill": "#e5e5e5", "stroke": "white", "strokeWidth": 1 }
    },
    {
      "transform": [
        { "calculate": "toNumber(datum['view_name.latitude'])", "as": "LATITUDE" },
        { "calculate": "toNumber(datum['view_name.longitude'])", "as": "LONGITUDE" },
        { "calculate": "datum['view_name.city']", "as": "CITY" },
        { "calculate": "datum['view_name.state']", "as": "STATE" },
        { "calculate": "datum['view_name.rank']", "as": "RANK" },
        { "calculate": "datum['view_name.category']", "as": "COLOR_CAT" },
        { "filter": "isValid(datum.LATITUDE) && isValid(datum.LONGITUDE)" }
      ],
      "encoding": {
        "longitude": { "field": "LONGITUDE", "type": "quantitative" },
        "latitude": { "field": "LATITUDE", "type": "quantitative" },
        "tooltip": [
          { "field": "RANK", "type": "nominal", "title": "Rank" },
          { "field": "CITY", "type": "nominal", "title": "City" },
          { "field": "STATE", "type": "nominal", "title": "State" }
        ]
      },
      "layer": [
        {
          "mark": { "type": "circle", "size": 300, "stroke": "white", "strokeWidth": 1.5, "opacity": 1 },
          "encoding": {
            "color": { 
              "field": "COLOR_CAT", 
              "type": "nominal",
              "scale": {
                "range": ["#F2B21B", "#6EC1F2"]
              },
              "legend": null 
            }
          }
        },
        {
          "mark": { "type": "text", "baseline": "middle", "align": "center", "fontWeight": "bold", "fontSize": 11 },
          "encoding": {
            "text": { "field": "RANK", "type": "nominal" },
            "color": { "value": "black" }
          }
        }
      ]
    }
  ],
  "config": { "view": { "stroke": null } }
}
```

### US state map - zip code choropleth

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/map-dc-1c18f4b046eeae1a43b2d38e4bfd441b.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=37180006977ab9819017dd4cf13e2fa8" alt="" width="984" height="1032" data-path="images/docs/visualization-and-dashboards/assets/images/map-dc-1c18f4b046eeae1a43b2d38e4bfd441b.png" />

**Query fields:**

* `users.zip`
* `users.user_count`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "data": {
        "url": "https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/dc_district_of_columbia_zip_codes_geo.min.json",
        "format": {
          "property": "features"
        }
      },
      "mark": {
        "fill": "white",
        "type": "geoshape",
        "stroke": "black"
      }
    },
    {
      "mark": "geoshape",
      "width": "container",
      "height": "container",
      "encoding": {
        "color": {
          "type": "quantitative",
          "field": "users\\.count",
          "scale": {
            "domain": [
              0,
              20
            ],
            "scheme": "blues"
          },
          "legend": null
        },
        "shape": {
          "type": "geojson",
          "field": "geo"
        },
        "tooltip": [
          {
            "field": "users\\.zip"
          },
          {
            "type": "quantitative",
            "field": "users\\.count",
            "title": "Users Count"
          }
        ]
      }
    }
  ],
  "transform": [
    {
      "as": "geo",
      "from": {
        "key": "properties.ZCTA5CE10",
        "data": {
          "url": "https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/dc_district_of_columbia_zip_codes_geo.min.json",
          "format": {
            "property": "features"
          }
        }
      },
      "lookup": "users\\.zip"
    }
  ],
  "projection": {
    "type": "albersUsa"
  }
}
```

### Radial chart

A radial chart layers in exploding pie slices using the square root of the value.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/11-custom-vis-radial-9df9a461e13796f1cde3238f265bfae2.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=ace414e6b334010c06b74e166fcebc54" alt="" width="1138" height="1110" data-path="images/docs/visualization-and-dashboards/assets/images/11-custom-vis-radial-9df9a461e13796f1cde3238f265bfae2.png" />

**Query Fields:**

* `products.category`
* `order_items.sale_price_sum`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": {
        "type": "arc",
        "stroke": "#fff",
        "innerRadius": 30
      }
    },
    {
      "mark": {
        "dx": 4,
        "type": "text",
        "align": "center",
        "radiusOffset": 30
      },
      "encoding": {
        "text": {
          "type": "nominal",
          "field": "COLOR"
        }
      }
    }
  ],
  "height": "container",
  "width": "container",
  "encoding": {
    "color": {
      "type": "nominal",
      "field": "SIZE",
      "legend": null
    },
    "theta": {
      "type": "quantitative",
      "field": "SIZE",
      "stack": true
    },
    "radius": {
      "field": "SIZE",
      "scale": {
        "type": "sqrt",
        "zero": true,
        "rangeMin": 20
      }
    },
    "tooltip": [
      {
        "type": "nominal",
        "field": "COLOR",
        "title": "Category"
      },
      {
        "type": "quantitative",
        "field": "SIZE",
        "title": "Sales",
        "format": ",.2f"
      }
    ]
  },
  "transform": [
    {
      "as": "COLOR",
      "calculate": "datum['products.category']"
    },
    {
      "as": "SIZE",
      "calculate": "datum['order_items.sale_price_sum']"
    }
  ]
}
```

### Cross-filtered chart pair

This visualization aggregates the top visualization over the highlight selection. Two charts are built from the results table, stacked, and then wired together. **Note**: This visualization also uses pixel sizing, which isn't ideal for use on dashboards where `container` should be used for sizing.

<img src="https://mintcdn.com/omni-e7402367/znah3DGD26lsnqOP/visualize-present/visualizations/types/images/custom-vis-cross-filter.gif?s=0476f3efc75c1650e51fa0a749402b43" alt="" width="780" height="442" data-path="visualize-present/visualizations/types/images/custom-vis-cross-filter.gif" />

**Query fields:**

* `order_items.created_at[date]` - Filtered to `2021`, the x-axis
* `products.category` - Filtered to five products, forming the color facets
* `order_items.sale_price_sum` - The y-axis
* `order_items.count` - The bubble size

```json expandable title="Visualization code" theme={null}
{
  "vconcat": [
    {
      "mark": "point",
      "width": 600,
      "height": 300,
      "params": [
        {
          "name": "brush",
          "select": {
            "type": "interval",
            "encodings": [
              "x"
            ]
          }
        }
      ],
      "encoding": {
        "x": {
          "type": "temporal",
          "field": "X_AXIS",
          "title": "Date"
        },
        "y": {
          "type": "quantitative",
          "field": "TOP_Y",
          "title": "Total Sales"
        },
        "size": {
          "type": "quantitative",
          "field": "BOTTOM_Y",
          "title": "Count of Sales"
        },
        "color": {
          "value": "lightgray",
          "condition": {
            "type": "nominal",
            "field": "COLOR",
            "param": "brush",
            "title": "Category"
          }
        }
      },
      "transform": [
        {
          "as": "X_AXIS",
          "calculate": "datum['order_items.created_at[date]']"
        },
        {
          "as": "TOP_Y",
          "calculate": "datum['order_items.sale_price_sum']"
        },
        {
          "as": "BOTTOM_Y",
          "calculate": "datum['order_items.order_count']"
        },
        {
          "as": "COLOR",
          "calculate": "datum['products.category']"
        },
        {
          "filter": {
            "param": "click"
          }
        }
      ]
    },
    {
      "mark": "bar",
      "width": 600,
      "params": [
        {
          "name": "click",
          "select": {
            "type": "point",
            "encodings": [
              "color"
            ]
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "TOP_Y",
          "title": "Sales",
          "aggregate": "sum"
        },
        "y": {
          "field": "COLOR",
          "title": "Category"
        },
        "color": {
          "value": "lightgray",
          "condition": {
            "field": "COLOR",
            "param": "click"
          }
        }
      },
      "transform": [
        {
          "as": "X_AXIS",
          "calculate": "datum['order_items.created_at[date]']"
        },
        {
          "as": "TOP_Y",
          "calculate": "datum['order_items.sale_price_sum']"
        },
        {
          "as": "BOTTOM_Y",
          "calculate": "datum['order_items.order_count']"
        },
        {
          "as": "COLOR",
          "calculate": "datum['products.category']"
        },
        {
          "filter": {
            "param": "brush"
          }
        }
      ]
    }
  ]
}
```

### Flag marks scatterplot

<Warning>
  This visualization won't render if used in a [delivery or alert](/share/deliveries/setup).
</Warning>

This chart uses data about each country's economy and a flag emoji to create a scatterplot. The flag emoji is used as the mark to represent the country. This example also uses log-scale.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/13-custom-vis-country-scatterplot-88389ae717ac9061b904585055f10dc2.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=ddbb43df727b50d6ce6802b7972b395b" alt="" width="1258" height="1192" data-path="images/docs/visualization-and-dashboards/assets/images/13-custom-vis-country-scatterplot-88389ae717ac9061b904585055f10dc2.png" />

**Query fields:**

* `flag` - Flag emoji
* `name` - Country name
* `rank`
* `gdp`
* `growth`
* `population`
* `gdp_per_capita`
* `gdp_percent_share`

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/13-country-data-table-401db8efa8d5c9a4060cf8e5daf75799.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=cc329074cda09cec1dfa45ce714dd1a0" alt="" width="1796" height="578" data-path="images/docs/visualization-and-dashboards/assets/images/13-country-data-table-401db8efa8d5c9a4060cf8e5daf75799.png" />

```json expandable title="Visualization code" theme={null}
{
  "mark": {
    "type": "text",
    "fontSize": 30
  },
  "width": "container",
  "height": "container",
  "transform": [
    {
      "as": "COUNTRY",
      "calculate": "datum['users.country']"
    },
    {
      "as": "X_AXIS",
      "calculate": "datum['users.count']"
    },
    {
      "as": "Y_AXIS",
      "calculate": "datum['order_items.sale_price_sum']"
    },
    {
      "as": "ICON",
      "calculate": "datum['calc_1']"
    }
  ],
  "encoding": {
    "x": {
      "type": "quantitative",
      "field": "X_AXIS",
      "scale": {
        "type": "log"
      }
    },
    "y": {
      "axis": {
        "labelOverlap": true
      },
      "type": "quantitative",
      "field": "Y_AXIS",
      "scale": {
        "type": "log"
      }
    },
    "text": {
      "type": "nominal",
      "field": "ICON"
    },
    "tooltip": [
      {
        "sort": null,
        "type": "nominal",
        "field": "ICON"
      },
      {
        "sort": null,
        "type": "nominal",
        "field": "name",
        "title": "COUNTRY"
      },
      {
        "sort": null,
        "type": "quantitative",
        "field": "X_AXIS"
      },
      {
        "type": "quantitative",
        "field": "Y_AXIS"
      }
    ]
  }
}
```

### Waterfall

This waterfall chart requires both a custom visualization spec and some query munging. In this example, a change occurs state-by-state, at which point special bars are appended for the starting and ending values.

**Note**: The Vega spec contains a lot of calculation. This is intended to demonstrate the ability to extend the dataset to enhance the visualization.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/14-custom-vis-waterfall-c4c88c73b7a8e62afe752089dcce5aee.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=0530a3b8caaf4be0eb8480c2000f0d79" alt="" width="1782" height="1194" data-path="images/docs/visualization-and-dashboards/assets/images/14-custom-vis-waterfall-c4c88c73b7a8e62afe752089dcce5aee.png" />

**Query fields**:

* `label`
* `value`

#### Unioned queries

The underlying data is brought together by using a SQL `UNION` clause.

```sql theme={null}
(
  SELECT 'Begin' AS "label",
          1000 AS "amount"
   FROM users
   LIMIT 1
)
UNION ALL
( 
   SELECT "users.state",
          "amount"
   FROM orders
)
UNION ALL
(
  SELECT 'End',
          0
   FROM users
   LIMIT 1
)
```

* **Begin row**: Start value. Must be named `'Begin'` for label; this can be replaced with the first value from the dataset in the future.
* **Waterfall data set:** Build with the UI and drop in the SQL, or use the Advanced Editor to write SQL. When updating to your own query data, remember to [reference data](#referencing-data-in-the-advanced-editor) with the `view_name\\.field_name` syntax.
* **End row:** Value must be `0`. Must be named `'End'`; this can be replaced in the future since it's all implied.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/14-custom-vis-waterfall-data-sql-60a685ab9b0a653880c80a490372cdb6.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=3c8eb5a80d87280ac2927e681115525e" alt="" width="602" height="235" data-path="images/docs/visualization-and-dashboards/assets/images/14-custom-vis-waterfall-data-sql-60a685ab9b0a653880c80a490372cdb6.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": {
        "size": 45,
        "type": "bar"
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "previous_sum",
          "title": "Amount"
        },
        "y2": {
          "field": "sum"
        },
        "color": {
          "value": "#93c4aa",
          "condition": [
            {
              "test": "datum.LABEL === 'Begin' || datum.LABEL === 'End'",
              "value": "#f7e0b6"
            },
            {
              "test": "datum.sum < datum.previous_sum",
              "value": "#f78a64"
            }
          ]
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "#404040",
        "opacity": 1,
        "xOffset": -22.5,
        "x2Offset": 22.5,
        "strokeWidth": 2
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "sum"
        },
        "x2": {
          "field": "lead"
        }
      }
    },
    {
      "mark": {
        "dy": -4,
        "type": "text",
        "baseline": "bottom"
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "sum_inc"
        },
        "text": {
          "type": "nominal",
          "field": "sum_inc",
          "format": "bigusdcurrency_2",
          "formatType": "omniNumberFormat"
        },
        "opacity": {
          "condition": {
            "test": "datum['sum_inc'] == 0",
            "value": "0"
          }
        }
      }
    },
    {
      "mark": {
        "dy": 4,
        "type": "text",
        "baseline": "top"
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "sum_dec"
        },
        "text": {
          "type": "nominal",
          "field": "sum_dec",
          "format": "bigusdcurrency_2",
          "formatType": "omniNumberFormat"
        },
        "opacity": {
          "condition": {
            "test": "datum['sum_dec'] == 0",
            "value": "0"
          }
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "baseline": "middle",
        "fontWeight": "bold"
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "center"
        },
        "text": {
          "type": "nominal",
          "field": "AMOUNT",
          "format": "bigusdcurrency_2",
          "formatType": "omniNumberFormat"
        },
        "color": {
          "value": "white",
          "condition": [
            {
              "test": "datum.LABEL === 'Begin' || datum.LABEL === 'End'",
              "value": "#725a30"
            }
          ]
        },
        "opacity": {
          "condition": {
            "test": "datum['amount_percent'] < 0.07",
            "value": "0"
          }
        }
      }
    }
  ],
  "width": "container",
  "config": {
    "text": {
      "color": "#404040",
      "fontWeight": "bold"
    }
  },
  "height": "container",
  "encoding": {
    "x": {
      "axis": {
        "title": "Months",
        "labelAngle": 0
      },
      "sort": null,
      "type": "ordinal",
      "field": "LABEL"
    }
  },
  "transform": [
    {
      "as": "LABEL",
      "calculate": "datum['label']"
    },
    {
      "as": "AMOUNT",
      "calculate": "datum['amount']"
    },
    {
      "window": [
        {
          "as": "sum",
          "op": "sum",
          "field": "AMOUNT"
        }
      ]
    },
    {
      "window": [
        {
          "as": "lead",
          "op": "lead",
          "field": "LABEL"
        }
      ]
    },
    {
      "joinaggregate": [
        {
          "as": "total",
          "op": "sum",
          "field": "AMOUNT"
        }
      ]
    },
    {
      "as": "lead",
      "calculate": "datum.lead === null ? datum.LABEL : datum.lead"
    },
    {
      "as": "previous_sum",
      "calculate": "datum.LABEL === 'End' ? 0 : datum.sum - datum.AMOUNT"
    },
    {
      "as": "amount",
      "calculate": "datum.LABEL === 'End' ? datum.sum : datum.AMOUNT"
    },
    {
      "as": "text_amount",
      "calculate": "(datum.LABEL !== 'Begin' && datum.LABEL !== 'End' && datum.AMOUNT > 0 ? '+' : '') + datum.AMOUNT"
    },
    {
      "as": "amount_percent",
      "calculate": "abs(datum.AMOUNT) / datum.total"
    },
    {
      "as": "center",
      "calculate": "(datum.sum + datum.previous_sum) / 2"
    },
    {
      "as": "sum_dec",
      "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''"
    },
    {
      "as": "sum_inc",
      "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''"
    }
  ]
}
```

### Tapered funnel

A tapered funnel is used to measure a funnel using several filtered measures. This chart calculates overall dropoff and step-by-step dropoff.

You can add or remove stages by editing the `fold` section and then the subsequent steps, removing the backticks: `users\\.count` then `"measurename": "users.count"`.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/funnel-dropoff-c0ab6a14e29e91e5ad74a9026f80c681.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=53b38c016ddde6657d0d3c954b8f31fe" alt="" width="1552" height="1056" data-path="images/docs/visualization-and-dashboards/assets/images/funnel-dropoff-c0ab6a14e29e91e5ad74a9026f80c681.png" />

**Query fields:**

* `users.count`
* `users.count_california_seniors`
* `users.count_minors`
* `users.count_california_minors`

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "transparent"
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "stagePos"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "negCount"
        },
        "color": {
          "field": "stage",
          "scale": {
            "scheme": {
              "name": "oranges",
              "extent": [
                0.8,
                0
              ]
            }
          },
          "legend": null
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "stage",
            "title": "Stage"
          },
          {
            "type": "quantitative",
            "field": "count",
            "title": "Count"
          }
        ]
      }
    },
    {
      "mark": {
        "dx": {
          "expr": "datum.labelLeft ? -4 : 4"
        },
        "type": "text",
        "align": {
          "expr": "datum.labelLeft ? 'right' : 'left'"
        }
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "negCount"
        },
        "text": {
          "field": "count"
        }
      }
    },
    {
      "mark": {
        "dx": 4,
        "type": "text",
        "align": "left"
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "stagePos"
        },
        "text": {
          "field": "stage"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center"
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "cumulativePos"
        },
        "text": {
          "field": "cumulativePct",
          "format": ".1%"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center"
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "conversionPos"
        },
        "text": {
          "field": "conversionPct",
          "format": ".1%"
        }
      },
      "transform": [
        {
          "filter": "isValid(datum.previousCount)"
        }
      ]
    },
    {
      "mark": {
        "dx": {
          "expr": "datum.dx"
        },
        "type": "text",
        "align": {
          "expr": "datum.align"
        }
      },
      "encoding": {
        "x": {
          "axis": "",
          "type": "quantitative",
          "field": "pos"
        },
        "y": {
          "axis": null,
          "type": "nominal",
          "datum": "0. Titles"
        },
        "text": {
          "field": "caption"
        }
      },
      "transform": [
        {
          "filter": "!isValid(datum.previousCount)"
        },
        {
          "as": "zero",
          "calculate": "0"
        },
        {
          "as": [
            "column",
            "pos"
          ],
          "fold": [
            "stagePos",
            "zero",
            "cumulativePos",
            "conversionPos"
          ]
        },
        {
          "from": {
            "key": "column",
            "data": {
              "values": [
                {
                  "dx": 4,
                  "align": "left",
                  "column": "stagePos",
                  "caption": "Stage"
                },
                {
                  "dx": -4,
                  "align": "right",
                  "column": "zero",
                  "caption": "Count"
                },
                {
                  "dx": 0,
                  "align": "center",
                  "column": "cumulativePos",
                  "caption": "Overall"
                },
                {
                  "dx": 0,
                  "align": "center",
                  "column": "conversionPos",
                  "caption": "Previous"
                }
              ]
            },
            "fields": [
              "caption",
              "align",
              "dx"
            ]
          },
          "lookup": "column"
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "encoding": {
    "y": {
      "axis": "",
      "type": "nominal",
      "field": "stage"
    }
  },
  "transform": [
    {
      "as": [
        "measurename",
        "count"
      ],
      "fold": [
        "users\\.count",
        "users\\.count_california_seniors",
        "users\\.count_minors",
        "users\\.count_california_minors"
      ]
    },
    {
      "from": {
        "key": "measurename",
        "data": {
          "values": [
            {
              "stage": "1. Users",
              "measurename": "users.count"
            },
            {
              "stage": "2. California ",
              "measurename": "users.count_california_seniors"
            },
            {
              "stage": "3. Minors",
              "measurename": "users.count_minors"
            },
            {
              "stage": "4. California Minors",
              "measurename": "users.count_california_minors"
            }
          ]
        },
        "fields": [
          "stage"
        ]
      },
      "lookup": "measurename"
    },
    {
      "joinaggregate": [
        {
          "as": "maxCount",
          "op": "max",
          "field": "count"
        }
      ]
    },
    {
      "sort": [
        {
          "field": "stage",
          "order": "ascending"
        }
      ],
      "window": [
        {
          "as": "previousCount",
          "op": "lag",
          "field": "count"
        }
      ]
    },
    {
      "as": "cumulativePct",
      "calculate": "datum.count / datum.maxCount"
    },
    {
      "as": "conversionPct",
      "calculate": "datum.count / datum.previousCount"
    },
    {
      "as": "countPos",
      "calculate": "datum.maxCount * 0.5"
    },
    {
      "as": "cumulativePos",
      "calculate": "datum.maxCount * 0.08"
    },
    {
      "as": "conversionPos",
      "calculate": "datum.maxCount * 0.16"
    },
    {
      "as": "stagePos",
      "calculate": "datum.maxCount * -1.2"
    },
    {
      "as": "negCount",
      "calculate": "-datum.count"
    },
    {
      "as": "labelLeft",
      "calculate": "datum.count < 0.1 * datum.maxCount"
    }
  ]
}
```

### Centered funnel

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/funnel-centered-0bf3982aeed9f10399524bbffdae0c30.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=22819f902a381447410d833975eb15f1" alt="" width="2024" height="1406" data-path="images/docs/visualization-and-dashboards/assets/images/funnel-centered-0bf3982aeed9f10399524bbffdae0c30.png" />

#### Funnel with currency

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/funnel-table-293bff7940ac9652e4ba8cba2c507185.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=f8350157d11d32223020fb928ae90250" alt="" width="702" height="392" data-path="images/docs/visualization-and-dashboards/assets/images/funnel-table-293bff7940ac9652e4ba8cba2c507185.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "axis": false,
          "type": "quantitative",
          "field": "AMOUNT",
          "stack": "center"
        },
        "color": {
          "type": "nominal",
          "field": "COLOR",
          "legend": null
        }
      }
    },
    {
      "layer": [
        {
          "mark": {
            "dx": 0,
            "type": "text",
            "align": "right"
          },
          "encoding": {
            "text": {
              "type": "quantitative",
              "field": "AMOUNT",
              "format": "USDCURRENCY",
              "formatType": "omniNumberFormat"
            }
          }
        },
        {
          "mark": {
            "dx": 10,
            "type": "text",
            "align": "left"
          },
          "encoding": {
            "text": {
              "type": "quantitative",
              "field": "PERCENT",
              "format": "PERCENT",
              "formatType": "omniNumberFormat",
              "condition": {
                "test": "datum['PERCENT'] > 1",
                "value": "N/A"
              }
            }
          }
        }
      ]
    }
  ],
  "transform": [
    {
      "as": "COLOR",
      "calculate": "datum['events.event_type']"
    },
    {
      "as": "AMOUNT",
      "calculate": "datum['events.count']"
    },
    {
      "window": [
        {
          "field": "AMOUNT",
          "op": "lag",
          "as": "PREVIOUS_AMOUNT"
        }
      ]
    },
    {
      "as": "PERCENT",
      "calculate": "datum.AMOUNT/datum.PREVIOUS_AMOUNT"
    }
  ],
  "width": "container",
  "height": "container",
  "encoding": {
    "y": {
      "axis": {
        "title": false
      },
      "sort": null,
      "type": "nominal",
      "field": "events\\.event_type"
    }
  }
}
```

#### Funnel with a dimension and a measure

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/funnel-table-293bff7940ac9652e4ba8cba2c507185.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=f8350157d11d32223020fb928ae90250" alt="" width="702" height="392" data-path="images/docs/visualization-and-dashboards/assets/images/funnel-table-293bff7940ac9652e4ba8cba2c507185.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "axis": false,
          "type": "quantitative",
          "field": "events\\.count",
          "stack": "center"
        },
        "color": {
          "type": "nominal",
          "field": "events\\.event_type",
          "legend": null
        }
      }
    },
    {
      "layer": [
        {
          "mark": {
            "dx": 0,
            "type": "text",
            "align": "right"
          },
          "encoding": {
            "text": {
              "type": "quantitative",
              "field": "events\\.count",
              "formatType": "omniNumberFormat"
            }
          }
        },
        {
          "mark": {
            "dx": 10,
            "type": "text",
            "align": "left"
          },
          "encoding": {
            "text": {
              "type": "nominal",
              "field": "phase"
            }
          },
          "transform": [
            {
              "as": "phase",
              "calculate": "datum.calc_1 + '%'"
            }
          ]
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "encoding": {
    "y": {
      "axis": {
        "title": false
      },
      "sort": null,
      "type": "nominal",
      "field": "events\\.event_type"
    }
  }
}
```

#### Funnel with three measures

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/funnel-3-measures-735912210c636186e8d4c3e7d863bd37.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=63c4a95ac3e13c1ace0f12dc1649d084" alt="" width="1030" height="334" data-path="images/docs/visualization-and-dashboards/assets/images/funnel-3-measures-735912210c636186e8d4c3e7d863bd37.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "axis": false,
          "type": "quantitative",
          "field": "measure_value",
          "stack": "center"
        },
        "color": {
          "type": "nominal",
          "field": "measure_name",
          "legend": null
        }
      }
    },
    {
      "layer": [
        {
          "mark": {
            "dx": 0,
            "type": "text",
            "align": "right"
          },
          "encoding": {
            "text": {
              "type": "quantitative",
              "field": "measure_value",
              "formatType": "omniNumberFormat"
            }
          }
        },
        {
          "mark": {
            "dx": 10,
            "type": "text",
            "align": "left"
          },
          "encoding": {
            "text": {
              "type": "nominal",
              "field": "phase"
            }
          },
          "transform": [
            {
              "as": "phase",
              "calculate": "datum.calc_1 + '%'"
            }
          ]
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "encoding": {
    "y": {
      "axis": {
        "title": false
      },
      "sort": null,
      "type": "nominal",
      "field": "measure_name"
    }
  }
}
```

### Gantt (timeline) chart

This chart takes advantage of `x`, `x2` in Vega to create a start and end point for bars along a timeline for each user. It also includes config to improve the axis labels. Color could be included in an additional facet, using one more dimension to group different users together.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/gantt-chart-c7edc4588d8e5b8414bc354179b7652b.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=c2a97e94738125ed546e1a3df11761f4" alt="" width="1684" height="1204" data-path="images/docs/visualization-and-dashboards/assets/images/gantt-chart-c7edc4588d8e5b8414bc354179b7652b.png" />

**Query fields:**

* `users.full_name`
* `users.created_at[date]`
* `order_items.created_at[date]`

```json expandable title="Visualization code" theme={null}
{
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "DIM",
      "type": "ordinal",
      "axis": {
        "title": "Name"
      }
    },
    "x": {
      "field": "START",
      "type": "temporal",
      "axis": {
        "title": "Date"
      }
    },
    "x2": {
      "field": "END",
      "type": "temporal"
    }
  },
  "transform": [
    {
      "as": "DIM",
      "calculate": "datum['users.full_name']"
    },
    {
      "as": "START",
      "calculate": "datum['users.created_at[date]']"
    },
    {
      "as": "END",
      "calculate": "datum['order_items.created_at[date]']"
    }
  ]
}
```

### Isotope (stacked icons)

Unlike other charts, this chart requires the full granularity in the dataset to create the stacked icons. The core technique is to map the repeated values into icons and then stack them. **Note**: In this example, `users.id` is included in order to create one entry per row.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/isotope-a6d092cdee633b9d31ab4e55ef63e147.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=aaa01f418611ccbf3cf575746b55df1c" alt="" width="1644" height="1032" data-path="images/docs/visualization-and-dashboards/assets/images/isotope-a6d092cdee633b9d31ab4e55ef63e147.png" />

**Query fields:**

* `users.email_domain`
* `users.id`

```json expandable title="Visualization code" theme={null}
{
  "mark": {
    "type": "text",
    "baseline": "middle"
  },
  "width": "container",
  "config": {
    "view": {
      "stroke": ""
    }
  },
  "height": "container",
  "encoding": {
    "x": {
      "axis": null,
      "type": "ordinal",
      "field": "rank"
    },
    "y": {
      "type": "nominal",
      "field": "DIM",
      "title": null
    },
    "size": {
      "value": 40
    },
    "text": {
      "type": "nominal",
      "field": "emoji"
    }
  },
  "transform": [
    {
      "as": "DIM",
      "calculate": "datum['users\\.traffic_source']"
    },
    {
      "as": "COUNTER",
      "calculate": "datum['users.id']"
    },
    {
      "as": "emoji",
      "calculate": "{'Search': '\ud83d\udc04', 'Display': '\ud83d\udc0f', 'Organic': '\ud83d\udc16', 'Facebook': '\ud83d\udc22', 'Email': '\ud83d\udc22'}[datum.DIM]]"
    },
    {
      "window": [
        {
          "as": "rank",
          "op": "rank"
        }
      ],
      "groupby": [
        "DIM"
      ]
    }
  ]
}
```

### Gauge

A gauge chart resembles a speedometer or dial and is typically used to display a single value within a predefined range. This visualization is useful for evaluating progress against a goal.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/gauge-viz-5464846e7ea012be99d82a8f9624506a.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=2a0ba9c9b518cbb0ec28f14321f60dce" alt="" width="940" height="672" data-path="images/docs/visualization-and-dashboards/assets/images/gauge-viz-5464846e7ea012be99d82a8f9624506a.png" />

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/gauge-table-a142c1941f2971803db0a52383f11c10.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=6d5e8de6e756346ae045aa4d89168ecc" alt="" width="1128" height="236" data-path="images/docs/visualization-and-dashboards/assets/images/gauge-table-a142c1941f2971803db0a52383f11c10.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": {
        "type": "arc",
        "color": "lightgrey",
        "theta": {
          "expr": "datum['_arc_start_radians']"
        },
        "radius": {
          "expr": "ring1_outer"
        },
        "theta2": {
          "expr": "datum['_arc_end_radians']"
        },
        "radius2": {
          "expr": "ring1_inner"
        },
        "cornerRadius": 10
      }
    },
    {
      "mark": {
        "type": "arc",
        "theta": {
          "expr": "datum['_ring_start_radians']"
        },
        "radius": {
          "expr": "ring1_outer"
        },
        "theta2": {
          "expr": "datum['_ring_end_radians']"
        },
        "radius2": {
          "expr": "ring1_inner"
        },
        "cornerRadius": 10
      },
      "name": "RING",
      "encoding": {
        "color": {
          "value": "#307E31",
          "condition": [
            {
              "test": "datum['ratio'] < 0.33",
              "value": "#880808"
            },
            {
              "test": "datum['ratio'] < 0.66",
              "value": "#E49B0F"
            }
          ]
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 40
      },
      "encoding": {
        "text": {
          "field": "users\\.count",
          "format": "number",
          "formatType": "omniNumberFormat"
        },
        "color": {
          "value": "#307E31",
          "condition": [
            {
              "test": "datum['ratio'] < 0.33",
              "value": "#880808"
            },
            {
              "test": "datum['ratio'] < 0.66",
              "value": "#E49B0F"
            }
          ]
        }
      }
    }
  ],
  "width": "container",
  "config": {
    "concat": {
      "spacing": 0
    },
    "autosize": {
      "type": "fit",
      "resize": true,
      "contains": "padding"
    }
  },
  "height": "container",
  "params": [
    {
      "name": "ring_max",
      "value": 160
    },
    {
      "name": "ring_width",
      "value": 20
    },
    {
      "name": "ring_gap",
      "value": 5
    },
    {
      "name": "label_color",
      "value": "#000000"
    },
    {
      "name": "ring_background_opacity",
      "value": 0.3
    },
    {
      "name": "ring0_percent",
      "value": 100
    },
    {
      "expr": "ring_max+2",
      "name": "ring0_outer"
    },
    {
      "expr": "ring_max+1",
      "name": "ring0_inner"
    },
    {
      "expr": "ring0_inner-ring_gap",
      "name": "ring1_outer"
    },
    {
      "expr": "ring1_outer-ring_width",
      "name": "ring1_inner"
    },
    {
      "expr": "(ring1_outer+ring1_inner)/2",
      "name": "ring1_middle"
    },
    {
      "expr": "220",
      "name": "arc_size"
    }
  ],
  "transform": [
    {
      "as": "ratio",
      "calculate": "datum['users\\.count'] / ( datum['calc_1'] )"
    },
    {
      "as": "_arc_start_degrees",
      "calculate": "360 - ( arc_size / 2 )"
    },
    {
      "as": "_arc_end_degrees",
      "calculate": "0 + ( arc_size / 2 )"
    },
    {
      "as": "_arc_start_radians",
      "calculate": "2 * 3.14 * ( datum['_arc_start_degrees'] - 360 ) / 360"
    },
    {
      "as": "_arc_end_radians",
      "calculate": "2 * 3.14 * datum['_arc_end_degrees'] / 360"
    },
    {
      "as": "_arc_total_radians",
      "calculate": "datum['_arc_end_radians'] - datum['_arc_start_radians']"
    },
    {
      "as": "_ring_start_radians",
      "calculate": "datum['_arc_start_radians']"
    },
    {
      "as": "_ring_end_radians",
      "calculate": "datum['_arc_start_radians'] + ( datum['_arc_total_radians'] * datum['ratio'] )"
    }
  ]
}
```

### Sunburst chart

Sunburst charts display hierarchical data in an easy-to-read way. Each ring represents a level in the hierarchy, and the size of each section conveys its proportion in comparison to the whole.

In this example, the inner slices are colored by order.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/sunburst-vis-2350abdff534b6ad3792ac565617e5f4.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=5b1aa86a2c80cc2e294c1a48ee539fe7" alt="" width="1460" height="1174" data-path="images/docs/visualization-and-dashboards/assets/images/sunburst-vis-2350abdff534b6ad3792ac565617e5f4.png" />

**Query fields**:

* `users.gender`
* `users.traffic_source`
* `users.count`

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/sunburst-table-83c7f141cb7d1af4cdbd44edb70b4c39.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=2d6da28ee6f7b63a3a3a5b9fccf037f7" alt="" width="778" height="512" data-path="images/docs/visualization-and-dashboards/assets/images/sunburst-table-83c7f141cb7d1af4cdbd44edb70b4c39.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": {
          "expr": "min(width, height)/9"
        },
        "outerRadius": {
          "expr": "min(width, height)/3"
        }
      },
      "encoding": {
        "color": {
          "sort": "ascending",
          "type": "ordinal",
          "field": "OUT_IN",
          "scale": {
            "range": [
              "#1DF9B9",
              "#1DE5B9",
              "#1DD1B9",
              "#1DBDB9",
              "#1DA9B9",
              "#3DF23B",
              "#3DDA3B",
              "#3DC23B",
              "#3DAA3B",
              "#3D923B"
            ]
          },
          "title": "Inner Grouping"
        },
        "order": {
          "sort": "ascending",
          "field": "OUT_IN"
        },
        "theta": {
          "type": "quantitative",
          "field": "SIZE",
          "stack": true
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "OUTSIDE",
            "title": [
              "Outer Grouping"
            ]
          },
          {
            "type": "nominal",
            "field": "INSIDE",
            "title": [
              "Inner Grouping"
            ]
          },
          {
            "type": "quantitative",
            "field": "SIZE",
            "title": [
              "Count"
            ],
            "format": "NUMBER",
            "formatType": "omniNumberFormat"
          }
        ]
      }
    },
    {
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": {
          "expr": "min(width, height)/3"
        }
      },
      "encoding": {
        "color": {
          "sort": "ascending",
          "type": "ordinal",
          "field": "OUTSIDE",
          "scale": {
            "range": [
              "#1DD1B9",
              "#3DC23B"
            ]
          },
          "title": "Outer Grouping"
        },
        "order": {
          "sort": "ascending",
          "field": "OUTSIDE"
        },
        "theta": {
          "sort": "ascending",
          "type": "quantitative",
          "field": "total_users",
          "stack": true,
          "title": [
            "Users Count"
          ]
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "OUTSIDE",
            "title": [
              "Outer Grouping"
            ]
          },
          {
            "type": "quantitative",
            "field": "total_users",
            "title": [
              "Count"
            ],
            "format": "NUMBER",
            "formatType": "omniNumberFormat"
          }
        ]
      },
      "transform": [
        {
          "groupby": [
            "OUTSIDE"
          ],
          "aggregate": [
            {
              "as": "total_users",
              "op": "sum",
              "field": "SIZE"
            }
          ]
        }
      ]
    }
  ],
  "transform": [
    {
      "as": "OUTSIDE",
      "calculate": "datum['users.gender']"
    },
    {
      "as": "INSIDE",
      "calculate": "datum['users.traffic_source']"
    },
    {
      "as": "OUT_IN",
      "calculate": "datum.OUTSIDE + '-' + datum.INSIDE"
    },
    {
      "as": "SIZE",
      "calculate": "datum['users.count']"
    }
  ],
  "resolve": {
    "scale": {
      "color": "independent"
    },
    "legend": {
      "color": "independent"
    }
  }
}
```

### Trellis / Small Multiples / Faceted Charts

Trellis charts allow you to show a grid of smaller charts, one for each category.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/trellis-chart-5047848b5d4aac47dd7728248bce91b2.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=c4b6660282da39ca9fe5aa926124e056" alt="" width="2162" height="1796" data-path="images/docs/visualization-and-dashboards/assets/images/trellis-chart-5047848b5d4aac47dd7728248bce91b2.png" />

To use this example, update the following values in the custom visualization code:

* `DIM` to be the x-axis value in your query
* `AMOUNT` as the y-axis value in your query
* `FACET` to be the grouping field
* `COLOR` for the mark color

You can also adjust the mark type, the width and height of each small chart, and the number of columns to draw.

**Example result set:**

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/trellis-chart-results-7747392e3e29aac39d5f3cf7a6eb2140.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=ed8e7707e156431990ed8ef492c30c7e" alt="" width="982" height="1284" data-path="images/docs/visualization-and-dashboards/assets/images/trellis-chart-results-7747392e3e29aac39d5f3cf7a6eb2140.png" />

```json expandable title="Visualization code" theme={null}
{
  "mark": {
    "type": "line",
    "tooltip": true
  },
  "width": 200,
  "height": 50,
  "resolve": {
    "scale": {
      "x": "shared",
      "y": "independent"
    }
  },
  "encoding": {
    "x": {
      "axis": {
        "title": null,
        "format": "%b %-d, %Y",
        "formatType": "omniTimestampFormat",
        "labelOverlap": true
      },
      "sort": "ascending",
      "type": "ordinal",
      "field": "DIM",
      "title": "Date",
      "timeUnit": "utcyearmonthdate"
    },
    "y": {
      "axis": {
        "format": "bigusdcurrency_0",
        "orient": "left",
        "formatType": "omniNumberFormat",
        "labelOverlap": true
      },
      "type": "quantitative",
      "field": "AMOUNT",
      "title": "Total Sales",
      "format": "bigusdcurrency_2",
      "formatType": "omniNumberFormat"
    },
    "color": {
      "field": "COLOR",
      "title": "Category",
      "legend": null
    },
    "facet": {
      "sort": "ascending",
      "type": "ordinal",
      "field": "FACET",
      "title": null,
      "columns": 4
    }
  },
  "transform": [
    {
      "as": "DIM",
      "calculate": "datum['omni_dbt_ecomm__order_items.created_at[week]']"
    },
    {
      "as": "AMOUNT",
      "calculate": "datum['omni_dbt_ecomm__order_items.total_sale_price']"
    },
    {
      "as": "FACET",
      "calculate": "datum['omni_dbt_ecomm__products.category']"
    },
    {
      "as": "COLOR",
      "calculate": "datum['omni_dbt_ecomm__products.category']"
    }
  ]
}
```

### Word cloud

Word clouds are an eye-catching way to visualize text data by showing the most common words in a dataset. The more frequently a word appears, the bigger and bolder it is, which makes it easy to spot key themes at a glance.

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/word-cloud-viz-677b22da8a7b8e051f0b63994fdeef45.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=d776bfb5f56664dbc3ebce01c673169f" alt="" width="1876" height="1516" data-path="images/docs/visualization-and-dashboards/assets/images/word-cloud-viz-677b22da8a7b8e051f0b63994fdeef45.png" />

To use this example, change the following values in the custom visualization code:

* `field` values should match the values in the table
* Adjust the `range` to fit your query
* Adjust the `domain` to fit your query

```sql title="Example query" theme={null}
SELECT category,
       COUNT(*) AS frequency,
       RANDOM() * (0.9 - 0.1) + 0.1 AS height,
       RANDOM() AS width
FROM productsGROUP BY 1ORDER BY 2 DESC
LIMIT 25;
```

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/LaCqotsRT2DGg3iL/images/docs/visualization-and-dashboards/assets/images/word-cloud-table-a5cf468d7f729f46716a785c1a159f08.png?fit=max&auto=format&n=LaCqotsRT2DGg3iL&q=85&s=0cd6cfc0aadbefeaa091aa4e2cfdbc4e" alt="" width="500" height="466" data-path="images/docs/visualization-and-dashboards/assets/images/word-cloud-table-a5cf468d7f729f46716a785c1a159f08.png" />

```json expandable title="Visualization code" theme={null}
{
  "mark": "text",
  "width": "container",
  "height": "container",
  "transform": [
    {
      "as": "DIM",
      "calculate": "datum['category']"
    },
    {
      "as": "SIZE",
      "calculate": "datum['frequency']"
    },
    {
      "as": "COLOR",
      "calculate": "datum['department']"
    },
    {
      "as": "X",
      "calculate": "random() * (0.9 - 0.1) + 0.1"
    },
    {
      "as": "Y",
      "calculate": "random()"
    }
  ],
  "encoding": {
    "x": {
      "axis": null,
      "field": "X"
    },
    "y": {
      "axis": null,
      "field": "Y"
    },
    "size": {
      "field": "SIZE",
      "legend": null
    },
    "text": {
      "field": "DIM"
    },
    "color": {
      "field": "COLOR",
      "scale": {
        "scheme": "tableau20"
      },
      "legend": null
    }
  }
}
```

### Scatter Plot with Color Quadrants

Being able to show a scatter plot of values in and showing where they land within specific designated quadrants and above certain thresholds with the easy deliantion of different colors, makes it easily to see where each value lands at a glance.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/color-quadrant-99cf2cf5ad11f66e0a061d5df1e2dee7.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=beda1307200568c0e1adfbb93106bfd5" alt="" width="1852" height="1138" data-path="images/docs/visualization-and-dashboards/assets/images/color-quadrant-99cf2cf5ad11f66e0a061d5df1e2dee7.png" />

To use this example, change the following values in the custom visualization code:

* `calc_1` `calc_2` `calc_3` `calc_4` set the values for your four quadrants, these can also be hard-coded or referenced from calculated fields as noted in the example
* Adjust the `users.age` to fit your query
* Adjust the `users.count` to fit your query

```sql title="Example query" theme={null}
SELECT users.age,
       users.count,
       calc_1,
       calc_2,
       calc_3,
       calc_4
FROM users
```

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/color-quadrant-table-03f949d8cc22ae84ec0469ab5160c6d8.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=5da87b2ff096207ba88437e7fce163fe" alt="" width="1152" height="602" data-path="images/docs/visualization-and-dashboards/assets/images/color-quadrant-table-03f949d8cc22ae84ec0469ab5160c6d8.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "layer": [
        {
          "mark": {
            "line": false,
            "type": "area",
            "tooltip": false
          },
          "encoding": {
            "y": {
              "type": "quantitative",
              "field": "calc_2"
            },
            "color": {
              "value": "red"
            }
          }
        },
        {
          "mark": {
            "line": false,
            "type": "area",
            "tooltip": false
          },
          "encoding": {
            "y": {
              "type": "quantitative",
              "field": "calc_3"
            },
            "color": {
              "value": "lightblue"
            }
          }
        },
        {
          "mark": {
            "line": false,
            "type": "area",
            "tooltip": false
          },
          "encoding": {
            "y": {
              "type": "quantitative",
              "field": "calc_1"
            },
            "y2": {
              "type": "quantitative",
              "field": "calc_2"
            },
            "color": {
              "value": "green"
            }
          }
        },
        {
          "mark": {
            "line": false,
            "type": "area",
            "tooltip": false
          },
          "encoding": {
            "y": {
              "type": "quantitative",
              "field": "calc_4"
            },
            "y2": {
              "type": "quantitative",
              "field": "calc_3"
            },
            "color": {
              "value": "purple"
            }
          }
        },
        {
          "mark": {
            "type": "point",
            "tooltip": true
          },
          "encoding": {
            "y": {
              "axis": {
                "title": "Users Count + (1)",
                "format": "NUMBER_0",
                "orient": "left",
                "formatType": "omniNumberFormat",
                "labelOverlap": true
              },
              "type": "quantitative",
              "field": "users\\.count",
              "title": "Users Count"
            },
            "color": {
              "datum": "Users Count"
            },
            "tooltip": [
              {
                "type": "quantitative",
                "field": "users\\.age",
                "title": "Age"
              },
              {
                "type": "quantitative",
                "field": "users\\.count",
                "title": "Users Count",
                "format": "NUMBER_0",
                "formatType": "omniNumberFormat"
              },
              {
                "type": "quantitative",
                "field": "users\\.age_max",
                "title": "Age Max"
              }
            ]
          }
        }
      ]
    },
    {
      "mark": {
        "type": "rule",
        "tooltip": true,
        "strokeDash": [
          4,
          2
        ]
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "on": "mouseover",
            "type": "point",
            "clear": "mouseout",
            "nearest": true
          }
        }
      ],
      "encoding": {
        "opacity": {
          "value": 0,
          "condition": {
            "test": {
              "empty": false,
              "param": "hover"
            },
            "value": 1
          }
        },
        "tooltip": [
          {
            "type": "quantitative",
            "field": "users\\.age",
            "title": "Age"
          },
          {
            "type": "quantitative",
            "field": "users\\.count",
            "title": "Users Count",
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          }
        ]
      }
    }
  ],
  "width": "container",
  "height": "container",
  "encoding": {
    "x": {
      "axis": {
        "title": "Age",
        "labelOverlap": true
      },
      "sort": "ascending",
      "type": "ordinal",
      "field": "users\\.age",
      "title": "Age"
    },
    "color": {
      "scale": {
        "domain": [
          "Users Count",
          "Age Max"
        ],
        "scheme": "omni"
      },
      "legend": null
    }
  }
}
```

### Bullet charts

Bullet charts are used to track a metric against a target. A bar is used to measure the actual value of the metric, a vertical line or marker for the target, and background bands for adding qualitative ranges.

#### Single bullet chart

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart1-95329aa0d57e18e6c9f65f6a1e781f7a.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=8f3f2be2859550d16de9f3d6a405d1ba" alt="" width="1498" height="226" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart1-95329aa0d57e18e6c9f65f6a1e781f7a.png" />

**Example dataset**

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart1-results-c682697f281574d7fdc23bc61b881cf1.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=3c1f20e4b29f1d4ccb2e6daabb55d3c7" alt="" width="1274" height="194" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart1-results-c682697f281574d7fdc23bc61b881cf1.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "params": [
        {
          "bind": "legend",
          "name": "omni_click",
          "select": {
            "type": "point",
            "fields": [
              "omni__measure_name"
            ]
          }
        }
      ],
      "encoding": {
        "color": {
          "field": "omni__measure_name"
        },
        "opacity": {
          "value": 0
        }
      }
    },
    {
      "layer": [
        {
          "layer": [
            {
              "mark": {
                "type": "bar",
                "tooltip": true
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Pace"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "bar",
                "height": 7,
                "tooltip": true
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Current"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "tick",
                "tooltip": true,
                "thickness": 3
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Target"
                    ]
                  }
                }
              ]
            }
          ],
          "encoding": {
            "x": {
              "axis": {
                "title": "Target",
                "format": "NUMBER_0",
                "orient": "bottom",
                "formatType": "omniNumberFormat",
                "labelOverlap": true
              },
              "type": "quantitative",
              "field": "omni__measure_value",
              "stack": null,
              "title": "Target + (2)"
            },
            "color": {
              "scale": {
                "range": [
                  "#000000ff",
                  "#bcbcbcff",
                  "#A66BBF"
                ],
                "domain": [
                  "Target",
                  "Pace",
                  "Current"
                ]
              }
            },
            "order": {
              "sort": "descending",
              "type": "quantitative",
              "field": "omni__key_order"
            }
          },
          "transform": [
            {
              "filter": {
                "field": "omni__measure_name",
                "oneOf": [
                  "Target",
                  "Pace",
                  "Current"
                ]
              }
            }
          ]
        }
      ],
      "encoding": {
        "y": {
          "axis": {
            "title": null,
            "labelOverlap": true
          },
          "type": "ordinal",
          "field": "CATEGORICAL",
          "title": [
            "Category"
          ]
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "CATEGORICAL",
            "title": [
              "Category"
            ]
          },
          {
            "type": "quantitative",
            "field": "CURRENT",
            "title": [
              "Current"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "PACE",
            "title": [
              "Pace"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "TARGET",
            "title": [
              "Target"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          }
        ]
      },
      "transform": [
        {
          "as": [
            "omni__measure_name",
            "omni__measure_value"
          ],
          "fold": [
            "TARGET",
            "PACE",
            "CURRENT"
          ]
        },
        {
          "as": "omni__measure_name",
          "calculate": "{\"TARGET\":\"Target\",\"PACE\":\"Pace\",\"CURRENT\":\"Current\"}[datum.omni__measure_name]"
        },
        {
          "as": "omni__key_order",
          "calculate": "indexof([\"Target\",\"Pace\",\"Current\"], datum.omni__measure_name)"
        },
        {
          "filter": {
            "param": "omni_click"
          }
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "transform": [
    {
      "as": "TARGET",
      "calculate": "datum['products.count']"
    },
    {
      "as": "PACE",
      "calculate": "datum['calc_2']"
    },
    {
      "as": "CURRENT",
      "calculate": "datum['calc_1']"
    },
    {
      "as": "CATEGORICAL",
      "calculate": "datum['calc_3']"
    }
  ]
}
```

#### Multiple categories

Same as the single bullet, just repeated across the categories.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart2-c81a24a487451431486379231bab3def.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=ba48c21490d0818aed5f4b8ba5de2d09" alt="" width="1198" height="836" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart2-c81a24a487451431486379231bab3def.png" />

**Example dataset**

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart2-results-e5bad2f00d4a0a119c1ed85b7f121000.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=fd1c248a1f65eed454c119393fa19bad" alt="" width="1274" height="1100" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart2-results-e5bad2f00d4a0a119c1ed85b7f121000.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "params": [
        {
          "bind": "legend",
          "name": "omni_click",
          "select": {
            "type": "point",
            "fields": [
              "omni__measure_name"
            ]
          }
        }
      ],
      "encoding": {
        "color": {
          "field": "omni__measure_name"
        },
        "opacity": {
          "value": 0
        }
      }
    },
    {
      "layer": [
        {
          "layer": [
            {
              "mark": {
                "type": "bar",
                "tooltip": true
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Pace"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "bar",
                "height": 7,
                "tooltip": true
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Current"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "tick",
                "tooltip": true,
                "thickness": 3
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Target"
                    ]
                  }
                }
              ]
            }
          ],
          "encoding": {
            "x": {
              "axis": {
                "title": "Target",
                "format": "NUMBER_0",
                "orient": "bottom",
                "formatType": "omniNumberFormat",
                "labelOverlap": true
              },
              "type": "quantitative",
              "field": "omni__measure_value",
              "stack": null,
              "title": "Target + (2)"
            },
            "color": {
              "scale": {
                "range": [
                  "#000000ff",
                  "#bcbcbcff",
                  "#A66BBF"
                ],
                "domain": [
                  "Target",
                  "Pace",
                  "Current"
                ]
              }
            },
            "order": {
              "sort": "descending",
              "type": "quantitative",
              "field": "omni__key_order"
            }
          },
          "transform": [
            {
              "filter": {
                "field": "omni__measure_name",
                "oneOf": [
                  "Target",
                  "Pace",
                  "Current"
                ]
              }
            }
          ]
        }
      ],
      "encoding": {
        "y": {
          "axis": {
            "title": null,
            "labelOverlap": true
          },
          "type": "ordinal",
          "field": "CATEGORICAL",
          "title": [
            "Category"
          ]
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "CATEGORICAL",
            "title": [
              "Category"
            ]
          },
          {
            "type": "quantitative",
            "field": "CURRENT",
            "title": [
              "Current"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "PACE",
            "title": [
              "Pace"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "TARGET",
            "title": [
              "Target"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          }
        ]
      },
      "transform": [
        {
          "as": [
            "omni__measure_name",
            "omni__measure_value"
          ],
          "fold": [
            "TARGET",
            "PACE",
            "CURRENT"
          ]
        },
        {
          "as": "omni__measure_name",
          "calculate": "{\"TARGET\":\"Target\",\"PACE\":\"Pace\",\"CURRENT\":\"Current\"}[datum.omni__measure_name]"
        },
        {
          "as": "omni__key_order",
          "calculate": "indexof([\"Target\",\"Pace\",\"Current\"], datum.omni__measure_name)"
        },
        {
          "filter": {
            "param": "omni_click"
          }
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "transform": [
    {
      "as": "TARGET",
      "calculate": "datum['products.count']"
    },
    {
      "as": "PACE",
      "calculate": "datum['calc_2']"
    },
    {
      "as": "CURRENT",
      "calculate": "datum['calc_1']"
    },
    {
      "as": "CATEGORICAL",
      "calculate": "datum['products.category']"
    }
  ]
}
```

#### Multiple categories with conditional coloring

Using the same result set as the multiple categories, the bars are colored by whether they are above or below the pacing.

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart4-dc9cae5dec1aa5efed6536de90125209.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=091079a8b3bb69f43dc6ca41a6b33a15" alt="" width="1198" height="836" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart4-dc9cae5dec1aa5efed6536de90125209.png" />

**Example dataset**

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart2-results-e5bad2f00d4a0a119c1ed85b7f121000.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=fd1c248a1f65eed454c119393fa19bad" alt="" width="1274" height="1100" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart2-results-e5bad2f00d4a0a119c1ed85b7f121000.png" />

```json expandable title="Visualization code" theme={null}
{
  "layer": [
    {
      "mark": "bar",
      "params": [
        {
          "bind": "legend",
          "name": "omni_click",
          "select": {
            "type": "point",
            "fields": [
              "omni__measure_name"
            ]
          }
        }
      ],
      "encoding": {
        "color": {
          "field": "omni__measure_name"
        },
        "opacity": {
          "value": 0
        }
      }
    },
    {
      "layer": [
        {
          "layer": [
            {
              "mark": {
                "type": "bar",
                "tooltip": true
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Pace"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "bar",
                "height": 7
              },
              "encoding": {
                "color": {
                  "value": "darkred",
                  "condition": {
                    "test": "datum.ON_PACE == true",
                    "value": "darkgreen"
                  }
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Current"
                    ]
                  }
                }
              ]
            },
            {
              "mark": {
                "type": "tick",
                "tooltip": true,
                "thickness": 3
              },
              "encoding": {
                "color": {
                  "field": "omni__measure_name",
                  "legend": null
                }
              },
              "transform": [
                {
                  "filter": {
                    "field": "omni__measure_name",
                    "oneOf": [
                      "Target"
                    ]
                  }
                }
              ]
            }
          ],
          "encoding": {
            "x": {
              "axis": {
                "title": "Target",
                "format": "NUMBER_0",
                "orient": "bottom",
                "formatType": "omniNumberFormat",
                "labelOverlap": true
              },
              "type": "quantitative",
              "field": "omni__measure_value",
              "stack": null,
              "title": "Target + (2)"
            },
            "color": {
              "scale": {
                "range": [
                  "#000000ff",
                  "#bcbcbcff",
                  "#A66BBF",
                  "#b50000ff"
                ],
                "domain": [
                  "Target",
                  "Pace",
                  "Current",
                  "On Pace"
                ]
              }
            },
            "order": {
              "sort": "descending",
              "type": "quantitative",
              "field": "omni__key_order"
            }
          },
          "transform": [
            {
              "filter": {
                "field": "omni__measure_name",
                "oneOf": [
                  "Target",
                  "Pace",
                  "Current"
                ]
              }
            }
          ]
        }
      ],
      "encoding": {
        "y": {
          "axis": {
            "title": null,
            "labelOverlap": true
          },
          "type": "ordinal",
          "field": "CATEGORICAL",
          "title": [
            "Category"
          ]
        },
        "tooltip": [
          {
            "type": "nominal",
            "field": "CATEGORICAL",
            "title": [
              "Category"
            ]
          },
          {
            "type": "quantitative",
            "field": "CURRENT",
            "title": [
              "Current"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "PACE",
            "title": [
              "Pace"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "type": "quantitative",
            "field": "TARGET",
            "title": [
              "Target"
            ],
            "format": "NUMBER_0",
            "formatType": "omniNumberFormat"
          },
          {
            "field": "ON_PACE"
          }
        ]
      },
      "transform": [
        {
          "as": [
            "omni__measure_name",
            "omni__measure_value"
          ],
          "fold": [
            "TARGET",
            "PACE",
            "CURRENT",
            "ON_PACE"
          ]
        },
        {
          "as": "omni__measure_name",
          "calculate": "{\"TARGET\":\"Target\",\"PACE\":\"Pace\",\"CURRENT\":\"Current\",\"ON_PACE\":\"On Pace\"}[datum.omni__measure_name]"
        },
        {
          "as": "omni__key_order",
          "calculate": "indexof([\"Target\",\"Pace\",\"Current\",\"On Pace\"], datum.omni__measure_name)"
        },
        {
          "filter": {
            "param": "omni_click"
          }
        }
      ]
    }
  ],
  "width": "container",
  "height": "container",
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "transform": [
    {
      "as": "TARGET",
      "calculate": "datum['products.count']"
    },
    {
      "as": "PACE",
      "calculate": "datum['calc_2']"
    },
    {
      "as": "CURRENT",
      "calculate": "datum['calc_1']"
    },
    {
      "as": "CATEGORICAL",
      "calculate": "datum['products.category']"
    },
    {
      "as": "ON_PACE",
      "calculate": "datum.CURRENT > datum.PACE"
    }
  ]
}
```

#### Bullet chart inside a table

Additional detail per column, row banding, conditional coloring and sizing. Fancy!

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart3-743784bef1936ec0928f06d4c7e7e7c1.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=65647c89917ffcfbd0ef30f18c5c03bb" alt="" width="1360" height="958" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart3-743784bef1936ec0928f06d4c7e7e7c1.png" />

**Example dataset**:

<img src="https://mintcdn.com/omni-e7402367/9VBePft-kayuCnfZ/images/docs/visualization-and-dashboards/assets/images/bullet-chart3-results-88b906d48f9c4711ac77e3f5d9d189a2.png?fit=max&auto=format&n=9VBePft-kayuCnfZ&q=85&s=eda93b4f35e8a933f1173d03e1379253" alt="" width="2126" height="686" data-path="images/docs/visualization-and-dashboards/assets/images/bullet-chart3-results-88b906d48f9c4711ac77e3f5d9d189a2.png" />

```json expandable title="Visualization code" theme={null}
{
  "data": {
    "name": "bullet_chart_data"
  },
  "width": 640,
  "config": {
    "bar": {
      "binSpacing": 10
    },
    "axis": {
      "grid": false
    },
    "view": {
      "stroke": null
    }
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "vconcat": [
    {
      "height": 40,
      "hconcat": [
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "width": 120,
          "encoding": {
            "x": {
              "value": 60
            },
            "y": {
              "value": 20
            },
            "text": {
              "value": "Campaign"
            },
            "color": {
              "value": "#1a7e83"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "width": 60,
          "encoding": {
            "x": {
              "value": 30
            },
            "y": {
              "value": 20
            },
            "text": {
              "value": "Length"
            },
            "color": {
              "value": "#1a7e83"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "width": 80,
          "encoding": {
            "x": {
              "value": 40
            },
            "y": {
              "value": 20
            },
            "text": {
              "value": "Flight"
            },
            "color": {
              "value": "#1a7e83"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "width": 360,
          "encoding": {
            "x": {
              "value": 180
            },
            "y": {
              "value": 20
            },
            "text": {
              "value": ""
            },
            "color": {
              "value": "#1a7e83"
            }
          }
        }
      ],
      "spacing": 0
    },
    {
      "layer": [
        {
          "mark": "rect",
          "encoding": {
            "x": {
              "value": 0
            },
            "y": {
              "axis": null,
              "sort": "ascending",
              "type": "ordinal",
              "field": "row_id"
            },
            "x2": {
              "value": 660
            },
            "color": {
              "type": "nominal",
              "field": "is_even_row",
              "scale": {
                "range": [
                  "#f5f5f5",
                  "white"
                ]
              },
              "legend": null
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "encoding": {
            "x": {
              "value": 60
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "text": {
              "field": "campaign_display"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "encoding": {
            "x": {
              "value": 150
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "text": {
              "field": "bullet_chart_data\\.creative_length"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "middle"
          },
          "encoding": {
            "x": {
              "value": 220
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "text": {
              "field": "bullet_chart_data\\.flight"
            }
          }
        },
        {
          "mark": {
            "size": 35,
            "type": "bar",
            "tooltip": true
          },
          "encoding": {
            "x": {
              "axis": null,
              "type": "quantitative",
              "field": "bullet_chart_data\\.goal",
              "scale": {
                "range": [
                  270,
                  620
                ]
              }
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "color": {
              "value": "#a0cfd2"
            }
          }
        },
        {
          "mark": {
            "size": 10,
            "type": "bar"
          },
          "encoding": {
            "x": {
              "type": "quantitative",
              "field": "bullet_chart_data\\.delivery__pacing_behind_",
              "scale": {
                "range": [
                  250,
                  620
                ]
              }
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "color": {
              "value": "#f97068"
            }
          }
        },
        {
          "mark": {
            "size": 20,
            "type": "bar"
          },
          "encoding": {
            "x": {
              "type": "quantitative",
              "field": "bullet_chart_data\\.delivery__pacing_ahead_",
              "scale": {
                "range": [
                  250,
                  620
                ]
              }
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            },
            "color": {
              "value": "#096184"
            }
          }
        },
        {
          "mark": {
            "type": "tick",
            "color": "#ffbb61",
            "orient": "vertical",
            "thickness": 4
          },
          "encoding": {
            "x": {
              "type": "quantitative",
              "field": "flight_marker",
              "scale": {
                "range": [
                  250,
                  620
                ]
              }
            },
            "y": {
              "axis": null,
              "type": "ordinal",
              "field": "row_id"
            }
          }
        },
        {
          "mark": {
            "dx": 5,
            "type": "text",
            "align": "left",
            "baseline": "middle"
          },
          "encoding": {
            "x": {
              "type": "quantitative",
              "field": "bullet_chart_data\\.goal",
              "scale": {
                "range": [
                  250,
                  620
                ]
              }
            },
            "y": {
              "axis": null,
              "sort": "ascending",
              "type": "ordinal",
              "field": "row_id"
            },
            "text": {
              "field": "pacing_percentage",
              "format": ".0%"
            }
          }
        }
      ],
      "height": 420
    }
  ],
  "transform": [
    {
      "sort": [
        {
          "field": "bullet_chart_data\\.campaign",
          "order": "ascending"
        },
        {
          "field": "bullet_chart_data\\.creative_length",
          "order": "ascending"
        }
      ],
      "window": [
        {
          "as": "row_id",
          "op": "row_number"
        },
        {
          "as": "prev_campaign",
          "op": "lag",
          "field": "bullet_chart_data\\.campaign"
        }
      ]
    },
    {
      "as": "campaign_display",
      "calculate": "datum['bullet_chart_data.campaign'] === datum.prev_campaign ? '' : datum['bullet_chart_data.campaign']"
    },
    {
      "sort": [
        {
          "field": "bullet_chart_data\\.campaign",
          "order": "ascending"
        }
      ],
      "window": [
        {
          "as": "campaign_band_group",
          "op": "dense_rank",
          "field": "bullet_chart_data\\.campaign"
        }
      ]
    },
    {
      "as": "is_even_row",
      "calculate": "datum.campaign_band_group % 2 === 0"
    },
    {
      "as": "flight_marker",
      "calculate": "datum['bullet_chart_data.goal'] * datum['bullet_chart_data.flight_completion__']"
    },
    {
      "as": "pacing_percentage",
      "calculate": "(datum['bullet_chart_data.delivery__pacing_behind_'] + datum['bullet_chart_data.delivery__pacing_ahead_']) / datum['bullet_chart_data.goal']"
    }
  ],
  "description": "Campaign table with suppressed duplicate campaign names and banded rows grouped by campaign."
}
```