Skip to content
WebGL2 powered geospatial visualization layers
Branch: master
Clone or download
Pull request Compare This branch is 100 commits behind uber:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite
.github
bindings/python
dev-docs
docs
examples
modules
scripts
showcases
test
website
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.markdownlintrc
.nycrc
.prettierignore
.prettierrc
.travis.yml
CHANGELOG.md
Dockerfile
LICENSE
README.md
babel.config.js
docker-compose.yml
lerna.json
ocular-dev-tools.config.js
package.json
webpack.config.js
yarn.lock

README.md

version build downloads Coverage Status

deck.gl | Website

WebGL2-powered, highly performant large-scale data visualization

docs

Installation

npm install deck.gl

Using deck.gl

deck.gl offers an extensive catalog of pre-packaged visualization "layers", including ScatterplotLayer, ArcLayer, TextLayer, GeoJsonLayer, etc. The input to a layer is usually an array of JSON objects. Each layer offers highly-flexible API to customize how the data should be rendered.

Example constructing a deck.gl ScatterplotLayer:

import {ScatterplotLayer} from '@deck.gl/layers';

/**
 * data is an array of object in the shape of:
 * {
 *   "name":"Montgomery St. (MONT)",
 *   "address":"598 Market Street, San Francisco CA 94104",
 *   "entries":"43430",
 *   "exits":"45128",
 *   "coordinates":[-122.401407,37.789256]
 * }
 */
const scatterplotLayer = new ScatterplotLayer({
  id: 'bart-stations',
  data: 'https://github.com/uber-common/deck.gl-data/blob/master/website/bart-stations.json',
  getRadius: d => Math.sqrt(d.entries) / 100,
  getPosition: d => d.coordinates,
  getFillColor: [255, 228, 0],
});

Using deck.gl with React

import DeckGL from 'deck.gl';

<DeckGL width="100%" height="100%" longitude={-122.4} latitude={37.78} zoom={8} controller={true} layers={[scatterplotLayer]} />

Using deck.gl with Pure JS

import {Deck} from '@deck.gl/core';

const deck = new Deck({
  container: document.body,
  width: '100vw',
  height: '100vh',
  longitude: -122.4,
  latitude: 37.78,
  zoom: 8,
  controller: true,
  layers: [scatterplotLayer]
});

Minimum setups of end-to-end deck.gl usage is also showcased in the hello-world examples, using both webpack2 and browserify, so you can choose which bundler you prefer or are more familiar with.

To learn how to use deck.gl through the many examples that come with the deck.gl repo, please clone the latest release branch:

git clone -b 6.2-release --single-branch https://github.com/uber/deck.gl.git

For the most up-to-date information, see our API documentations

Contributing

PRs and bug reports are welcome, and we are actively opening up the deck.gl roadmap to facilitate for external contributors.

Note that you once your PR is about to be merged, you will be asked to register as a contributor by filling in a short form.

Attributions

Data sources

Data sources are listed in each example.

The deck.gl project is supported by

BrowserStack
You can’t perform that action at this time.