D3를 이용해서 한국지도 그리기
tl;dr
- Shp file 이용하여 직접 맵구현 실패
- 기존 예제 활용 + v4변경
- 여전히 갈 길이 멀다.
배경
2015년 후반기부터 d3.js로 웹에서 지도를 그리고 있는데, 꽤나 결과물이 좋았다. 주로 미국 지도를 그렸기 때문에 한국 지도도 동일하게 적용가능할 것으로 생각했었다. 다만 그리려고 하는 데이터에 따라 지도파일이 달라질 수 있다.
예를 들어 시군구 자료는 특별시와 광역시가 지나치게 작은 영역을 차지하고 있어, 확대/축소 기능없이 지도를 이용하면 편의성이 떨어진다는 단점이 있다.
오늘은 기상청 자료에 맞춰서 자료를 뿌려주기 위해서 작업을 하였고, 남원호 교수의 도움을 받아서 시군구 경계도를 측후소 단위로 변환하여 구득하였다.
Shp to topojson
d3를 이용하여 지도를 그리기 위해서는 topojson 형태의 자료가 필요하다. 그러나 지도 자료는 주로 shp 파일의 형태를 갖고 있고, 용량 역시 크다. 따라서 웹용으로 사용하기 위해서는 자료 변환이 필요하다. 관련 TIL 참조
자료 변환을 위해서는 mapshpaer라는 온라인 도구를 이용하였다. 해당 사이트는 굉장히 쉬운 인터페이스를 가지고 있다. shp파일과 dbf 파일을 이용하여 json파일로 변환을 완료하고, 그 파일을 서버에 올려서 지도를 그려보았으나 제대로 그려지지 않았다.
몇 시간 씨름해서 발견한 문제는 프로젝션 문제와 바운더리 문제로 보인다. 일반적으로 웹에서 예제로 다루고 있는 자료는 위경도 좌표를 쓰고 있다. 하지만 국내 지도 파일은 TM좌표계를 주로 쓰고 있으므로, 예제를 따라서 만들면 제대로 변환이 이루어지지 않는다. TM 좌표를 변환하기 위한 코드를 찾아서 적용해 보았으나, 역시 제대로 그려지지 않았다. 예전에도 벡터 파일을 다룰 때 이런 문제가 발생하곤 했는데, 바운더리를 잡아주지 않아서 생기는 문제로 생각된다. 지나치게 기술문제여서 일단 생략하고, 다른 대안을 찾는 것으로 정리하였다.
기존 예제를 활용하자
검색해보면, 아주 쉽게 나오는 예제가 아래 예제이다.
- D3로 우리나라 인구밀도 시각화하기
- 예제 복원을 위한 raw data link는 다음과 같다.
d3.js v3를 기준으로 작성되었는데, d3.js가 v4를 발표하면서 일부 함수명이 바뀌었다. 향후 코드 관리를 위하여 처음부터 v4를 기준으로 코드를 작성하기로 결정하였다. 예제 코드에서 바뀐 점은 다음과 같다.
- var projection = d3.geo.mercator() -> d3.geoMercator()
- var path = d3.geo.path() -> d3.geoPath()
- var quantize = d3.scale.quantize() -> d3.scaleQuantize()
해결한 문제와 남은 과제
제공받은 데이터를 사용할 수 없게 되면서, 예제에서 제공하는 코드에 기상청 코드를 입혀야 했다. 그래서 제공받은 자료와 수작업으로 매칭하여 자료를 구축하였다. 하지만 향후, 시군구 경계가 아닌 시군 경계로 바꾸어야 할 것으로 생각되는 바 자세한 검토는 다음으로 미루도록 하겠다.
지도로 뿌려줄 데이터는 앞서 저자의 2014년 논문에서 개발한 API를 이용할 예정이나, 해당 API는 측후소별로 자료를 제공하는 반면, 본 연구에서는 특정 기간의 전국 데이터가 필요한 바 추가적인 API가 필요하다.
더불어 해당 데이터베이스는 기상청에서 제공하는 일별 자료를 그대로 제공하고 있는데, 추가적으로 잠재증발산량이나 가뭄지표, 그 외 다양한 메트릭이 활용 가능할 것으로 생각된다.
그리고 일반 사용자가 사용 가능하도록 인터페이스 설계 역시 필요하다.