▶d3.js 튜토리얼 :: 맵핑(Mapping)

▶d3.js 튜토리얼 :: 맵핑(Mapping)

---

다양한 데이터시각화 방법들이 있지만, 개인적으로 맵핑(mapping)방식의 시각화에 많은 관심을 갖고 있다. 대부분의 사람들은 거주하고있는 지역 또는 인접 지역에 대한 지도, 또는 공간정보에 대해 기본적인 스키마를 가지고있다. 이러한 바탕위에 데이터를 표현한다면, 처음 시각화를 접하는 사람이라도, 추가적인 정보전달없이 상당부분을 직관적으로 이해할 수 있다.

결과물이 잘 나오기만 한다면 데이터 맵핑은 심미적인 면에서도 로도 좋은 결과를 얻을 수 있다. 이러한 시각화결과를 웹공간에 게시할 수 있게 된다면 더욱 좋다.

서론이 길었다. d3.js를 활용하면 이러한 맵핑도 어느정도의 노력만 기울인다면 전문개발자가 아니더라도 어느정도 연습을 거쳐 만들어낼 수 있다. 특히 꽤나 유명한 마이클보스탁역시 맵핑과 관련해서 여러가지 결과물과 예제, 라이브러리를 공개하고있어서 배우려고만 한다면 누구나 접근해볼 수 있다.

데이터 맵핑을 위해 필요한것

---

데이터를 맵핑하기위해서는 기본적으로 '공간정보데이터'가 필요하다. '새그림'이 그려진 스캇머레이의 'd3.js'책에서는 d3에서 활용할 수 있는 GeoJSON, TopoJSON형태의 파일을 먼저 준비해야한다고 언급하고있다. 

bostock github : https://github.com/d3/d3-geo-projection

마이클보스탁의 깃허브에서 다양한 형태의 미국 GeoJSON, TopoJSON등을 다운로드할 수 있다. 이러한 예제로 먼저 어떤내용인지 학습해보는 것도 나쁘지않다. 그러나 이미 그런과정을 거쳤거나, 미국은 생략하고  궁극적으로 하고 싶은 '대한민국'에 대한 맵핑을 하고자한다면 다음과 같은 경로로 지오 데이터들을 만들어야한다.

- 통계청 SGIS 사이트에서 행정구역 경계지도를 다운로드 (shapefile형식이다.) 후 GeoJSON형태로 변환하는방법.

- 통계청 SGIS에서 제공하는 행정구역경계API를 활용하여 나름의 GeoJSON형태로 재가공.(json형식으로 받는다)

기본적으로 통계청에서 친절하게(?) shape형태의 파일을 제공하고 있는데 굳이 왜 변경하려고하는지 궁금할 수도 있다. 이 포맷은 기본적으로 일반텍스트 파일이 아니기때문에 우리가 눈으로 이해하는 것도 불가능할 뿐만아니라, 웹브라우저에서도 세이프파일을 어떻게 처리할 방법이 없다. 따라서, 우리는 웹에 적절한 형태로 변환을 해야하는 것이다.

데이터를 다운로드 받았거나, API를 통해 일정형태의 정보로 가공했다면 이를 다시 GeoJSON또는 TopojSON의 형태로 변환해주어야 한다. 이를 변환해주는 편리한 사이트들이 몇가지 있는데, 스캇머레이(2014)는 책에서 다음의 MapShaper라는 사이트를 소개했다.

매트 블로처(Matt Bloch)가 만든 MapShaper(http://mapshaper.org)

사용방법은 간단하다. 다운로드받은 shp파일을 업로드한 후, 나오는 형태를 조절하여 다시 원하는 형태(shp, geojson, topojson)의 형태로 다운로드받으면된다.