D3.js를 활용한 한국 지도 시각화 가이드
Source
Evernote/Advanced View Required/자바스크립트로 한국 지도 그리기 - Intellectual Wanderlust.md
Summary
이 문서는 D3.js 라이브러리를 사용하여 웹 브라우저에서 한국 지도를 SVG로 렌더링하고 특정 지점에 데이터를 시각화하는 방법을 단계별로 설명합니다. 주요 과정은 Natural Earth 데이터에서 Shapefile을 다운로드한 후, QGIS로 한국 영역(KOR, PRK)을 필터링하고 GDAL을 통해 GeoJSON으로 변환하며, 마지막으로 TopoJSON으로 최적화하는 것입니다. 이후 D3.js의 메르카토르 투영법(Mercator projection)을 적용하여 위도/경도를 픽셀 좌표로 변환하고, SVG path로 지도 경계를 그리며, circle 요소로 데이터 포인트를 표시합니다.
Key Points
- D3.js는 SVG 기반 시각화 라이브러리로, 위도/경도 데이터를 처리하기 위해 투영(Projection) 과정이 필수적입니다.
- 지도 데이터는 Shapefile(.shp)을 구한 후 QGIS로 국가 코드(KOR, PRK)를 필터링하여 추출합니다.
- 데이터 포맷은 Shapefile → GeoJSON(GDAL ogr2ogr) → TopoJSON(topojson CLI) 순서로 변환하여 용량과 처리 효율을 높입니다.
- D3.js에서 d3.geo.mercator()를 사용하여 중심 좌표(127.46, 38.20)와 스케일을 설정하고, path 생성기를 통해 SVG path를 렌더링합니다.
- 데이터 포인트는 위도/경도 배열을 projection 함수에 통과시켜 SVG circle의 cx, cy 좌표로 변환하여 배치합니다.