deck.gl

deck.gl is a GPU-accelerated visualization library built on WebGL2 and WebGPU that renders massive datasets — millions of points, arcs, polygons, and hexbins — directly on the graphics card instead of the DOM or canvas 2D context. It maps arrays of JSON-like data objects onto a stack of composable, highly configurable “layers” (scatterplots, geojson, icons, text, terrain, point clouds) viewed through cartographically-aware “views” (map, first-person, orthographic), and integrates with basemap providers like Mapbox, MapLibre, Google Maps, and ArcGIS. Maintained as part of the OpenJS Foundation’s vis.gl umbrella alongside luma.gl, loaders.gl, and math.gl, it’s the visualization engine behind products at Uber, Foursquare, CARTO, and Unfolded.

What You Get

• A catalog of 40+ pre-built, GPU-accelerated layers spanning scatterplots, arcs, paths, polygons, icons, text, hexbin/grid aggregation, tile-based streaming, point clouds, and 3D meshes
• First-class bindings for React (@deck.gl/react), pure JS, and Python (pydeck) alongside Jupyter widget support
• Basemap integrations for Mapbox GL, MapLibre, Google Maps, ArcGIS, and CARTO out of the box via dedicated submodules
• A composable View/Viewport system (map, first-person, orthographic, orbit) with built-in cartographic projection handling
• Interaction primitives — picking, hover/click highlighting, tooltips, and drag/zoom controllers — that work uniformly across every layer
• An extensible core (LayerExtension, CompositeLayer, custom shaders via luma.gl) for building bespoke layers on the same rendering pipeline

Common Use Cases

• Rendering millions of GPS pings, trip trajectories, or IoT sensor readings as an interactive map overlay
• Building hex-binned or heatmap aggregation views over large geospatial datasets for exploratory analysis
• Overlaying 3D building extrusions, terrain, or point-cloud (LiDAR) data on a basemap for urban or environmental visualization
• Streaming and rendering large tiled datasets (vector tiles, COGs) without loading everything into memory at once
• Powering Python/Jupyter geospatial notebooks via pydeck for data-science exploration without leaving the notebook

Under The Hood

Architecture deck.gl’s core (modules/core/src/lib) centers on the Deck class (deck.ts, ~1,700 lines), which owns a LayerManager, ViewManager, EffectManager, DeckRenderer, and DeckPicker, wiring together luma.gl’s Device/AnimationLoop abstractions with mjolnir.js for gesture/event handling. Each frame, the LayerManager diffs the declared LayersList against the previous state (matching by id, propagating props, calling lifecycle hooks like updateState/draw), then DeckRenderer walks the resulting layer tree through passes/layers-pass to issue WebGL/WebGPU draw calls per layer, with DeckPicker running a parallel off-screen pass encoding object indices into pixel colors for hit-testing. Layers (layer.ts, ~1,500 lines) are the fundamental composition unit — CompositeLayer (composite-layer.ts) lets a single declared layer expand into a subtree of primitive layers, which is how higher-level layers like HexagonLayer or GeoJsonLayer are built from ScatterplotLayer/PolygonLayer/PathLayer primitives underneath. Tech Stack Written in TypeScript, structured as a Yarn/Lerna monorepo (modules/*) with 14+ publishable packages (@deck.gl/core, @deck.gl/layers, @deck.gl/geo-layers, @deck.gl/aggregation-layers, @deck.gl/mapbox, @deck.gl/react, @deck.gl/carto, etc.) that the deck.gl aggregate package re-exports and depends on directly. It builds on sibling vis.gl projects — @luma.gl/core/webgl/webgpu for the rendering abstraction, @loaders.gl/core for data loading/parsing, @math.gl/* for vector/projection math, and @probe.gl for logging/stats — keeping the GPU and math layers reusable outside deck.gl itself. Python support ships as a separate pydeck package under bindings/. Code Quality Testing is extensive and layered: test/modules holds unit tests per-package, test/render runs golden-image pixel-diff regression tests (via pixelmatch) across dozens of test-cases, and test/size guards bundle-size budgets — all run through Vitest across node, headless (jsdom), and browser (Playwright) projects, invoked via vitest run --project node --project headless --project render. The codebase uses strict TypeScript throughout with typed props/state per layer, an internal assert/log utility pair for consistent runtime diagnostics, and enforces lint/format via ocular-lint as a pre-commit hook. API Design The declarative layer-composition API (construct a LayersList, pass to a Deck or DeckGL React component, let the library diff and re-render) is consistent across every layer type and documented per-layer in the official docs, though the sheer breadth of the layer catalog, view/projection concepts, and monorepo package boundaries (which submodule owns which layer) create real onboarding overhead for newcomers coming from simpler 2D charting libraries.