Home

Awesome

<p align="right"> <a href="https://npmjs.org/package/deck.gl"> <img src="https://img.shields.io/npm/v/deck.gl.svg?style=flat-square" alt="version" /> </a> <a href="https://github.com/visgl/deck.gl/actions?query=workflow%3Atest+branch%3Amaster"> <img src="https://github.com/visgl/deck.gl/workflows/test/badge.svg?branch=master" alt="build" /> </a> <a href="https://npmjs.org/package/deck.gl"> <img src="https://img.shields.io/npm/dm/@deck.gl/core.svg?style=flat-square" alt="downloads" /> </a> <a href='https://coveralls.io/github/visgl/deck.gl?branch=master'> <img src='https://img.shields.io/coveralls/visgl/deck.gl.svg?style=flat-square' alt='Coverage Status' /> </a> </p> <h1 align="center">deck.gl | <a href="https://deck.gl">Website</a></h1> <h5 align="center"> GPU-powered, highly performant large-scale data visualization</h5>

docs

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:

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 Goodies

Learning Resources

Contributing

deck.gl is part of vis.gl, an OpenJS Foundation project. Read the contribution guidelines if you are interested in contributing.

Attributions

Data sources

Data sources are listed in each example.

The deck.gl project is supported by

<a href="https://www.unfolded.ai"><img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/unfolded.png" height="32" /></a> <a href="https://www.foursquare.com"><img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/fsq.svg" height="40" /></a>

<a href="https://www.carto.com"><img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/carto.svg" height="48" /></a>

<a href="https://www.mapbox.com"><img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/mapbox.svg" height="44" /></a> <a href="https://www.uber.com"><img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/uber.png" height="40" /></a>

<a href="https://www.browserstack.com/"><img src="https://d98b8t1nnulk5.cloudfront.net/production/images/static/logo.svg" alt="BrowserStack" width="200" /></a>