지도 데이터 시각화 : Uber의 pydeck 사용하기
- Uber의 대규모 WebGL 기반 데이터 시각화 도구인 Deck.gl를 파이썬에서 사용할 수 있도록 만든 pydeck 사용 방법에 대해 작성한 글입니다
- 제가 연습하며 사용한 코드는 Nbviewer로 보실 수 있습니다 :)
Deck.gl
- Homepage
- Uber에서 만든 WebGL 기반 대용량 데이터 시각화 도구
- WebGL : 웹 기반의 그래픽 라이브러리로 웹 브라우저에서 3D 그래픽을 사용할 수 있도록 해줌. 참고 : 위키백과
- 주요 특징
- 데이터 시각화에 Layer적 접근(계층적 접근)
- Deck.gl을 사용하면 존재하는 레이어를 활용해 복잡한 시각화를 구성할 수 있으며, 재사용 가능한 레이어로 쉽개 패키징하고 공유할 수 있음
- 이미 입증된 레이어 종류를 제공하고 있음
- GPU의 고정밀 계산
- Deck.gl은 GPU에서 64비트 부동 소수점 계산을 emulating해서 비교할 수 없는 정확성과 성능으로 데이터 세트를 렌더링함
- React와 Mapbox GL 통합
- Deck.gl은 React와 잘 맞고, 리액트 프로그래밍 패러다임에서 효율적인 WebGL 렌더링을 지원함
- Maxbox GL과 함께 사용하면 mapbox 카메라 시스템에 매핑되서 맵박스 지도에서 2D, 3D 시각화를 할 수 있게 됨
- 데이터 시각화에 Layer적 접근(계층적 접근)
- Introduction
- deck.gl은 대규모 데이터 시각화를 단순히 할 수 있도록 설계됨
- 사용자는 기존 레이어 구성을 통해 적은 노력으로 인상적인 시각화 결과를 얻을 수 있고, 고급 WebGL 기반으로 만든 자바스크립트 레이어로 패키징할 수 있는 아키텍처를 제공함
pydeck
- pydeck Github
- pydeck을 deck.gl을 파이썬에서 사용할 수 있도록 만든 라이브러리
- pydeck의 목표 : Python 사용자가 많은 Javascript를 몰라도 deck.gl 맵을 만들 수 있도록 하는 것
- Jupyter Notebook에서 가장 잘 작동하고, 노트북에서 결과를 보거나 HTML로 추출할 수 있음
- pydeck의 고유한 기능
- Folium, Ipyleaflet 등의 지도 라이브러리와 대비한 기능
- Python에서 deck.gl의 전체 레이어 사용 가능
- 대규모 데이터에서 색상 변경, 데이터 수정 지원
- 시각화에서 선택한 데이터를 Jupyter Notebook의 커널로 다시 전달할 수 있는 양방향 통신
- Python API를 통해 수십만 개의 데이터를 2D / 3D로 매핑하는 기능
- 단, 아직 공식 Release는 아니고 Beta임
- 글 작성 기준 최신 버전은 pydeck-0.1.dev5
Install
추후에 바뀔 수 있으니 pydeck Github 참고
설치
pip3 install pydeckExtension 설정
jupyter nbextension install --sys-prefix --symlink --overwrite --py pydeck jupyter nbextension enable --sys-prefix --py pydeck
Mapbox API 등록
- deck.gl처럼 pydeck 라이브러리도 Mapbox의 베이스맵 타일이 필요함
- Mapbox API는 특정 사용량까진 무료이지만, 그 이상을 사용하고 싶을 경우 비용을 내야함. API pricing 참고
- Mapbox API access token으로 이동해 회원 가입
- Access tokens의 Token을 복사
노트북에서 매번 정의하지 않고 환경 변수로 추가. 터미널에서
vi ~/.zshrc(bash를 사용하면 vi ~/.bashrc)을 한 후 아래 내용 추가export MAPBOX_API_KEY="pk로 시작하는 여러분들의 Token 값" # ESC :wq 로 저장하고 빠져나오기터미널에서 수정 사항 적용
source ~/.bashrc # 만약 zsh을 사용하면 source ~/.zshrc터미널에서 MAPBOX_API_KEY가 제대로 나오는지 확인
echo $MAPBOX_API_KEY- 만약 노트북에서 Mapbox API key is not set 에러가 발생하면 터미널을 아예 끄고, Jupyter notebook 재실행
Example Code
- 공식 홈페이지에서 제공하는 예시
- 단 r.to_html()을 r.show()로 바꿈(노트북에서 바로 보이도록 하기 위해)
import pydeck
# 2014 locations of car accidents in the UK
UK_ACCIDENTS_DATA = ('https://raw.githubusercontent.com/uber-common/'
'deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv')
# Define a layer to display on a map
layer = pydeck.Layer(
'HexagonLayer',
UK_ACCIDENTS_DATA,
get_position='[lng, lat]',
auto_highlight=True,
elevation_scale=50,
pickable=True,
elevation_range=[0, 3000],
extruded=True,
coverage=1)
# Set the viewport location
view_state = pydeck.ViewState(
longitude=-1.415,
latitude=52.2323,
zoom=6,
min_zoom=5,
max_zoom=15,
pitch=40.5,
bearing=-27.36)
# Render
r = pydeck.Deck(layers=[layer], initial_view_state=view_state)
# r.to_html('demo.html')
r.show() # html 저장하지 않고 바로 보고싶은 경우 사용
Layer 종류
- deck.gl에서 지원하는 Layer를 잘 파악해둬야 좋음
- 기본적으로 Layer나 CompositeLayer 클래스를 상속함
- Core Layers : 일반적인 용도의 레이어
- ArcLayer
- 위도 / 경도 좌표로 지정된 소스와 대상을 연결
- BitmapLayer
- 지정된 경계에 비트맵 이미지를 렌더링
- ColumnLayer
- HexagonLayer에 의해 렌더링되는 기본 레이어
- GeoJsonLayer
- GeoJson 형식의 데이터를 가져와 다각형, 선, 점으로 렌더링
- GridCellLayer
- 집계 후 CPUGridLayer에 렌더링됨
- ColumnLayer의 변형
- IconLayer
- 지정된 좌표에서 래스터 아이콘을 렌더링
- LineLayer
- 위도 / 경도 좌표로 지정된 소스와 타겟점을 flat line으로 렌더링
- PathLayer
- 좌표 점 리스트를 가져와 돌출 선으로 렌더링
- PointCloudLayer
- 3D 위치, 색 등을 가져와 특정 반지름을 가진 구를 렌더링
- PolygonLayer
- 채워졌거나 스트로크된 다각형을 렌더링
- PolygnLayer는 CompsiteLayer
- ScatterplotLayer
- 위도 경도 쌍으로 이루어진 점을 가져와 특정 반지름의 원으로 렌더링
- SolidPolygonLayer
- 채워진 다각형을 렌더링
- TextLayer
- 텍스처 레이블을 맵에 렌더링함
- IconLayer의 확장판
- ArcLayer
- Aggregation Layers : 입력 데이터를 집계 및 육각형, 컨투어 히트맵 등으로 시각화하는 레이어
- ContourLayer
- 주어진 임계값과 셀 크기에 대해 Isoline, Isband를 시각화
- Isoband : 주어진 임계값 범위 값을 포함하는 다각형
- Isoline : 등치선
- GridLayer
- point의 배열에 기반해 렌더링
- 일정한 셀의 크기를 취하고 입력 포인트를 셀로 집계함
- GPUGridLayer
- GridLayer가 GPU에서 렌더링(WebGL2가 지원되는 브라우저 한정)
- CPUGridLayer
- GridLayer가 CPU에서 렌더링
- HexagonLayer
- pint의 배열에 기반으로 육각형 히트맵 렌더링
- 육각형의 반지름을 사용해 그림
- ScreenGridLayer
- 위도 및 경도 좌표 포인트의 배열을 가져와 히스토그램 빈으로 집계해 그리드로 렌더링
- 셀 사이즈를 조정하면 다시 집계해 렌더링함
- HeatmapLayer
- 데이터의 Spatial 분포를 시각화할 때 사용
- 내부적으로 Gaussian Kernel Density Estimation을 구현해 히트맵 렌더링
- ContourLayer
- Geo Layers : 지도 타일, 지리 공간 색인 시스템, GIS 형식을 지원하는 지리 공간 레이어
- GreatCircleLayer
- ArcLayer의 변형
- Great Circle(대원)
- H3ClusterLayer
- H3으로 나타난 Cluster 렌더링
- H3HexagonLayer
- H3으로 렌더링
- S2Layer
- S2 토큰(지리 공간 인덱스)을 기반으로 지오메트리를 계산해 채워진 다각형 렌더링
- TileLayer
- getTileData로 타입을 가져와 GeJsonLayer에서 렌더링
- TripsLayer
- 차량 Trip을 나타내는 path를 렌더링
- currentTime이 바뀌며 이동하는 모습을 시각화할 수 있음
- GreatCircleLayer
- Mesh Layers : glTF 형식의 그래프에 대한 실험 지원. 3D 모델 지원
- SimpleMeshLayer
- ScenegraphLayer
pydeck 사용 방법
- pydeck은 geojson, Pandas Dataframe을 Input으로 사용 가능(URL도 사용 가능)
- 큰 흐름
- 1) 데이터 선택
- 2) Layer 선택
- 3) ViewState 정의
- 4) 렌더링
1) 데이터 선택
import pandas as pd UK_ACCIDENTS_DATA = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv' pd.read_csv(UK_ACCIDENTS_DATA).head()- 2) Layer 선택
pdk.Layer()에서 첫 인자에 레이어 이름을 String으로 작성- 참고 : pdk.Layer(type, data, id=None, get_position=’[lng, lat]’, **kwargs)
- 그 후 데이터와 각종 인자를 넣어줌
- 세부 인자는 Layer Document에서 찾아서 넣으면 됨
import pydeck as pdk layer = pdk.Layer( 'HexagonLayer', UK_ACCIDENTS_DATA, get_position='[lng,lat]', elevation_scale=50, pickable=True, auto_highlight=True, elevation_range=[0, 3000], extruded=True, coverage=1) - 3) ViewState 정의
- ViewState는 지도 데이터를 기준으로 카메라 각도를 지정함
- 기본적으로 지도를 잡고 드래그, 회전할 수 있음
view_state = pdk.ViewState( longitude=-1.415, latitude=52.2323, zoom=6, min_zoom=5, max_zoom=15, pitch=40.5, bearing=-27.36) - 4) 렌더링
- pdk.Deck으로 레이어와 view state를 통합
- layers 인자에 여러 레이어를 추가할 수 있음
- r.show()로 시각화하고, 만약 저장하고 싶다면 r.to_html()사용
r = pdk.Deck(layers=[layer], initial_view_state=view_state) r.show()pdk.Deck Class 참고
pdk.Deck( layers=[], views=[{"controller": true, "type": "MapView"}], map_style='mapbox://styles/mapbox/dark-v9', mapbox_key=None, initial_view_state={"bearing": 0, "latitude": 0.0, "longitude": 0.0, "maxZoom": 20, "minZoom": 0, "pitch": 0, "zoom": 1}, width='100%', height=500, tooltip=True, )
- 렌더링 후 업데이트
- layer의 속성을 수정한 후, r.update()를 사용해 업데이트 가능
layer.elevation_range = [0, 10000] r.update()시간이 지나며 업데이트하기
import time r.show() for i in range(0, 10000, 1000): layer.elevation_range = [0, i] r.update() time.sleep(0.1)
Tooltip 추가하기
- pdk.Deck()으로 객체를 생성할 때 tooltip을 설정하면 툴팁을 넣을 수 있음
- 1) tooltip=True을 주면 가진 모든 내용을 툴팁으로 보여줌
2) 특정 값만 HTML으로 스타일을 입힐 수도 있음
import pydeck as pdk layer = pdk.Layer( 'HexagonLayer', UK_ACCIDENTS_DATA, get_position='[lng, lat]', auto_highlight=True, elevation_scale=50, pickable=True, elevation_range=[0, 3000], extruded=True, coverage=1) # Set the viewport location view_state = pdk.ViewState( longitude=-1.415, latitude=52.2323, zoom=6, min_zoom=5, max_zoom=15, pitch=40.5, bearing=-27.36) # Combined all of it and render a viewport r = pdk.Deck( layers=[layer], initial_view_state=view_state, tooltip={ 'html': '<b>Elevation Value:</b> {elevationValue}', 'style': { 'color': 'white' } } ) r.show()3) 그냥 Text로 표현할 수도 있음
import pydeck as pdk layer = pdk.Layer( 'HexagonLayer', UK_ACCIDENTS_DATA, get_position='[lng, lat]', auto_highlight=True, elevation_scale=50, pickable=True, elevation_range=[0, 3000], extruded=True, coverage=1) # Set the viewport location view_state = pdk.ViewState( longitude=-1.415, latitude=52.2323, zoom=6, min_zoom=5, max_zoom=15, pitch=40.5, bearing=-27.36) # Combined all of it and render a viewport r = pdk.Deck( layers=[layer], initial_view_state=view_state, tooltip={ "text": "Elevation: {elevationValue}" } ) r.show()
ipywidgets을 사용해 Interactive 시각화
- 사용 방식
- 1) 우선 베이스가 되는 Deck을 만들어서 r.show()로 보여줌
- 2) ipywidget 슬라이더 생성
- 3) ipywidget에서 사용할 함수 정의 => 마지막에 r.update() 사용
- 4) slider.observe로 Deck과 슬라이더를 연결
예제 코드
import pandas as pd import pydeck as pdk LIGHTS_URL = 'https://raw.githubusercontent.com/ajduberstein/lights_at_night/master/chengdu_lights_at_night.csv' df = pd.read_csv(LIGHTS_URL) df['color'] = df['brightness'].apply(lambda val: [255, val * 4, 255, 255]) plottable = df[df['year'] == 1993].to_dict(orient='records') view_state = pdk.ViewState( latitude=31.0, longitude=104.5, zoom=8, max_zoom=8, min_zoom=8) scatterplot = pdk.Layer( 'HeatmapLayer', data=plottable, get_position='[lng, lat]', get_weight='brightness', opacity=0.5, pickable=False, get_radius=800) r = pdk.Deck( layers=[scatterplot], initial_view_state=view_state, views=[pdk.View(type='MapView', controller=None)]) r.show() # Widget 슬라이더 생성 import ipywidgets as widgets from IPython.display import display slider = widgets.IntSlider(1992, min=1993, max=2013, step=2) # Widget에서 사용할 함수 정의 def on_change(v): results = df[df['year'] == slider.value].to_dict(orient='records') scatterplot.data = results r.update() # Deck과 슬라이더 연결 slider.observe(on_change, names='value') display(slider)
뉴욕 택시 데이터 시각화
- pickup ~ dropoff arc layer
agg_query = """
WITH base_data AS
(
SELECT
nyc_taxi.*,
pickup.zip_code as pickup_zip_code,
pickup.internal_point_lat as pickup_zip_code_lat,
pickup.internal_point_lon as pickup_zip_code_lon,
dropoff.zip_code as dropoff_zip_code,
dropoff.internal_point_lat as dropoff_zip_code_lat,
dropoff.internal_point_lon as dropoff_zip_code_lon
FROM (
SELECT *
FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`
WHERE
EXTRACT(MONTH from pickup_datetime) = 1
and pickup_latitude <= 90 and pickup_latitude >= -90
and dropoff_latitude <= 90 and dropoff_latitude >= -90
) AS nyc_taxi
JOIN (
SELECT zip_code, state_code, state_name, city, county, zip_code_geom, internal_point_lat, internal_point_lon
FROM `bigquery-public-data.geo_us_boundaries.zip_codes`
WHERE state_code='NY'
) AS pickup
ON ST_CONTAINS(pickup.zip_code_geom, st_geogpoint(pickup_longitude, pickup_latitude))
JOIN (
SELECT zip_code, state_code, state_name, city, county, zip_code_geom, internal_point_lat, internal_point_lon
FROM `bigquery-public-data.geo_us_boundaries.zip_codes`
WHERE state_code='NY'
) AS dropoff
ON ST_CONTAINS(dropoff.zip_code_geom, st_geogpoint(dropoff_longitude, dropoff_latitude))
)
SELECT
pickup_zip_code,
pickup_zip_code_lat,
pickup_zip_code_lon,
dropoff_zip_code,
dropoff_zip_code_lat,
dropoff_zip_code_lon,
COUNT(*) AS cnt
FROM base_data
GROUP BY 1,2,3,4,5,6
limit 10000
"""
agg_df = pd.read_gbq(query=agg_query, dialect='standard', project_id='{여러분들의 프로젝트 id}')
# 100개만
agg_df = agg_df.sort_values('cnt', ascending=False)
agg_df = agg_df[:100]
arc_layer = pdk.Layer(
'ArcLayer',
agg_df,
get_source_position='[pickup_zip_code_lon, pickup_zip_code_lat]',
get_target_position='[dropoff_zip_code_lon, dropoff_zip_code_lat]',
get_source_color='[255, 255, 120]',
get_target_color='[255, 0, 0]',
width_units='meters',
get_width="cnt/50",
pickable=True,
auto_highlight=True,
)
nyc_center = [-73.9808, 40.7648]
view_state = pdk.ViewState(longitude=nyc_center[0], latitude=nyc_center[1], zoom=9)
r = pdk.Deck(layers=[arc_layer], initial_view_state=view_state,
tooltip={
'html': '<b>count:</b> {cnt}',
'style': {
'color': 'white'
}
}
)
r.show()
- 여기서
width_units와get_width쪽이 문서나 참고 자료가 거의 없어서 이것 저것 시도함 
- ipywidgets을 사용한 요일별 Arc Layer
agg_query2 = """
WITH base_data AS
(
SELECT
nyc_taxi.*,
pickup.zip_code as pickup_zip_code,
pickup.internal_point_lat as pickup_zip_code_lat,
pickup.internal_point_lon as pickup_zip_code_lon,
dropoff.zip_code as dropoff_zip_code,
dropoff.internal_point_lat as dropoff_zip_code_lat,
dropoff.internal_point_lon as dropoff_zip_code_lon
FROM (
SELECT *
FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`
WHERE
EXTRACT(MONTH from pickup_datetime) = 1
and pickup_latitude <= 90 and pickup_latitude >= -90
and dropoff_latitude <= 90 and dropoff_latitude >= -90
LIMIT 100000
) AS nyc_taxi
JOIN (
SELECT zip_code, state_code, state_name, city, county, zip_code_geom, internal_point_lat, internal_point_lon
FROM `bigquery-public-data.geo_us_boundaries.zip_codes`
WHERE state_code='NY'
) AS pickup
ON ST_CONTAINS(pickup.zip_code_geom, st_geogpoint(pickup_longitude, pickup_latitude))
JOIN (
SELECT zip_code, state_code, state_name, city, county, zip_code_geom, internal_point_lat, internal_point_lon
FROM `bigquery-public-data.geo_us_boundaries.zip_codes`
WHERE state_code='NY'
) AS dropoff
ON ST_CONTAINS(dropoff.zip_code_geom, st_geogpoint(dropoff_longitude, dropoff_latitude))
)
SELECT
CAST(format_datetime('%u', pickup_datetime) AS INT64) -1 AS weekday,
pickup_zip_code,
pickup_zip_code_lat,
pickup_zip_code_lon,
dropoff_zip_code,
dropoff_zip_code_lat,
dropoff_zip_code_lon,
COUNT(*) AS cnt
FROM base_data
GROUP BY 1,2,3,4,5,6,7
"""
agg_df2 = pd.read_gbq(query=agg_query2, dialect='standard', project_id='geultto')
default_data = agg_df2[agg_df2['weekday'] == 0].to_dict(orient='records')
arc_layer = pdk.Layer(
'ArcLayer',
default_data,
get_source_position='[pickup_zip_code_lon, pickup_zip_code_lat]',
get_target_position='[dropoff_zip_code_lon, dropoff_zip_code_lat]',
get_source_color='[255, 255, 120]',
get_target_color='[255, 0, 0]',
width_units='meters',
get_width="cnt/50",
pickable=True,
auto_highlight=True,
)
nyc_center = [-73.9808, 40.7648]
view_state = pdk.ViewState(longitude=nyc_center[0], latitude=nyc_center[1], zoom=9)
r = pdk.Deck(layers=[arc_layer], initial_view_state=view_state,
tooltip={
'html': '<b>count:</b> {cnt}',
'style': {
'color': 'white'
}
}
)
r.show()
# Widget 슬라이더 생성
import ipywidgets as widgets
from IPython.display import display
slider = widgets.IntSlider(0, min=0, max=6, step=1)
# Widget에서 사용할 함수 정의
def on_change(v):
results = agg_df2[agg_df2['weekday'] == slider.value].to_dict(orient='records')
arc_layer.data = results
r.update()
# Deck과 슬라이더 연결
slider.observe(on_change, names='value')
display(slider)
Kepler.gl vs Deck.gl
- Kepler.gl은 블로그에 써둔 것처럼 매우 사용하기 쉬움
- 단, 대용량 데이터 시각화 하면 크롬이 refresh
- 결국 deck.gl 기반으로 만들어진 도구
- 사용은 쉽지만 쿼리를 날려서 csv 저장하고 웹에 올려야되는 불편함
- Deck.gl은 약간의 코딩이 필요(그래도 Python으로 가능하면 양호한 편이라 생각)
- 대용량 데이터도 나름 잘 되는 편
- 노트북에서 한번에 다 뽑아낼 수 있는 장점
- 하지만 적응하기 까지 약간의 시간이 필요하고, 개발 진행중이라 계속 바뀔 가능성이 존재
- 결국 목적에 맞도록 적절하게 사용하면 좋을 것 같아요 :)
Reference
- Deck.gl Homepage
- Layer Document
- pydeck: Unlocking deck.gl for use in Python
- pydeck document
- pydeck example
- 전시흠님 블로그
카일스쿨 유튜브 채널을 만들었습니다. 데이터 사이언스, 성장, 리더십, BigQuery 등을 이야기할 예정이니, 관심 있으시면 구독 부탁드립니다 :)
PM을 위한 데이터 리터러시 강의를 만들었습니다. 문제 정의, 지표, 실험 설계, 문화 만들기, 로그 설계, 회고 등을 담은 강의입니다
이 글이 도움이 되셨거나 다양한 의견이 있다면 댓글 부탁드립니다 :)
