'따릉이' 사용 이력의 가시화 Project - 02. D3.js로 서울 지도 그리기

 검색을 해 보니 많은 분들이 정리 해 둔 자료가 많습니다. (나만 열심히 하면 되는???)

 쫓기듯 조급하게 생각하지 말고, 즐기는 마음으로 천천히 해 보겠습니다.

 

1. 서울 지도 그리기 샘플

검색을 해서 서울 지도를 그리는 포스트를 하나 찾아봤습니다. 이 포스트 내용만 해도 아주 많은 내용을 담고 있고, 공부 할 것이 많아요. 다 알고 구현하려면 말이죠~ 그런데, 그렇게 하면 지치고 재미가 없어질 수 있으니까,  필요한 것만 가져다 쓰는 방식으로 한번 활용 해 보겠습니다. 올려두신 자료 잘 한번 써보겠습니다. (참고 사이트도 잘 정리 해 두셨어요.)

http://blog.daum.net/l357next/9

d3.js로 만든 서울지도, 전국지도

일단, 무엇보다 어떻게 나오는지 먼저 한번 봐야겠죠???

이 포스트에서도 말씀하셨지만, 데이터 파일을 읽어서 사용하려면 서버를 써야 합니다. 웹 관련 된 개발을 하시는 분들께는 아주 상식적인 내용 일 수 있는 이런 사항들이, 다은 domain을 바탕으로 웹에 진입하는 분들께 어려움을 주더라구요. 저도 그랬고~ 그런데, 그런 걸 알아가는게 공부하는거니까 즐거운 마음으로, 모르는거 하나 알았다 생각하고~

 

2. 웹 서버

 사실 웹 공부를 조금 시작하면 얼마 안가서 공부 한 것을 웹에 올려서 확인하고 싶어지는데, 로컬 서버로는 해소가 안되는 것이 좀 있죠. 막 검색을 해 봐도 계속 활발히 쓰게 될지도 미지수라도 비용을 들이기 좀 거시기 하고. 이럴 때 앞에서 소개한 github의 web hosting을 쓰면 매우 감사한 환경이 만들어 집니다. 이걸 쓰는 방법은 아래 강좌도 보시고, 몇 번 좀 시도 해 보면 될 것이라 믿슙니다. ^^

https://opentutorials.org/course/3084/18891

웹호스팅 (github pages) - 생활코딩

다운로드 받은 자료를 그대로 github에 올려서 한번 확인 해 보겠습니다.

아래와 같이 잘 나오네요. 지하철 노선 위에 마우스를 올리면 굵게 보이고, 확대/축소도 되고 재밌는 기능들이 많이 포함되어 있네요. D3.js 공부를 위해 분석 할 만한 내용들이 많이 있을 것 같습니다.

 

 

3. 참고 코드 검토

위 지도를 보면 지하철 노선이나 한강 등 따릉이와는 관계 없는 데이터도 많이 들어있네요. 그리고, 웹페이지에서 로컬 데이터를 읽어들이는 것이 부하를 좀 주는 작업이니 데이터 경량화도 고려해야 되겠습니다.

 관련 된 자료들을 좀 찾아보니, 데이터 형식도 GeoJSON과 TopoJSON이 있는데, TopoJSON은 토폴로지 정보만 저장하기 때문에 훨씬 가볍게 형상을 나타낼 수 있겠네요. 

 이 정도 해서, 지도 가시화를 할 수 있는 가능한 방법이 있다는 정도만 확인하고, 

 어떤 데이터를, 어떤 방법으로 가사회 할 것인가를 생각 해 보도록 하겠습니다.

 

 이와 관련 된 자료가, 아래 포스트에 아주 잘 정리되어 있습니다. 데이터도 이런 저런 과정을 거쳐 직접 준비하신 것 같아요. 좋은 글이라 사람들도 많이들 보셨고 질문도 많네요. 요런 글들 한번 정독하면 관련 된 지식을 배우는데 큰 도움이 되는 것 같습니다.

https://www.lucypark.kr/blog/2015/06/24/seoul-matzip-mapping/

D3를 이용한 서울시내 맛집 시각화 (feat. 식신로드) - Lucy Park

일단, 이 분 포스트 좀 분석을 해 보고, 어떻게 반영하면 좋을지 생각 해 봐야겠네요.~