brunch

You can make anything
by writing

C.S.Lewis

by Youjin Shin ㅣ 신유진 Apr 09. 2024

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


매거진의 이전글 데이터시각화 101: ⑤어떤 색을 어떻게 사용해야 할까
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari