6.1 지도 데이터 시각화

출처) newsel.ly

지도 데이터 시각화란 위치 정보를 포함한 데이터를 지도 위에 표현하는 시각화 유형이다. 여기에서 위치 정보의 종류에는 위도,경도, 지역명, 주소 등이 있다.

지도 데이터 시각화의 종류는 다음과 같다.

• Dot map(점 지도)

  • 빠르고 정확하게 위치를 지정하고 인사이트를 도출할 수 있다. 점의 밀도가 높을수록 정확한 확인이 어려워 확대, 축소가 가능한 인터랙티브 지도를 사용한다.

• Heat Map(히트맵)

  • 데이터의 크기에 기초해 색을 달리하여 시각화한 차트. 데이터의 분포를 표현할 수 있다. 전체적인 데이터의 분포 또는 밀집도를 바탕으로 인사이트를 도출한다. ex) 인종 분포, 밀도 및 변동 추세

• Choropleth map(Field map, 단계 구분도)

  • 지도 위 지역별(행정구역별) 영역에 따라 색을 달리하며, 수치형 데이터의 크기를 표현한다.

• Connection Map

  • 공간과 시간을 모두 표현할 수 있어 다양한 상황에 활용 가치가 높다. ex) 운전 경로, 버스/지하철 노선 분포, 비행기경로 추척

• Flow Map

  • 출발지와 목적지 간의 데이터를 선으로 연결한다. 경로(연결) 보다는 흐름에 초점을 두었다. 수치형 데이터의 크기에 따라 흐름을 나타내는 선의 굵기를 다르게 표현한다. ex) 교통 흐름, 인구 이동 경로, 항공 경로 등

• Symbol map(Bubble map, 도형 표현도)

  • 데이터의 크기에 따라 도형의 크기를 다르게 표현한다.

• Cartogram(카토그램)

  • 지연 실제 크기를 왜곡하여 데이터 크기에 따라 면적을 크고, 작게 표현하기 때문에 직관적으로 지역별 차이를 이해할 수 있다.

• Dorling map(돌링 카토그램)

  • 지역의 모양을 도형을 시각화한다. 지역의 모양을 모두 같은 도형으로 바꾸고, 데이터의 수치를 표현하는 데 집중한다. 도형을 기존 지역 위치에 배치한다.

• Tile Grid map(타일 격자 지도)

  • 모든 지역을 일정한 크기의 정사각형 모양으로 고정하고, 데이터 수치에 따라 색을 다르게 표현한다. 모든 지역의 크기가 일정해므로 지역의 크기와 관계없이 지역별 데이터를 쉽게 탐색할 수 있다.

6.2 Leaflet.js 소개 및 설치

지도를 처음 불러올 때 지도의 배치가 이상하거나 제대로 렌더링이 안되는 상황이 생긴다. 이는 Leaflet에서 제공하는 stylesheet를 추가하지 않았기 때문이다. 따라서 기본적으로 다음 CSS를 전체적으로 추가해야 한다.

<link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/leaflet.css>" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

6.2.1 CDN으로 불러오기