D3.js로 만든 우리나라 지도

D3.js로 만든 우리나라 지도

codefactory 2013/05/17 D3.js, Data Visualization, Demos 21

D3.js로 만든 우리나라 지도입니다.

[데모보기]

이 지도는 mbostock’s block #2206340을 보고 만든 것입니다.

지도 위에 시도별 영역을 표시하기 위해서 좌표정보를 담은 GeoJSON 파일이 필요했습니다. SGIS 통계지리정보서비스에서 행정구역경계 SHP 파일을 구한 다음 이 SHP 파일을 Quantum GIS를 사용해서 GeoJSON으로 변환하여 사용했습니다.

지명 표시를 On/Off 할 수 있고 마우스휠 또는 +/- 버튼으로 확대,축소를 할 수 있습니다. 각 시도를 클릭하면 해당 시도로 확대됩니다.

By codefactory
  • 김현수

    d3.js에 관심이 많았는데 참고 하겠습니다.

    • codefactory

      아 네, 참고가 되셨으면 좋겠습니다..^^

  • 권태우

    해당 지도 및 소스는 무료 사용이 가능 한가요?

    • codefactory

      안녕하세요

      이 데모를 만드는데 사용된 d3, jQuery 등의 라이브러리는 라이센스를 직접 확인하셔야 하지만, 저는 무료로 사용하실 수 있는 것으로 알고 있습니다.

      그리고 제가 직접 작성한 프로그램 코드들은 아무런 제약없이 무료로 사용하실 수 있습니다.

      우리나라를 나타낸 geojson 파일인 http://codefactory.kr/demos/D3/korean-map/data/korea.json 의 경우 오픈되어 있는 리소스들 중 어떤 것을 다운로드 받아서 수정한 것인데 제 기억이 맞다면 무료로 사용 가능한 것이었습니다.

      그래서 종합해서 말씀드리면, 무료 사용이 가능하십니다.
      감사합니다.

  • 윤종원

    저희 사이트에서 쓸수 있을까요? 소스 공유 부탁드려도 될런지… 부탁드립니다.

    • codefactory

      안녕하세요, 답글이 너무 늦어서 죄송합니다.
      문의주셨을 때 바로 달았던 것 같은데, 지금 보니 저장이 안된 것 같습니다.

      네, 물론 사용하실 수 있습니다. 자세한 내용은 제가 아래 답글에 달아놓은 내용과 같습니다.

      위 본문에서 [데모보기] 하시고 소스코드 보기 하셔서 사용하시면 됩니다.
      감사합니다.

  • Hayden Kim

    안녕하세요 웹계발을 공부하고있는 학생입니다
    저가 만드는 웹 사이트에서 이러한 지도 기능을 사용하고 싶은데 소스공유 부탁드려도 될까요? 부탁드립니다

    • codefactory

      안녕하세요
      네, 제가 직접 개발한 소스코드는 자유롭게 활용하셔도 됩니다. 그리고 제가 개발하지 않은 d3.js 등의 라이브러리들은 각자의 라이센스에 맞게 활용하시면 됩니다.

      소스코드를 다운로드 받는 방법 등에 관한 것은 아래에 있는 다른 댓글들을 참고하여 주십시오
      감사합니다.

  • 김진우

    혹시 통계값을 입력시에 coordinate 를 참고하여 넣는 방법으로 사용이 가능 할까요? d3로 지도는 처음이라 질문드립니다.

    • codefactory

      안녕하세요
      죄송하지만 말씀하신 문의 내용이 정확히 어떤 의미인지 파악을 못하였습니다.
      명확한 문의를 하신 것 같은데 제가 잘몰라서 이해를 못한 것 같습니다.
      혹시 괜찮으시다면 조금더 상세하게 설명해주실수 있으신지요
      감사합니다.

      • 김진우

        혹시 지도 크기에 대한 건 json 파일에서 수정을 해야 하는지 궁금합니다.

        • codefactory

          아 네, json 파일에서 수정을 하는 방법도 있는지는 제가 정확히 모르겠습니다.
          저의 경우, http://codefactory.kr/demos/D3/korean-map/js/script.js 파일에서 zoomin, zoomout 부분에서 처리한 것처럼 projection 의 scale 로 지도 크기를 조절하고 있습니다.
          이외에도 d3 에서 지도 크기 조절하는 방법이 있는지는 확실히 잘 모르겠습니다.
          답변이 부실해서 죄송합니다.

  • JAE BUM JUN

    demo보기에서 소스를 가지고 와서 쓰려고하는데 지도가 안뜨는데 어떻게 해야되는지 알려주실수 있나요??ㅠㅠ

  • JAE BUM JUN

    지금 다른건 다 나오는데 지도가 안떠요ㅜㅜㅜ
    style.css에 보면 import시키는 css파일이 또 있던데 이거때문에 그런가요??

    • codefactory

      안녕하세요
      네, 데모와 똑같게 작동하도록 하려면 style.css 에서 import 시키는 CSS 파일 등 모든 파일을 데모와 같게 맞추셔야 할 것 같습니다.

      그런데 지도가 나오지 않는다면, JavaScript 에 문제가 있을 확률이 높은데요
      웹브라우저의 개발자도구에서 오류메시지를 확인해보시면 어떠실런지요

  • kim kyung won

    혹시 이 지도위에 좌표를 통한 위치를 표기하고싶은데 구현되있거나 구현시 어느부분을 손대야하는지 알수 있을까요?
    감사합니다.

    • codefactory

      안녕하세요

      제가 지금 드는 생각은 좌표 정보를 가지고 있는 GeoJSON 파일을 따로 만들어서 추가로 로드한 후 D3.js 에서 제공하는 method 들을 사용해서 좌표의 위치에 객체들을 올릴 수 있을 것 같은데, 구체적인 방법을 자세히 말씀드리기는 어려울 것 같습니다.

      이 데모는 Mike Bostock 이 만든 http://bl.ocks.org/mbostock/2206340 을 참고해서 만든 것입니다.
      그래서 여기에서 더 나아가 좌표를 통해 위치를 표기하는 방법은 Mike Bostock 이 지도를 만드는 것에 관해 쓴 강좌인
      https://bost.ocks.org/mike/map/ 와 https://bost.ocks.org/mike/bubble-map/ 를 보시면 도움이 되시는 부분이 있을 것 같습니다.

      감사합니다.

  • yoo sung min

    d3를 이용해서 다이렉트 링크 노드를 작성 하고있는데요,
    Zoom기능을 구현을 못하고 있습니다 ㅠㅠ
    http://stackoverflow.com/questions/38823374/d3-js-how-to-add-zoom-pan-in-forced-node-view

    • codefactory

      안녕하세요
      답변이 너무 늦어서 죄송합니다.

      문의하신 내용에 대해서 잘 알지 못해 알아보려다가 답변이 늦어지게 되었습니다. 죄송하지만 제가 답변을 드리기는 어려울 것 같습니다.

      지금 올리신 것처럼 stackoverflow 에 질문글을 조금 더 올려보시면 좋은 답을 찾으실 수 있지 않을까 하는데요

      잘 해결되셨으면 좋겠습니다. 감사합니다.