Skip to main content

Introduction

These docs are forLooking for an old version?

deck.gl is designed to simplify high-performance, WebGL2/WebGPU based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs.

deck.gl maps data (usually an array of JSON objects) into a stack of visual layers - e.g. icons, polygons, texts; and look at them with views: e.g. map, first-person, orthographic.

deck.gl handles a number of challenges out of the box:

  • Performant rendering and updating of large data sets
  • Interactive event handling such as picking, highlighting and filtering
  • Cartographic projections and integration with major basemap providers including Mapbox, Google Maps and ESRI
  • A catalog of proven, well-tested layers

Deck.gl is designed to be highly customizable. All layers come with flexible APIs to allow programmatic control of each aspect of the rendering. All core classes such are easily extendable by the users to address custom use cases.

Flavors​

Script Tag​

<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

NPM Module​

npm install deck.gl

Pure JS​

React​

Python​

pip install pydeck

Third-Party Bindings​

Ecosystem​

deck.gl is one of the main frameworks in the vis.gl framework suite.

deck.gl is developed in parallel with a number of companion modules, including:

  • luma.gl - A general purpose WebGL2/WebGPU library designed to be interoperable both with the raw browser APIs and (as far as possible) with other WebGL2/WebGPU libraries. In particular, luma.gl does not claim ownership of the WebGL2/WebGPU context, and can work with any supplied context, including contexts created by the application or other libraries.
  • loaders.gl - a suite of framework-independent loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
  • react-map-gl - A React wrapper around Mapbox GL which works seamlessly with deck.gl. There are two integration modes to choose from depending on which features you need, see Using With Mapbox for details.
  • nebula.gl - A high-performance feature editing framework for deck.gl.

Learning deck.gl​

How you approach learning deck.gl will depend on your previous knowledge and how you want to use it.

Getting familiar with the various layers and their props, and reading the basic articles in the deck.gl developer guide should of course be one of the first steps.

Exploring the deck.gl examples is a good starting point.

In-depth tutorials for how to develop deck.gl applications are available on the Vis Academy website.

And our blog contains a lot of additional information that might be helpful.

But where to go after that?

Learning Reactive UI Programming​

deck.gl is designed according to functional UI programming principles, popularized by frameworks like React. The key to writing good, performant deck.gl applications and layers lies in knowing how to minimize updates and redundant calculations, understanding concepts like "shallow equality" etc. This is critical when using deck.gl with React, but can still be helpful to understand when using deck.gl in non-React contexts.

There is an impressive amount of information (documentation, blog posts, educational videos, etc.) on the reactive programming paradigm in relation to modern web frameworks such as React, Flux and Redux. Where to start depends mostly on your application architecture choices. Exploring such information will take you beyond what we can cover in the basic deck.gl developer guide article on Updates.

Understanding WebGL2/WebGPU​

Knowledge of WebGL2 or WebGPU is only needed if you want to create custom layers in deck.gl. Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing deck.gl layers (including modifying the shader code) with a surprisingly limited amount of WebGL2/WebGPU knowledge.

There are many web resources for learning WebGL2/WebGPU. luma.gl can be a good start.