# Visualization with deck.gl

As explained in the [Architecture](https://docs.carto.com/carto-for-developers/key-concepts/architecture) section, CARTO uses **deck.gl** as the client-side visualization library. Therefore, using deck.gl will be a requirement if your application needs to visualize geospatial data coming from your connections in CARTO.

{% hint style="info" %}
**About deck.gl**

[deck.gl](https://deck.gl/) is an open source visualization library designed for large-scale geospatial datasets. It's powered by WebGL2 and WebGPU, achieving incredible visual results with high performance. It's part of the vis.gl framework, integrated into the OpenJS Foundation.

CARTO is a lead contributor as well as a member of the technical steering committee of deck.gl.
{% endhint %}

<div data-full-width="false"><figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-425da1500944a34db1e22475a995e19d7b4d1a91%2FUsing%20the%20CARTO%20Colors.png?alt=media" alt=""><figcaption></figcaption></figure></div>

## Using CARTO + deck.gl

At a high level, these are the building blocks you will use when building visualizations with CARTO + deck.gl

* **The CARTO module (@deck.gl/carto):** This is a submodule created and maintained by CARTO that allows you to easily use data from your CARTO-connected data warehouses in deck.gl. [Learn more about the CARTO module](#the-carto-module).
* **Core deck.gl functionalities:** Layers built using @deck.gl/carto are integrated into a regular deck.gl canvas and inherit properties from other base layers. If you're not familiar with deck.gl we recommend you to check the [official deck.gl documentation](https://deck.gl/docs).
* **Other deck.gl functionalities:** deck.gl is an amazing framework with endless possibilities such as transitions, extensions and integrations that allow you to build incredible full-blown interactive applications such as [our examples](https://docs.carto.com/carto-for-developers/examples), [this story map](https://3dtiles.carto.com/) or [this application](https://carto-geospatial-app-blogpost.web.app/).

{% hint style="info" %}
Remember that to use the deck.gl layers from @deck.gl/carto, you will need to link them to [data sources](https://docs.carto.com/carto-for-developers/key-concepts/data-sources). Data sources are required to fetch data from your data warehouse (including live SQL queries), solving authentication to your CARTO organization and your data warehouse
{% endhint %}

## The CARTO module (@deck.gl/carto)

Inside the CARTO module ([@deck.gl/carto](https://deck.gl/docs/api-reference/carto/overview)) you will find the following components:

* **Tile Layers** to build your visualization, using tiles to automatically solve performance and scalability for different types of data, such as:
  * Vector data
  * H3 data
  * Quadbin data
  * Raster data
* **Style helpers:** Built-in methods to quickly build data-driven visualizations, using a set of curated high-contrast color palettes known as CARTO colors.
* **Basemaps:** CARTO provides a set of free basemaps using OpenStreetMap data, but you can also use Google Maps, Amazon Location or other custom basemaps. [Learn more about adding basemaps](https://docs.carto.com/carto-for-developers/key-concepts/carto-for-deck.gl/basemaps).
* **Fetch map**: A method to quickly re-use layers from your Builder maps in your deck.gl application.

You can find the [reference for the CARTO module (@deck.gl/carto)](https://deck.gl/docs/api-reference/carto/overview) in the deck.gl documentation.

## Getting started

To get started, we recommend checking the CARTO + deck.gl examples and the official CARTO \`+ deck.gl reference.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Examples</strong></td><td>A collection of examples curated by the CARTO team to understand the possibilities of CARTO + deck.gl, ready to reproduce and edit in your browser.</td><td><a href="../examples">examples</a></td><td><a href="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-fcd2adc28ea71d17194dbdd37abf5aee9fa45aff%2FQuadbin.png?alt=media">Quadbin.png</a></td></tr><tr><td><strong>Reference</strong></td><td>The official @deck.gl/carto module reference in the deck.gl documentation</td><td><a href="https://deck.gl/docs/api-reference/carto/overview">https://deck.gl/docs/api-reference/carto/overview</a></td><td><a href="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-9dd222631b69ce22ea2db871ebbc88e55501c55c%2FScreenshot%202023-12-01%20at%2011.55.10.png?alt=media">Screenshot 2023-12-01 at 11.55.10.png</a></td></tr></tbody></table>

## What's new

To stay up-to-date with the latest releases of deck.gl and the CARTO module you should check:

* The official [what's new page for major deck.gl releases](https://deck.gl/docs/whats-new)
* The [CARTO module release notes](https://docs.carto.com/carto-for-developers/release-notes)

## Community

Our community in Slack is a great place to ask questions, share your work with other CARTO users, and get help from CARTO experts. **Join here** :arrow\_down:

{% embed url="<https://join.slack.com/t/cartousercommunity/shared_invite/zt-t7t7k5s4-3c4pZJLrLlkVow3AEDt~ZQ>" fullWidth="false" %}