Skip to content
WebGL2 powered geospatial visualization layers
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite Update buildkite queue information (#1309) Jan 10, 2018
.github Multiple issue templates (#2562) Jan 12, 2019
bindings/python Simplify setup.py (#3347) Jul 12, 2019
dev-docs Doc: Update status of implemented RFC (#3356) Jul 17, 2019
docs Update deck documentation (#3351) Jul 15, 2019
examples Add data filter example to the website (#3348) Jul 15, 2019
modules Deprecation warning for IE (#3360) Jul 18, 2019
scripts Add an HTML page writer for pydeck (#3250) Jul 9, 2019
showcases replace deprecated APIs of ScatterplotLayer in documentation (#2706) Feb 21, 2019
test Improve core module test coverage (#3359) Jul 18, 2019
website Add data filter example to the website (#3348) Jul 15, 2019
.eslintignore v7.0.0-beta.1 Mar 26, 2019
.eslintrc.js Enable running layer-browser with local luma.gl (#2855) Mar 29, 2019
.gitattributes Enable running layer-browser with local luma.gl (#2855) Mar 29, 2019
.gitignore Move dev scripts out of module roots (#2944) Apr 11, 2019
.markdownlintrc Documentation Formats (#1722) Apr 20, 2018
.nycrc Improve core module test coverage (#3359) Jul 18, 2019
.prettierignore Fix missing brace on link in viewport doc Jun 19, 2019
.prettierrc Add prettier (#1249) Dec 19, 2017
.travis.yml Simplify setup.py (#3347) Jul 12, 2019
CHANGELOG.md v7.2.0-alpha.4 Jul 12, 2019
Dockerfile Use buildkite and docker for CI Dec 4, 2017
LICENSE Add and clean up copyright notice for all our hard work (#520) Mar 31, 2017
README.md chore(readme): fixes bad link in the README.md (#3340) Jul 11, 2019
babel.config.js Add OpenStreetMap example using TileLayer and BitmapLayer (#2821) Mar 25, 2019
docker-compose.yml Use buildkite and docker for CI Dec 4, 2017
lerna.json v7.2.0-alpha.4 Jul 12, 2019
ocular-dev-tools.config.js upgrade ocular-dev-tools (#3256) Jun 20, 2019
package.json Add an HTML page writer for pydeck (#3250) Jul 9, 2019
webpack.config.js Enable running layer-browser with local luma.gl (#2855) Mar 29, 2019
yarn.lock Add data filter example to the website (#3348) Jul 15, 2019

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 webpack 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.