[데이터 시각화] 시도별 임가수 (2010)

[데이터 시각화] 시도별 임가수 (2010)

시도별 임가수 현황을 지도위에서 파이차트로 볼 수 있도록 만들어 봤습니다.

[시도별 임가수 (2010) 보기]

데이터는 임업통계연보에서 구했습니다.

지도는 ArcGIS API for JavaScript를 사용했고, 파이차트는 Chart.js를 사용했습니다.

데이터를 각 시도의 중심지점 위에 파이차트로 올리기위해서 각 시도의 좌표가 필요했습니다. 16개 시도의 좌표는 수동으로 직접 구해서 소스코드에 넣었습니다. 그리고 파이차트를 올려본 후 차트가 겹치지 않도록 좌표를 수정하였습니다.

“ArcGIS API for JavaScript” 자체적으로는 지도 위에 차트를 올리는 도구는 따로 제공하지 않는 것 같았습니다. 인포윈도우 팝업 안에서 차트를 보여주는 예제는 찾았는데 지도 위에 직접 올리는 것은 찾지 못했습니다.

차트는 보통 Canvas나 SVG로 만드므로 지도 위에 Canvas나 SVG를 올리는 방법도 찾아보았는데 제가 잘 못찾는지 그 방법도 없는 것 같았습니다. 그래서 차트릴 이미지로 만든 다음에 이미지를 올리는 방식을 사용해서 만들었습니다.

파이차트는 Chart.js 라이브러리를 사용해서 만들었습니다. Chart.js는 Canvas를 사용합니다. Canvas로 만든 파이차트는 화면 오른쪽 아래 구석에 숨겨놓고 dataToURL을 사용해서 Canvas를 png 이미지로 변환했습니다. 그리고 그 이미지를 지도 위에 올렸습니다. IE8 에서 Canvas를 사용하기 위해 explorercanvas를 사용하려고 했었는데 dataToURL을 지원하지 않아 FlashCanvas를 사용했습니다. Canvas 엘리먼트는 겉에 드러날 필요가 없어서 display:none; 이나 visibility:hidden; 으로 하려고 했는데 FlashCanvas를 사용하는 IE8 에서 차트 생성이 안되서 오른쪽 아래 구석으로 숨겨놓았습니다.

“ArcGIS API for JavaScript” 에서 지도위에 이미지를 올리는 방법은 esri.symbol.PictureMarkerSymbol 로 symbol을 만들고 esri.Graphic 으로 그래픽으로 만든 다음 지도 객체의 graphics.add를 사용하는 방법 (참고) 을 사용하려고 했었는데 IE8에서 이미지가 올려지지 않는 현상이 발생하여 esri.layers.MapImageLayer 로 이미지 레이어를 만들고 esri.layers.MapImage 로 이미지를 만들어 레이어에 올리는 방법 (참고) 을 사용했습니다.

  • Taeil Jeon

    혹시 소스코드와 자료를 받아볼 수 있을지 궁금합니다. 가능하시다면, rudchammo@gmail.com 으로 받아보아, 참고하고 싶습니다. 감사합니다.

    • codefactory

      안녕하세요
      아 네, 소스코드를 보시고 참고하셔도 됩니다. 제가 만든 예제들의 소스코드들은 대부분 인터넷의 다른 예제를 보고 따라 만든 것이라서요

      그런데 제가 지금 메일로 따로 보내드리기는 어렵고 대신 http://linkit.kr/demos/ArcGIS/forest-households/ 에 가셔서 직접 소스보기를 하시면 되실 것 같습니다.

      소스보기 하시면 여러 파일들이 인클루드 되어 있는데 그 중에서
      http://linkit.kr/demos/ArcGIS/forest-households/assets/js/script.js 파일에 주요 로직이 들어있습니다.

      감사합니다.

  • Min Jin Yu

    소스코드 참고하고 있는데 한글이 너무 많이 깨지는데…. 어떻게 봐야할까요 ㅠㅠ

    • codefactory

      안녕하세요
      혹시 웹브라우저에서 소스보기로 소스코드를 보고 계신지요?
      그렇다면 아래의 2가지 방법 중 하나를 사용해보시면 되실 것 같습니다.

      1. 브라우저의 소스보기 상태에서는 한글이 깨져도, 마우스 우클릭 후 “다른 이름으로 저장” 하신 후, PC 에서 에디터로 열어보시면 됩니다.

      2. 크롬 브라우저의 경우를 말씀드리겠습니다. 한글이 깨져서 나오는 그 페이지에서 우측 상단의 닫기 버튼 아래에 줄3개가 있는 모양의 아이콘을 클릭하신 후 나오는 메뉴에서 “도구 더보기 > 인코딩” 으로 들어가셔서 맨 위에 있는 “유니코드(UTF-8)” 을 선택해 주십시오

      위의 방법으로 한글 보는 것이 가능하실 것 같습니다.
      감사합니다.

      • Min Jin Yu

        이런방법이.. ㅋㅋㅋ 감사합니다~~

        • codefactory

          감사합니다..^^