[D3.js] 지도 그리기

D3.js 와 TopoJSON을 사용하면 데이터를 기반으로 쉽게 지도를 그릴 수 있다.

• 지도상에 정보를 표시하기 위해 구글 차트의 'Visualization:Geomap' 을 이용할 수도 있다.
• 데이터를 표시하거나 특정 지역에 마우스를 올리면 팝업이 뜨는 등의 기능도 있음.

 지도 데이터 내려받기 

• 지도 데이터는 Natural Earth 에 공개되어 있음
• Natural Earth : 세계 지도 데이터를 제공하는 Public Domain 사이트.
• 인문 벡터 데이터(Cultural Vector Data), 지리 데이터(Physical Vector Data), 래스터 데이터(위성 사진 데이터) 등의 다양한 데이터 배포
• 행정구역을 이용할 수 있는 데이터 : Downloads tab -> Large scale data, 1:10m -> Cultural -> Download states and provinces' 
• 'ne_10m_admin_1_states_provinces.zip'
• http://www.naturalearthdata.com/downloads/10m-cultural-vectors 에서 아래 파일 다운 받기
  
• http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.zip

 데이터 형식 변환하기

• 위의 지도 데이터 파일의 압축을 풀면 Shape 형식의 데이터를 만날 수 있당.
• Shape 형식의 데이터를 TopoJSON에서 사용할 수 있는 데이터 형식으로 변환해야 한다.
• 이 이유는 Shape 파일은 전 세계의 데이터가 들어 있으며, 난 일본 데이터 부분만 필요하다.
• 또한, GeoJSON과 TopoJSON, 두 종류의 JSON 파일이 존재하는데 GeoJSON은 중간 포맷이고, TopoJSON에서는 좌표 데이터를 조밀하게 압축한 것.
• 따라서 용량을 줄이기 위해 형식을 변환해야 한당. 

 데이터 형식 변환을 위한 도구 설치하기

• 난 맥이니까 brew install gdal 
• gdal : 래스터 데이터의 메타 데이터 검색이나 데이터 포맷의 변환을 위한 도구다.
• 참고) CentOS : sudo yum install gdal

• Raster Data 는 뭐지 ?  
  

• TopoJSON 설치 : npm install -g topojson@1.6.19

 변환 작업 ! 

• Shape 파일로부터 일본 지도 데이터만 추출할 것이다.
• GeoJSON 형식으로 저장할거야.
• 해당 디렉토리 ( Shape 파일로 압축을 푼 경로) 에서 다음의 명령어를 실행하기.
• ogr2ogr -f GeoJSON -where 'geonunit = "Japan"' japan.json ne_10m_admin_1_states_provinces.shp
• japan.json 파일이 생성된다. 
  
• JSON 데이터를 보는 데 편리한 jq 명령어를 사용하기 위해 설치한당.
• brew install jq
• jq 로 japan.json 데이터를 확인해보기.
• jq '.features[].properties.name_local' japan.json | column

• 이제는 GeoJSON 형식의 파일을 TopoJSON 형식으로 변환하기.
• topojson japan.json -p > japan-topo.json
• -p 옵션 : 지명 등의 이름 프로퍼티를 포함하고자 할 경우 지정 
  
• GeoJSON을 압축한 TopoJSON이 얼마나 압축되었지 ? 

• wget http://d3js.org/d3.v3.min.js
• wget http://d3js.org/topojson.v0.min.js
• 또는 <script src="https://d3js.org/d3.v4.min.js"></script>
• <script src="http://d3js.org/topojson.v0.min.js"></script>

 지도를 그려보장 !

• node chart-server.js 로 서버를 실행하고
• http://localhost:8090 URL로 접속하면 일본 지도가 그려진당. >< !!!!