HAHS.
도구로 돌아가기

deck.gl

low-level-code
open-source web JavaScriptTypeScriptPython

Overview

deck.gl is a WebGL-powered visualization framework designed for large-scale data visualization, with a particular focus on geospatial use cases. Developed at Uber’s visualization team (now the vis.gl open-source initiative under the OpenJS Foundation), it was born from the need to visualize millions of GPS points, trip routes, and spatial datasets in real time. deck.gl renders data as layers on top of base maps (Mapbox, Google Maps, or any map tile provider) or on a blank canvas.

The framework operates on a layer-based architecture. Each layer type handles a specific visual encoding: ScatterplotLayer for points, ArcLayer for origin-destination connections, HexagonLayer for spatial binning, GeoJsonLayer for geographic boundaries, TripsLayer for animated paths, and dozens more. Layers are composable, GPU-accelerated, and can handle millions of data points at 60fps.

deck.gl has expanded beyond geospatial use cases with layers like the TextLayer, ColumnLayer, and experimental graph layers. The pydeck library provides a Python binding that works in Jupyter notebooks, making deck.gl accessible to data scientists without JavaScript expertise.

Strengths

  • GPU-accelerated rendering handles millions of data points at interactive frame rates
  • 50+ built-in layer types covering most geospatial visualization needs
  • Composable layer architecture — stack multiple layers for rich visualizations
  • First-class integration with Mapbox GL JS, Google Maps, and MapLibre
  • 3D visualization capabilities: extruded polygons, point clouds, 3D tiles
  • pydeck Python binding integrates with Jupyter and pandas
  • Supports streaming data and real-time updates efficiently
  • Pluggable interactions: picking (hover/click), brushing, and custom controllers
  • Part of the vis.gl ecosystem (luma.gl, loaders.gl, math.gl) for advanced use cases
  • Tile layer supports loading massive datasets progressively

Limitations

  • Steep learning curve — requires understanding of WebGL concepts and layer architecture
  • Primarily geospatial-focused; non-map visualizations require creative layer usage
  • Bundle size is substantial (~500KB+ depending on layers imported)
  • Styling and theming are less intuitive than CSS-based charting libraries
  • Text rendering and labeling are limited compared to SVG-based tools
  • Accessibility features (screen readers, keyboard nav) are minimal
  • Static image export requires server-side rendering or screenshot capture
  • Base map tokens (Mapbox, Google Maps) may require paid accounts at scale
  • Debugging GPU-rendered layers is harder than inspecting SVG elements

Best For

deck.gl is the definitive choice for geospatial visualization at scale. It excels at rendering millions of GPS points, trip paths, spatial heatmaps, and geographic boundaries with smooth interactivity. If you are building a city analytics dashboard, a logistics visualization, a real estate explorer, or any application where data lives on a map and volume is measured in millions of points, deck.gl is purpose-built for this challenge. It is also valuable for 3D point cloud visualization and any WebGL-powered data rendering.

Getting Started

Install via npm:

npm install deck.gl

Create a scatterplot on a map:

import { Deck } from "@deck.gl/core";
import { ScatterplotLayer } from "@deck.gl/layers";
import { MapboxOverlay } from "@deck.gl/mapbox";

const scatterLayer = new ScatterplotLayer({
  id: "scatterplot",
  data: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json",
  getPosition: d => [d[0], d[1]],
  getRadius: 30,
  getFillColor: d => d[2] === 1 ? [255, 99, 71] : [70, 130, 180],
  radiusMinPixels: 1,
  pickable: true,
});

const deck = new Deck({
  initialViewState: {
    longitude: -73.98,
    latitude: 40.76,
    zoom: 11,
  },
  controller: true,
  layers: [scatterLayer],
});

With Python (pydeck) in Jupyter:

pip install pydeck
import pydeck as pdk

layer = pdk.Layer(
    "HexagonLayer",
    data=df,
    get_position=["lng", "lat"],
    radius=200,
    elevation_scale=4,
    extruded=True,
)

view = pdk.ViewState(latitude=37.76, longitude=-122.4, zoom=11, pitch=45)
deck = pdk.Deck(layers=[layer], initial_view_state=view)
deck.to_html("hexmap.html")

Supported Chart Types

deck.gl’s layer types map to visualization types: ScatterplotLayer (scatterplots on maps), GeoJsonLayer and PolygonLayer (choropleth maps), HeatmapLayer and HexagonLayer (spatial heatmaps), ArcLayer (origin-destination flows), PathLayer and TripsLayer (route and trajectory visualization), IconLayer (symbol maps), TextLayer (label maps), GridLayer and H3HexagonLayer (spatial aggregation), ColumnLayer (3D bar charts on maps), PointCloudLayer (3D point clouds), Tile3DLayer (3D building models), and BitmapLayer (raster overlays). While primarily geospatial, the OrthographicView enables non-map visualizations using the same high-performance rendering engine.