d3-geo, TopoJSON, canvas를 이용한 맵 차트 그리기

Jung Han
14 min readApr 8, 2021

TOAST UI Map Chart 4를 새롭게 준비하면서 조사했던 지도 그리는 방법에 대해 간단하게 공유하려고 합니다.

왜 이조합인가?

기존 Chart3에서는 svg를 사용해 path 자체를 가져와 직접 입력해주는 형태로 차트를 그려주고 있었습니다. 지도데이터를 그릴 때 제일 먼저 생각나는 것은 캔버스가 아닌 svg를 사용하는 것입니다. 여러 부분에서 캔버스보다 다루기 쉬운 것은 사실이지만 TOAST UI Chart4의 반응형 로직을 그대로 활용하고 싶다는 생각에서 캔버스를 사용해 테스트를 진행했습니다. 또한, amChart에서 제공하는 데이터를 직접 사용하다 보니 행정 구역상의 변경이 있거나 amchart에 존재하지 않는 지도일 경우 사용이 어려운 문제가 있었습니다.

--

--