deck.gl

deck.gl | Docs

A WebGL overlay suite for React providing a set of highly performant data visualization overlays

Provides tested, highly performant layers for data visualization use cases, such as scatterplots, choropleths etc in 2 and 3 dimensions.

npm install --save deck.gl

Example

import DeckGL from 'deck.gl';
import {ArcLayer} from 'deck.gl';

const flights = new ArcLayer({
  id: 'flights',
  data: [] // Some flight points
});

<DeckGL width={1920} height={1080} layers={[flights]} />

A very simple usage of deck.gl is showcased in the hello-world examples, using both webpack2 and browserify, so you can choose which setup you prefer or are more familiar with.

You can also take a look at the docs website or browse directly the docs folder.

Developing

npm install # or yarn
npm test
npm start  # See note below

Note that you will also need to do an npm install in the main example (examples/layer-browser) since the npm start command tries to build and run that example.

cd examples/layer-browser
npm install
cd ../..

Note that npm start in the main directory actually runs examples/main. You will need to install dependencies in that example first:

cd examples/main
npm install # or yarn
cd ../..
npm start

Node Version Requirement

Building deck.gl from source has a dependency on node 4.0 or higher. Either upgrade to a newest version, or install something like nvm.

Install yarn

On macOS deck.gl uses yarn to manage packages. To develop deck.gl, install yarn with brew

brew update
brew install yarn

Contributing

PRs and bug reports are welcome. 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.

Data sources

SF OpenData

TLC Trip Record Data

Mapzen

Changelog

[v4.0.0-rc.4]

• GridCellLayer latOffset and lonOffset => cellSize
• Picking improvement: consistently handle picking in composite layers and also simplied picking (#448, #450)
• FIX: Fix the projectionMode checks for point cloud layer (#454)
• FIX: Make extruded and non-extruded polygon layers using the same Uint8ClampedArray to process colors
• FIX: Make radiusPixels works for PointCloudLayer (#450)
• FIX: Fix the bug that several composite layer not transferring proper props to their underlying layers (#455, #464)
• FIX: Fix a bug causes active layers got invalidated in the middle of the picking info processing (#458)
• FIX: Fix the vertice generation for extruded polygons with holes (#447)
• FIX: Now deck.gl picking works properly for non-fullscreen apps (#455)
• FIX: onHover and onClick props now work on GridLayer and HexagonLayer
• Picking info from GeoJsonLayer and PolygonLayer now have layer property point to the composite layer instead of a sublayer
• FIX: PointCloudLayer use radiusPixels instead of radius
• Examples: Fix the hello-world examples (#461)
• Demo site: Add interactive demo for each core layers (#452)
• Demo site: Upgrade old demos to v4 (#453)
• Demo site: Various other bug fixes (#463)