No Clocks Vault

deck.gl

2 min read

deck.gl

Overview

deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets. Developed by Uber’s visualization team, it provides a layered approach to rendering millions of data points with high performance, commonly used for geospatial visualization.

Key Features

FeatureDescription
GPU AcceleratedWebGL2 rendering for millions of points
Layer SystemComposable visualization layers
InteractivityPicking, tooltips, brushing
Basemap IntegrationWorks with MapLibre, Mapbox, Google Maps
React SupportFirst-class React bindings
Python Bindingspydeck for Jupyter notebooks

Core Layers

LayerDescription
ScatterplotLayerPoints with size/color encoding
GeoJsonLayerRender GeoJSON features
PolygonLayerFilled polygons
PathLayerLines and routes
IconLayerCustom icons/markers
ArcLayerOrigin-destination arcs
HexagonLayerHexagonal binning
HeatmapLayerDensity heatmaps
TripsLayerAnimated paths
Tile3DLayer3D Tiles/I3S rendering

Basic Usage

Standalone

import { Deck } from '@deck.gl/core';
import { GeoJsonLayer } from '@deck.gl/layers';
 
const deck = new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 11
  },
  controller: true,
  layers: [
    new GeoJsonLayer({
      id: 'parcels',
      data: 'https://example.com/parcels.geojson',
      filled: true,
      getFillColor: [255, 140, 0, 180],
      getLineColor: [0, 0, 0],
      lineWidthMinPixels: 1
    })
  ]
});

With MapLibre

import { Map } from 'maplibre-gl';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { ScatterplotLayer } from '@deck.gl/layers';
 
const map = new Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [-122.4, 37.8],
  zoom: 11
});
 
const overlay = new MapboxOverlay({
  layers: [
    new ScatterplotLayer({
      id: 'points',
      data: points,
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [255, 0, 0]
    })
  ]
});
 
map.addControl(overlay);

React

import { DeckGL } from '@deck.gl/react';
import { GeoJsonLayer } from '@deck.gl/layers';
import Map from 'react-map-gl/maplibre';
 
function App() {
  const layers = [
    new GeoJsonLayer({
      id: 'parcels',
      data: parcelsData,
      filled: true,
      getFillColor: [255, 140, 0]
    })
  ];
 
  return (
    <DeckGL
      initialViewState={{ longitude: -122.4, latitude: 37.8, zoom: 11 }}
      controller={true}
      layers={layers}
    >
      <Map mapStyle="https://demotiles.maplibre.org/style.json" />
    </DeckGL>
  );
}

Python (pydeck)

import pydeck as pdk
 
layer = pdk.Layer(
    'ScatterplotLayer',
    data=df,
    get_position='[longitude, latitude]',
    get_radius=100,
    get_fill_color='[255, 0, 0]'
)
 
view = pdk.ViewState(latitude=37.8, longitude=-122.4, zoom=11)
deck = pdk.Deck(layers=[layer], initial_view_state=view)
deck.to_html('map.html')

R Integration

# using mapdeck package
library(mapdeck)
 
mapdeck(style = mapdeck_style("dark")) |>
  add_scatterplot(
    data = points,
    lon = "longitude",
    lat = "latitude",
    radius = 100,
    fill_colour = "#FF0000"
  )
ToolDescription
kepler.glNo-code deck.gl-based exploration
MapLibreBasemap for deck.gl overlays
pydeckPython bindings for Jupyter
mapdeckR bindings for deck.gl

Appendix

Created: 2024-12-23 | Modified: 2024-12-23

See Also

(c) No Clocks, LLC | 2024

Graph View

Backlinks