15. Vue3 + D3.js 코로나 감염 지도 및 Chart.js 막대 그래프 만들기 준비

 

다시 코로나 감염자가 늘어나는 듯한 분위기이다.

이번에는 이전 만들어봤던 코로나감염 지도 및 현황을 표현하는 예제를 소개하고자 한다.

 

완료된 코드는 실행 결과는 아래 그림과 같다.

 

위 그림을 자세히 살펴보면 

전국 코로나 감염자 수에 따른 시도별 색을 표현하는 것과

시도별 인구수를 표현한 것

최적화를 시키지 않았지만, 범례를 표시한 것

그리고 마지막 창하나를 더 띄워 감염자 수의 현황을 막대 그래프로 표현하였다.

또, 지도에서 시도를 클릭하였을 경우 지도의 색을 변경하는 것과 막대그래프에 표시되는 정보가 해당 지역의 데이터로 변경된다.

 

개발 전 준비 사항

 

날씨 지도 만들기를 했을 경우, 다음과 같은 항목을 추가로 준비해야한다.

 

1. 공공데이터 활용 신청

2. chartjs 추가

3. 공공데이터 저장 테이블 생성

 

앞서 이야기를 빠진 부분이 있어 추가한다.

topojson 파일을 만들기 전에 shp 파일 상태에서 데이터를 추가할 수 있다.

 

위 그림과 같이 지도파일에서 속성테이블 열기로 보면 시도별 위치에 인구 정보가 들어가 있는 것을 볼 수 있다.

 

인구정보 또한, 공공데이터에서 조회해 필드를 만들고 추가하면 될 것이다.

QGIS 툴 사용법과 관련된 내용도 인터넷에 많이 있으니, 참고하길 바란다.

 

공공데이터를 가져오는 방법은 

[dev] - 14. 파이썬으로 공공데이터 날씨 데이터 가져오기 예제

를 참고하면 쉽게 가져올 수 있다.

 

이번 만들 코로나감염 지도는 날씨 지도 만들기와 비슷하니 전체적으로 해당 글을 참조하면 될 것이다.

 

다음 시간은 구현과 관련된 내용을 조금 더 자세히 설명하겠다.