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

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

Design goals:

• Provide overlays that plug directly into react-map-gl's overlay model, enabling overlays to work on maps.
• Provide highly performant data visualization overlays in 2 and 3 dimensions.
• Provide tested, highly performant layers for basic data visualization use cases, scatterplots, choropleths etc.
• Allows easy creation of custom WebGL layers by subclassing Layer.
• Support efficient WebGL rendering in "data flow architecture" applications (i.e. React).
• Special focus on buffer management, allowing both automatic buffer updates but also full application control of buffer allocation and management

Features:

• Web Mercator projections are handled in shader on GPU. No projections are done in JavaScript (unless needed for a uniform calculation or reverse projection of e.g. picked coordinate etc). Specify your lat,lon once and never touch it again.
• Can accept data stored in any ES6 container (supporting [Symbol.iterator] iteration).
• Automatic and manual WebGL buffer management to support.

Installation

npm install --save deck.gl

## Usage

import { DeckGLOverlay, /* import layers here */ } from 'deck.gl';

const mapState = { latitude: 37.55, longitude: -122.2, zoom: 9, ... }

<DeckGLOverlay width={1920} height={1080} mapState={mapState}, // optional layers={[/* put layer instances here */]} />

---

## Example

npm run start

Note: Building deck.gl (not importing) has a dependency on node version 0.12 or higher. If you use an older version, you can install a node version manager like nvm and use a separate shell to install and build deck.gl

npm install -g nvm && nvm install 0.12 && nvm use 0.12

Data source

https://data.sfgov.org/

Changelog

[v3.0.0-beta26] -

• FEATURE: line width now takes device pixel ratio into account
• FEATURE: New life cycle methods, old methods deprecated
• FIX: Fix for context.viewport initialization order
• FIX: DeckGL component now cancels animation loop on unmount.
• BREAKING: Removed blending prop from react components
• FIX: ScreenGridLayer
• FEATURE: ScreenGridLayer now have accessors (getPosition, getWeight) and custom color ramps (minColor, maxColor)