▶d3.js 튜토리얼 :: projection과 path의 활용

▶d3.js 튜토리얼 :: projection과 path의 활용

---

D3를 활용하여 웹에서 시각화를 구현하고자 할 때, Topojson 또는 GeoJSON파일 등을 활용하면 보다 효과적인 시각화결과를 얻을 수 있다. d3.geo에 대한 기능은 지도를 활용한 데이터매핑을 하기전에  앞서 꼼꼼하게 살펴보아야할 API이다.

사진 : Geo Paths에 관한 기술문서 페이지 화면. 정말 다양하고 자세한 기술문서가 존재한다.

d3.geo.path()의 기능

---

d3.js의 한국어 API(부분적으로 제공중이다.)는 d3.geo.path()기능에 대해 다음과 같이 정리하고 있다.

"지리 경로 제레네이터를 새로 생성한다. 기본값은 albersUsa 투영법과 반지름 4.5 픽셀의 포인트다."

한국어로 된 설명이 있는것 자체가 굉장히 감사한 일이긴 하지만, 쉽게 이해되지않는다.

d3.geo.path() :: path(feature[, index])

---

path()는 데이터중에서도 GeoJSON feature 또는 geometry object가 될만한 것들을 찾은 뒤, 사용자가 지정한 기능에 대한 path data 형태로 반환하는 메서드이다.

d3.js로 데이터 맵핑을 하고자 한다면, 자주 마주치게 될 기술문서내용을 정리해본 것이다.

d3.geo.projection()

projection()역시 path()와 함께 d3에서 지도를 다룰때 활용하는 기능이다. 대부분의 컴퓨터 기술서적에서 Projection은 '투영법'이라고 번역되고있으므로, 이를 '투영법'으로 이해해도 좋다. d3에는 이미 '표준'으로 정의된 투영법 종류들이 많이 있다.

이는, 이미 수많은 개발자들이 우리보다 앞서서 이 부분에 대해서 관심을 갖고있었기 때문이다. 다만, d3의 표준 투영법에 포함된 것들은 대부분 세계지도 또는 미국지도를 중심으로 이루어져 있기때문에 우리나라지도위에 맵핑을 하고자하는 경우, 관련 정보를 찾는데 약간 애를 먹을 수도 있다. (사례는 많지 않지만, '대한민국 정치의 모든것'으로 알려진 팀포퐁에서 만든 사례가있어 함께정리한다.)

사진 : 팀포퐁에서 d3를 활용하여 만든 대한민국 인터랙티브지도.(http://bl.ocks.org/e9t/5409518)

d3.geo.path와 projection의 차이점?

---

이렇게 어떤 한 가지 기능에 대해 여러갈래로 나뉜 내용을 보다보면, '두 기능간에는 어떤 차이가 있고, 나는 어떤 부분을 먼저 살펴보아야하나?'라는 궁금증이 생기기 마련이다. 이에대해 《D3.js 입문》의 저자인 후루하타 카즈히로(2014)는 "평면지도일때는 D3.js의 Geo Paths, 지구의처럼 표시하고 싶을 때는 Geo Projections를 사용하면 됩니다."라고 말하고 있다.

하지만, 개인적인 생각은 조금 다르다.

사실 실제 d3를 책이나 bostock의 예제를 통해서 학습하다보면, projection과 path를 함께 사용하여 시각화를 구성하는 경우가 많다.

위 사진은 bostock이 단계구분지도(choropleth)를 제작할 때 작성했던 d3코드이다.

따라서 우리가 d3를 활용하여 웹상에서 효과적으로 구현되는 시각화를 만들기위해서는, path()와 projection()에 대해 이해함으로써 전체적인 구조를 바라볼 수 있도록 해야한다. 특히 데이터를 매핑하는 과정에서 의도치않게 '데이터 왜곡'과 같은 결과를 낳을 수 있으므로, 지도를 사용할때에는 항상 염두해두는 것이 좋다.