brunch

You can make anything
by writing

C.S.Lewis

by Youjin Shin ㅣ 신유진 May 10. 2023

뉴욕타임즈에서 쓰는 노코드 데이터 시각화 툴

노코드 데이터시각화 툴 Datawrapper



최근 뉴욕타임스나 워싱턴 포스트와 같은 미국 언론사에서는 노코드 데이터 시각화 툴인 ‘데이터래퍼(Datawrapper)’를 많이 사용하고 있습니다. ‘데이터래퍼’는 간단한 차트, 지도 및 표를 쉽게 만들 수 있도록 도와줍니다. 제가 워싱턴 포스트에서 그래픽 기자로 근무할 당시에도 이 툴을 자주 사용했었습니다. 간단한 시각화를 빠른 시간 안에 할 수 있고, 데이터 업데이트가 쉬우며, 이미지 파일부터 온라인 인터랙티브까지 다양한 형태로 시각화를 저장할 수 있는 등 장점이 많습니다.


출처: 데이터래퍼(Datawrapper)


그레고르 아이쉬(Gregor Aisch)는 ‘데이터래퍼’의 공동 창립자이자 데이터 시각화 책임자입니다. 그는 이전에 뉴욕타임스에서 비주얼 저널리스트로 근무했었는데요. 당시 저는 그레고르가 데이터 시각화를 이용하여 정보를 시각화하는 방식의 팬이었습니다. 그레고르의 이러한 경험이 반영된 듯 ‘데이터래퍼’는 다른 노코드 데이터 시각화 툴에 비해 차트 형식, 디자인, 주석 등의 설정이 용이합니다.


이 스토리에서는 누적 영역 그래프(Stacked area chart)를 함께 만들어보려고 합니다. 무료로 제공되는 버전을 이용하여 인터랙티브 차트를 제작할 예정입니다. 


우선 ‘데이터’ 서비스에 가입을 해야 합니다. 그리고 로그인을 하면 아래와 같이 메뉴가 보입니다. ‘차트 생성(Create new chart)’를 선택합니다. 자, 이제 차트를 만들어볼까요?


출처: 데이터래퍼(Datawrapper)





데이터 시각화 업데이트하기


‘차트 유형(Chart type)’이라는 탭에서 ‘영역차트(Area chart)’를 선택합니다. 그럼 아래와 같이 차트가 그려집니다. 이제 디자인을 업데이트해볼까요? ‘다음(Proceed)’ 버튼 혹은 ‘개선(Refine)’ 탭을 눌러봅니다.


출처: 데이터래퍼(Datawrapper)


아래쪽으로 내려가면 ‘라벨링(Labeling)’이라는 버튼이 있습니다. 각각의 항목에 대해 이름을 붙이는 것을 말합니다. 하위 항목에 ‘라인 레이블(Line labels)’를 ‘없앰(none)’으로 표시하면 차트 위에 놓여있었던 나라 이름들이 사라집니다. 라벨링 대신 마우스 커서가 올려진 영역의 나라 이름을 툴팁(Tooltip)을 사용하여 보여줄 예정입니다.

출처: 데이터래퍼(Datawrapper)


차트의 축이 데이터가 읽히는 곳에 위치해야 데이터를 이해하기 쉽습니다. 차트의 모습을 보면 Y축이 왼쪽보다는 오른쪽에 위치하는 것이 데이터를 읽기 쉽겠죠? 세로축(Vertical axis) 부분으로 가서 그리드 레이블(Grid labels)을 오른쪽(right)으로 바꿔줍니다. 아래와 같이 Y축이 오른쪽으로 옮겨졌습니다.


출처: 데이터래퍼(Datawrapper)


다음으로는 면적그래프의 색을 업데이트하려고 합니다. 왼쪽 패널을 보면 다음과 같이 면적을 설정(Customize areas)하는 부분이 있습니다. ‘색상 설정(customize colors)’ 버튼을 누르면 색상을 선택하거나 입력할 수 있는 창이 뜹니다. 면적을 선택하고, 색상 설정을 통해 색을 업데이트할 수 있어요.


출처: 데이터래퍼(Datawrapper)


불투명도(opacity)를 1로 하면 색이 좀 더 선명하게 보입니다. 현재는 면적 그래프의 선이 뾰족한 형태를 띠고 있는데요, 이는 ‘보간법(Interpolation)’ 부분에서 설정할 수 있습니다. 여기서 곡선(curved, natural)을 선택해 봅니다. 


차트가 아래와 같이 업데이트되었습니다. 이 외에도 왼쪽의 패널에서 값을 바꿔가면서, 차트의 어떤 속성들이 업데이트될 수 있는지 한 번 확인해보세요.


출처: 데이터래퍼(Datawrapper)


텍스트를 업데이트하고 시각화가 완성되었습니다! 이제 ‘발행하기(Publish)’ 버튼을 누르면 됩니다. 그러면 아래와 같이 공유할 수 있는 링크와 이 시각화를 임베드할 수 있는 코드가 자동으로 생성됩니다. 여태 작업한 시각화를 여기에서 확인할 수 있습니다. 


출처: 데이터래퍼(Datawrapper)



‘데이터래퍼’를 이용하여 인터랙티브 데이터 시각화를 만드는 방법이 생각보다 쉽고 직관적이지 않나요? 이와 같이 ‘데이터래퍼’는 코딩 지식이 전혀 없이도 꽤 복잡한 형태의 인터랙티브 데이터 시각화를 인터페이스를 이용하여 만들 수 있습니다. 이 툴은 언론사에만 유용한 게  아니라, 지속적으로 업데이트해야 하는 데이터 시각화가 필요할 때나, 보고서 등을 위한 간단한 차트를 만들어야 할 때 등 다양한 목적으로도 사용이 가능합니다. 본인에게 맞는 목적으로 어떻게 이 툴을 사용하면 좋을지 한번 생각해보고 시도해보면 좋을 것 같습니다.






자세한 아래의 내용은 요즘IT 원문에서 무료로 확인할 수 있습니다.

첫째, 데이터 올리기

둘째, 데이터 정리하기

셋째, 데이터 시각화 업데이트하기

넷째, 텍스트 업데이트하기

다섯째, 인터랙티브 시각화 발행하기


https://yozm.wishket.com/magazine/detail/2011/




매거진의 이전글 위워크(WeWork) 피치덱에 쓰인 차트 개선하기
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari