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 WebGL2-powered, highly performant framework for large-scale data visualization.

API Documentation

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/visgl/deck.gl-data/blob/master/website/bart-stations.json',
  getRadius: d => Math.sqrt(d.entries) / 100,
  getPosition: d => d.coordinates,
  getColor: [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]
});

Questions? Submit an issue on our GitHub page.

Changelog

deck.gl [9.0.0-beta.4] - Feb 23 2024

• Use SamplerProps type for textureParameters prop (#8520)
• CARTO: Add filters to v9 sources (#8513)
• transform d.ts files (#8505)
• Category filtering in DataFilterExtension (#7915)
• CARTO: Do not hardcode blockWidth in RasterLayer (#8498)
• Bump ocular-dev-tools (#8478)
• Support Tilejson in data prop for MVTLayer (#8432)