deck.gl

What is deck.gl?

deck.gl is a powerful WebGL-powered framework for visual exploratory data analysis of large datasets. It provides a suite of highly performant, customizable layers for rendering complex data visualizations on top of maps.

What are deck.gl's main functionalities?

ScatterplotLayer

The ScatterplotLayer is used to render scatter plot points on a map. Each point can be customized with different sizes and colors.

const {DeckGL, ScatterplotLayer} = require('deck.gl');

const scatterplotLayer = new ScatterplotLayer({
  id: 'scatterplot-layer',
  data: [
    {position: [-122.45, 37.78], size: 100},
    {position: [-122.46, 37.79], size: 200}
  ],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.78,
    zoom: 12
  },
  controller: true,
  layers: [scatterplotLayer]
});

GeoJsonLayer

The GeoJsonLayer is used to render GeoJSON data. It supports features like picking, extruding, and coloring of GeoJSON polygons.

const {DeckGL, GeoJsonLayer} = require('deck.gl');

const geoJsonLayer = new GeoJsonLayer({
  id: 'geojson-layer',
  data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',
  pickable: true,
  stroked: false,
  filled: true,
  extruded: true,
  getFillColor: [160, 160, 180, 200],
  getLineColor: [255, 255, 255],
  getRadius: 100,
  getLineWidth: 1
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -123.1,
    latitude: 49.28,
    zoom: 11
  },
  controller: true,
  layers: [geoJsonLayer]
});

ArcLayer

The ArcLayer is used to render arcs between pairs of coordinates. It is useful for visualizing connections or flows between locations.

const {DeckGL, ArcLayer} = require('deck.gl');

const arcLayer = new ArcLayer({
  id: 'arc-layer',
  data: [
    {source: [-122.45, 37.78], target: [-122.46, 37.79]},
    {source: [-122.46, 37.79], target: [-122.47, 37.80]}
  ],
  getSourcePosition: d => d.source,
  getTargetPosition: d => d.target,
  getSourceColor: [0, 128, 200],
  getTargetColor: [255, 0, 0],
  getWidth: 2
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.78,
    zoom: 12
  },
  controller: true,
  layers: [arcLayer]
});

Other packages similar to deck.gl

leaflet

Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use, but it does not offer the same level of performance and customization for large datasets as deck.gl.

mapbox-gl

Mapbox GL JS is a powerful library for interactive, customizable vector maps. It offers high performance and a wide range of features, but it is more focused on map rendering and less on data visualization compared to deck.gl.

three

Three.js is a JavaScript library for creating 3D graphics in the browser. While it is highly versatile and powerful for 3D rendering, it requires more effort to set up and use for data visualization compared to deck.gl.

README

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/react';
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 exhibits directory, using both webpack 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
npm test
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] (https://www.npmjs.com/package/yarn) to manage packages. To develop deck.gl, [install yarn] (https://yarnpkg.com/en/docs/install) 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, your 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-beta.3]

• Add PointCloudLayer
• FIX: onHover and onClick are no longer called on layers that are not affected
• BREAKING: layer.pick() is renamed to layer.getPickingInfo(), must return info object