Datawrapper로 히트맵 만들기
노코드 데이터시각화툴 Datawrapper 사용법
'뉴욕타임스에서 쓰는 노코드 데이터 시각화 툴'이라는 글에서 데이터래퍼(Datawrapper)를 소개한 적이 있습니다. 뉴욕타임스나 워싱턴 포스트와 같은 미국 언론사뿐 아니라 UN, World Economic Fogum, Moody's 등 다양한 곳에서 사용하고 있습니다. 데이터래퍼는 간단한 차트, 지도 및 표를 쉽게 만들 수 있도록 도와줍니다. 완성도 높은 시각화를 빠른 시간 안에 할 수 있고, 데이터 업데이트가 쉬우며, 이미지 파일부터 온라인 인터랙티브까지 다양한 형태로 시각화를 저장할 수 있는 등 장점이 많습니다.
이번 글에서는 데이터래퍼를 이용하여 히트맵을 만드는 법을 소개하려고 합니다! 우선 데이터래퍼 서비스에 가입을 해야 합니다. 그리고 로그인을 한 후, ‘차트 생성(Create new chart)’를 선택합니다. 자, 이제 차트를 만들어볼까요?
Source: Datawrapper우리는 각 나라별 기대수명을 히트맵으로 만들 예정입니다. Datawrapper에서 제공되는 이 데이터를 제가 Google sheet에 정리해 놓았습니다. 위의 이미지와 같이 그 링크를 붙여 놓으면 데이터를 가져올 수 있어요. 다만, 이때 Google sheet의 데이터를 누구나 볼 수 있도록 설정해놓아야 합니다.
Source: Datawrapper다음(Proceed) 버튼을 누르면 위와 같이 불러온 데이터의 포맷을 확인할 수 있습니다. 데이터가 파란색이 의미하는 숫자로 인식되었네요.
Source: Datawrapper이때 중요한 것은 차트 타입(Chart Type)입니다. 테이블(Table)을 선택해야 히트맵을 만들 수 있습니다. 테이블을 선택하니 오른쪽과 같이 각 나라별로 연도별 기대수명 숫자가 보이네요. 이제 어떻게 디자인을 업데이트할까요?
Source: Datawrapper다음(Proceed) 버튼을 누르면, 개선(Refine) 탭으로 이동됩니다. 여기서 'Hide hearder' 부분을 체크하면, 연도를 표시한 헤더 부분이 안 보이게 됩니다. 그리고 히트맵을 만들기 위해서 'Activate heatmap' 버튼을 클릭합니다. 그런 후, 위와 같이 히트맵의 색상 팔레트와 범위 등을 설정할 수 있습니다.
Source: Datawrapper나라 이름옆에 있었던 코드는 국가 코드(country code)였어요. 데이터 래퍼는 이 코드를 국기 이미지로 바꿔주는 기능이 있습니다. 'Customize column'에서 나라 이름 데이터를 의미하는 'Country'를 클릭하면 위와 같이 칼럼을 수정할 수 있는 패널이 보입니다. 여기에서 'Replace country codes with flags'를 클릭하면, 국기 이미지가 만들어집니다.
Source: Datawrapper히트맵이 만들어지면, 이제 이 히트맵이 어떤 것을 의미하는지 텍스트로 설명해줘야 합니다. 'Annotate' 탭에서 제목(Title), 설명(Description), 데이터 출처(Data source) 등의 정보를 넣을 수 있습니다.
Source: Datawrapper이제 시각화가 완성되었습니다! Datawrapper에서 만든 시각화는 다양한 방법으로 공유될 수 있습니다. 'Publish' 버튼을 누르면, 위와 같이 공유가능한 링크에서부터 iframe 형태로 사이트에 넣을 수 있는 'Embed code'를 제공해 줍니다. 그리고, 이미지 형태(png)로도 다운로드할 수 있는데요. 다만 벡터 이미지 형태인 SVG는 유료버전에서만 사용가능합니다.
아래는 완성된 히트맵입니다!
궁금하신 분들은 다음의 링크(https://www.datawrapper.de/_/jlO0e/)에서 이 히트맵의 인터랙티브 버전을 확인하실 수 있습니다. 히트맵 위에 마우스를 놓으면 그 정보가 툴팁으로도 제공됩니다. 이렇게 Datawrapper를 통해 간단하게 인터랙티브 버전의 히트맵을 만들어 보았습니다 :)
Source: Datawrapper