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';
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 # 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-rc1]

• FIX: Composite layers now have a stub invalidateAttribute()

• FIX: GeoJsonLayer and PolygonLayer now transfer correct updateTriggers to its sublayers

• FIX: Fix the picking for PolygonLayer with and without extrusions

• FIX: update the data file and default values for GeoJsonLayer example so that it correctly shows all geometry features

• FIX: GeoJsonLayer now wireframe prop only affects extruded layer and stroked only affects non-extruded layer

• FIX: super.updateState() now get called appropriately so that data change can correctly popylate to GPUs

• Re-factored GeoJsonLayer and PolygonLayer to separate polygon wireframe and polygon outline

• Removed loader for glsl and use exported Javascript string to store all GLSL shaders

• PointDensityGridLayer => GridLayer

• PointDensityHexagonLayer => HexagonLayer

• GridLayer => GridCellLayer

• HexagonLayer => HexagonCellLayer

• PolygonLayer => SolidPolygonLayer

• PolygonLayer is now a new composite layer that could render solid polygons as well as polygon outlines

• GridLayer and HexagonLayer to use new quantizedScale utility function

• GeoJsonLayer remove drawPoints, drawLines, drawPolygon, fillPolygon

• GeoJsonLayer add stroked, filled, extruded, wireframe

• GeoJsonLayer getPointSize => getRadius

• GeoJsonLayer getStrokeWidth => getWidth

• GeoJsonLayer getStrokerColor => getColor

• GeoJsonLayer remove getPointColor, use getFillColor instead

• PathLayer strokeWidthScale => widthScale

• PathLayer strokeWidthMinPixels => widthMinPixels

• PathLayer strokeWidthMaxPixels => widthMaxPixels

• PathLayer getStrokeWidth => getWidth

• ScatterplotLayer change the default radiusScale to 1

• ScreenGridLayer change unitWidth and unitHeight to cellSizePixels

• Update tests to reflect the new layer names and props