HAHS.
도구로 돌아가기

deck.gl

low-level-code
open-source web JavaScriptTypeScriptPython

개요 / Overview

deck.gl은 대규모 데이터 시각화, 특히 지리공간 활용 사례에 초점을 맞춘 WebGL 기반 시각화 프레임워크입니다. 우버(Uber)의 시각화 팀에서 개발되었으며(현재는 OpenJS 재단 산하의 vis.gl 오픈소스 이니셔티브), 수백만 개의 GPS 포인트, 이동 경로, 공간 데이터셋을 실시간으로 시각화해야 하는 필요에서 탄생했습니다. deck.gl은 데이터를 베이스맵(Mapbox, Google Maps, 또는 어떤 지도 타일 제공자든) 위나 빈 캔버스 위에 레이어로 렌더링합니다.

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.

이 프레임워크는 레이어 기반 아키텍처로 동작합니다. 각 레이어 유형은 특정한 시각적 인코딩을 담당합니다: 포인트를 위한 ScatterplotLayer, 출발지-목적지 연결을 위한 ArcLayer, 공간 비닝을 위한 HexagonLayer, 지리적 경계를 위한 GeoJsonLayer, 애니메이션 경로를 위한 TripsLayer, 그 밖에도 수십 종이 있습니다. 레이어는 조합 가능하고, GPU로 가속되며, 초당 60프레임으로 수백만 개의 데이터 포인트를 처리할 수 있습니다.

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은 TextLayer, ColumnLayer, 그리고 실험적인 그래프 레이어 등을 통해 지리공간 활용 사례를 넘어 확장되어 왔습니다. pydeck 라이브러리는 Jupyter 노트북에서 작동하는 파이썬 바인딩을 제공하여, 자바스크립트 전문 지식이 없는 데이터 과학자도 deck.gl을 사용할 수 있게 합니다.

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 가속 렌더링으로 수백만 개의 데이터 포인트를 인터랙티브한 프레임 속도로 처리
  • GPU-accelerated rendering handles millions of data points at interactive frame rates
  • 대부분의 지리공간 시각화 요구를 아우르는 50개 이상의 내장 레이어 유형
  • 50+ built-in layer types covering most geospatial visualization needs
  • 조합 가능한 레이어 아키텍처 — 여러 레이어를 쌓아 풍부한 시각화 구성
  • Composable layer architecture — stack multiple layers for rich visualizations
  • Mapbox GL JS, Google Maps, MapLibre와의 완벽한 통합
  • First-class integration with Mapbox GL JS, Google Maps, and MapLibre
  • 3D 시각화 기능: 돌출된 폴리곤, 포인트 클라우드, 3D 타일
  • 3D visualization capabilities: extruded polygons, point clouds, 3D tiles
  • pydeck 파이썬 바인딩이 Jupyter 및 pandas와 통합
  • 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
  • 고급 활용 사례를 위한 vis.gl 생태계(luma.gl, loaders.gl, math.gl)의 일부
  • Part of the vis.gl ecosystem (luma.gl, loaders.gl, math.gl) for advanced use cases
  • 타일 레이어가 대규모 데이터셋의 점진적 로딩을 지원
  • Tile layer supports loading massive datasets progressively

한계 / Limitations

  • 가파른 학습 곡선 — WebGL 개념과 레이어 아키텍처에 대한 이해가 필요
  • Steep learning curve — requires understanding of WebGL concepts and layer architecture
  • 주로 지리공간에 초점 — 지도가 아닌 시각화에는 창의적인 레이어 활용이 필요
  • Primarily geospatial-focused; non-map visualizations require creative layer usage
  • 번들 크기가 상당함(가져오는 레이어에 따라 500KB 이상)
  • Bundle size is substantial (~500KB+ depending on layers imported)
  • 스타일링과 테마 적용이 CSS 기반 차트 라이브러리보다 직관적이지 않음
  • Styling and theming are less intuitive than CSS-based charting libraries
  • 텍스트 렌더링과 레이블링이 SVG 기반 도구에 비해 제한적
  • 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
  • 베이스맵 토큰(Mapbox, Google Maps)은 대규모 사용 시 유료 계정이 필요할 수 있음
  • Base map tokens (Mapbox, Google Maps) may require paid accounts at scale
  • GPU로 렌더링된 레이어를 디버깅하는 것은 SVG 요소를 검사하는 것보다 어려움
  • Debugging GPU-rendered layers is harder than inspecting SVG elements

이런 용도에 최적 / Best For

deck.gl은 대규모 지리공간 시각화에 있어 결정적인 선택지입니다. 수백만 개의 GPS 포인트, 이동 경로, 공간 히트맵, 지리적 경계를 매끄러운 인터랙티비티로 렌더링하는 데 탁월합니다. 도시 분석 대시보드, 물류 시각화, 부동산 탐색 도구, 또는 데이터가 지도 위에 있고 그 규모가 수백만 포인트 단위로 측정되는 어떤 애플리케이션을 구축하든, deck.gl은 바로 이러한 과제를 위해 설계되었습니다. 3D 포인트 클라우드 시각화와 WebGL 기반의 모든 데이터 렌더링에도 유용합니다.

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

npm으로 설치합니다:

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],
});

Jupyter에서 파이썬(pydeck) 사용:

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의 레이어 유형은 다음과 같은 시각화 유형에 대응합니다: ScatterplotLayer(지도 위 산점도), GeoJsonLayer와 PolygonLayer(코로플레스 맵), HeatmapLayer와 HexagonLayer(공간 히트맵), ArcLayer(출발지-목적지 흐름), PathLayer와 TripsLayer(경로 및 궤적 시각화), IconLayer(심볼 맵), TextLayer(레이블 맵), GridLayer와 H3HexagonLayer(공간 집계), ColumnLayer(지도 위 3D 막대 차트), PointCloudLayer(3D 포인트 클라우드), Tile3DLayer(3D 건물 모델), BitmapLayer(래스터 오버레이). 주로 지리공간에 초점을 맞추고 있지만, OrthographicView는 동일한 고성능 렌더링 엔진을 이용해 지도가 아닌 시각화도 가능하게 합니다.

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.

공식 사이트 방문

관련 카탈로그

chart Bubble Chart chart Choropleth Map chart Heatmap chart Network Diagram chart Scatterplot