탐색적 데이터 분석 방법, 움직이는 시각화 차트로!
데이터 시각화 차트에 적용되는 인터랙티브 기능 3가지 알아보기
Interactivity, 지금 눈에 보이는 것 그 이상을 경험하게 하라!
일반적인 보고서에 포함된 시각화 차트를 생각해볼까요? 이미지 형태의 시각화 차트에서 우리가 알 수 있는 정보는 명확하고 간단합니다. 그러나 한편으로는 이미지 그 자체로 알 수 있는 데이터의 의미, 그 이상을 알기는 어렵다는 한계를 갖습니다. 반면, 인터랙티브 데이터 시각화 차트는 사람들이 차트 영역 위에 마우스를 오버하거나, 특정 항목을 클릭하는 등의 사용자 액션에 따라 차트의 시각적 패턴을 달리 표현합니다. 각기 다른 패턴을 보이는 시각화 차트를 통해 사람들은 자신만의 데이터 인사이트를 찾을 수 있습니다. 인터랙티브 데이터 시각화 차트는 데이터 분석을 위한 고도의 기술이 없는 사람들도 자유롭게 데이터를 탐색할 기회를 제공합니다.
데이터 시각화에서 인터랙티브가 적용되는 방식은 크게 세 가지- 필터링(Filtering), 하이라이팅(Highlighting), 어노테이팅(Annotating) -로 나눌 수 있습니다. 이를 사례를 통해 자세히 알아보도록 하겠습니다.
1. 보고 싶은 데이터만 골라보는 방법, 필터링(Filtering)
시각화 차트에서 데이터 필터링은 사용자가 어떤 방법을 통해 특정한 기준을 선택하면, 해당 기준의 데이터만 차트에 표현하는 것을 의미합니다. '어떤 방법'이란 시각화 차트에서 사용자가 데이터를 필터링할 수 있도록 하는 요소를 의미하는데, 일반적으로 차트 영역 밖에 데이터 항목을 골라서 선택할 수 있는 콤보 박스, 체크 박스 등을 따로 두고 선택하도록 합니다. 사용자는 여기에서 보고 싶은 데이터 항목을 선택하여, 해당 항목의 데이터만 시각화해서 볼 수 있습니다. 뿐만 아니라 차트 영역 내에 특정 항목 요소를 클릭하거나, 해당 요소에 마우스를 오버할 경우 데이터를 필터링하여 시각화 결과물로 보여주는 경우도 있습니다. 별도의 차트를 그리지 않고 하나의 차트 안에서 다양한 기준에 따른 시각화 패턴을 확인할 수 있다는 것이 장점입니다.
사례 1 U.S. Gun Killings in 2010, 2013 (출처 : PERISCOPIC)사례 1은 미국에서 발생한 총기로 인한 사망 사건 데이터를 시각화한 콘텐츠입니다. 이 콘텐츠에서 데이터를 필터링하는 방법은 차트 영역 밖에 위치한 체크 박스에서 데이터 필터링 기준을 클릭하여 선택하는 것입니다. '성별', '연령별', '지역별', '총기 종류' 등의 조건의 세부 조건을 선택해 한 개 이상의 데이터 필터 기준을 적용할 수 있습니다.
특정 항목의 체크 박스를 클릭해 데이터 필터 조건을 선택하면, 해당 항목 기준으로 시각화 차트에 표현할 데이터가 달라집니다. 데이터가 달라졌으므로 차트에 표현된 시각적 패턴도 달라집니다. 우리는 각기 다른 시각적 패턴을 근거로 인사이트를 도출합니다. 인터랙티브 데이터 시각화 차트를 활용하면, 고도의 데이터 분석 기술이 없더라도 간단한 클릭만으로 데이터 분석의 세부 조건을 선택하고, 바꾸어 나가면서 다양한 인사이트를 도출할 수 있습니다. 탐색적 데이터 분석을 위해 시각화 차트를 활용하는 방법이라고도 할 수 있습니다.
사례 2 NFL players : height & weight over time (출처 : Noah Veltman)사례 2는 미국 프로 미식축구 선수의 몸무게와 키 데이터를 시각화한 차트입니다. 이 차트에서 데이터를 필터링하는 기준은 '연도' 입니다. 따라서 연도별 데이터 시각화 차트의 패턴이 다르게 나타납니다. 특히 이 차트의 경우 연도별로 서로 다른 시각적 패턴을 보이는 개별 차트를 연속적으로 보여줍니다. 하단의 플레이 버튼을 클릭해 사용자가 차트의 화면을 조정할 수 있도록 하는데요! 이를 두고 시각화 차트에 애니메이션 효과를 적용하였다고 할 수 있습니다.
2. 따로 또 같이 직관적으로 볼 수 있는 방법, 하이라이팅(Highlighting)
하이라이팅은 시각화 차트 영역 중 일부 영역이 시각적으로 강조되게 하는 것입니다. 일반적으로 차트 중 선택된 영역을 제외하고 남은 시각화 요소의 컬러를 흐리게 하여 특정 영역이 강조되도록 합니다. 사용자가 차트 영역 중 일부 영역에 마우스를 오버하거나, 클릭하는 액션에 따라 하이라이팅 기능이 적용됩니다. 필터링의 경우 시각화 차트의 패턴 자체가 변화하지만, 하이라이팅은 시각화 차트의 본래 모습은 유지되면서 독자가 인터랙션을 한 부분만 강조되는 것이 차이입니다.
사례 3 Noble Laureates (출처 : Reuters Graphics)사례 3는 노벨 수상자의 분포를 국가별, 분야별로 시각화한 콘텐츠로 사용자의 인터랙션에 따라 차트 내 항목 요소의 색을 다르게 표현하는 하이라이팅의 대표적인 사례라고 할 수 있습니다. 차트 위 상단에 위치한 체크 박스에서 사용자가 특정 조건을 선택하면, 차트 영역에서는 조건에 해당하는 항목을 제외하고 나머지 원(circle)의 명도가 낮아지면서 연하게 표현됩니다. 따라서 사용자는 자신이 선택한 조건의 데이터만 시각적으로 강조된 상태로 한눈에 빠르게 확인할 수 있습니다.
사례 3가 하나의 차트 안에서 하이라이팅 기능을 활용한 사례라면 사례 4, 5은 2개의 차트가 연동된 시각화 콘텐츠에서 하이라이팅 기능을 적용한 사례입니다. 먼저 사례 5를 살펴볼까요?
사례 4 How could the age structure of the population vary? (출처 : Office for National Statistics)사례 4는 영국 내 두 지역의 인구 분포를 시각화한 피라미드 차트입니다. 피라미드 차트 영역에서 특정 연령을 의미하는 행에 마우스를 오버하면 두 개의 피라미드 차트 위에 불투명한 회색 선이 나타나는 것을 볼 수 있습니다. 회색 선 하나로 두 지역의 데이터를 한눈에 파악할 수 있습니다. 마우스 오버뿐만 아니라 드래그 앤 드롭으로 연령 범위를 선택해 하이라이팅 할 수도 있습니다.
특히 이 차트의 경우 하이라이팅 기능도 인상적이지만, 앞서 살펴본 데이터 필터링 기능이 함께 적용된 부분도 인상적입니다. 차트 최상단의 드롭박스를 클릭하면 지역을 선택할 수 있는데요! 지역 기준으로 데이터를 필터링할 수 있다는 의미입니다. 그뿐만 아니라 차트 영역에서 마우스 오버를 하거나 드래그 앤 드롭으로 하이라이팅 기능을 적용하면 그 위의 막대 차트의 데이터가 필터링 되는 것을 볼 수 있습니다. 인터랙티브 데이터 시각화 차트는 데이터 필터링과 하이라이팅 기능을 종합적으로 제공해 사용자가 자유롭게 데이터를 탐색할 수 있도록 합니다.
사례 5 Workers' Compensation Reforms by State (출처 : Propublica)이어서 사례 5을 살펴봅시다! 미국 주별 근로자 보상 개혁 현황을 시각화한 인터랙티브 시각화 콘텐츠입니다. 콘텐츠 내 모든 시각화 차트 - 연도별 지도 시각화, 히트맵 차트 -가 미국 주(지역)를 기준으로 연동되어 있습니다. 따라서 사용자가 '주' 정보를 기준으로 한 번 인터랙션 할 경우 모든 차트에 동시에 효과를 적용할 수 있습니다.
이 콘텐츠에서 데이터를 하이라이팅하는 방법은 크게 2가지가 있는데, 첫 번째는 콘텐츠 최상단의 탭을 클릭하는 것입니다. 근로자 보상 개혁 수준을 선택할 수 있는데, 특정한 탭을 선택하면 같은 수준에 해당하는 지역만 하이라이팅되는 것을 볼 수 있습니다. 또 'see them all' 버튼을 클릭해 하이라이팅 효과를 해제할 수도 있습니다.
두번째는 차트 영역에서 특정 지역을 의미하는 시각화 요소 위에 마우스 오버를 하는 것입니다. 이 경우 연동된 모든 차트의 해당 항목 데이터를 표현한 시각화 요소의 겉에 검은색 테두리 선이 나타나면서 데이터가 하이라이팅되는 것을 볼 수 있습니다. 이와 같은 인터랙션을 통해 사용자는 특정 주의 데이터가 각 차트에서 어디에 있는지 일일이 찾아보지 않아도, 시각적으로 강조되는 부분을 통해 한 번에 데이터를 파악할 수 있습니다.
3. 시각화에 글자를 더하는 방법, 어노테이팅(Annotating)
어노테이팅은 시각화 차트 영역 내 글자를 표기하는 것을 의미합니다. 시각화 차트를 보고 발견할 수 있는 데이터 인사이트를 직접 차트 영역 내 표기하여 빠르게 데이터의 의미를 파악할 수 있도록 하는 데 효과적이기 때문입니다. 차트 영역 내 글자를 표기하는 방법 외에도 사용자가 차트 영역 내 특정 요소 위에 마우스를 오버하거나 클릭했을 때 나타나도록 하는 방법이 있습니다.
사례 6 History through the president’s words (출처 : The Washington Post)사례 6의 경우 차트의 시각화 요소(버블)에 마우스를 오버하면 글자가 포함된 툴팁이 나타나도록 하여 시각화 차트를 보는 사람이 부가 정보를 파악할 수 있도록 했습니다. 각 요소가 표현하는 데이터가 무엇인지, 이를 통해 우리가 무엇을 알 수 있는지 쉽게 정보를 알 수 있습니다.
지금까지 데이터 시각화 차트에서 적용되는 대표적인 인터랙티브 기능 3가지에 대해서 살펴보았습니다.
데이터 필터링은 분석 대상의 데이터 조회 기준을 선택하도록 하는 것으로, 사용자는 고도의 데이터 분석 기술 없이도 다양한 조건으로 데이터를 탐색하고 인사이트를 도출할 수 있습니다.
하이라이팅은 데이터 시각화 차트 중 특정 부분을 시각적으로 강조하는 것으로 전체 데이터의 패턴뿐만 아니라 사용자가 관심 있는 데이터 항목을 빠르게 찾아서 볼 수 있도록 합니다. 특히 여러 차트가 연동된 시각화 콘텐츠에서의 하이라이팅 기능은 여러 데이터 정보를 한 번에 빠르게 파악할 수 있도록 하는 것이 장점입니다.
마지막으로 살펴본 어노테이팅은 데이터 시각화 차트에 데이터 해석에 도움이 되는 글자를 표기한 것으로 사용자가 데이터의 의미 정보를 쉽게 이해할 수 있도록 돕습니다.
인터랙티브 데이터 시각화, 여러분은 어떤 생각이 드셨나요? 흔히 인포그래픽과 데이터 시각화의 차이를 묻는 질문에 대한 답은 '인터랙티브'에 있습니다. 인포그래픽과 달리 데이터 시각화는 인터랙티브 기능을 바탕으로 사용자가 데이터를 쉽게 탐색하고 분석하여 인사이트를 도출 할 수 있도록 돕습니다. 많은 사람들이 보는 데이터 시각화 대시보드에서 인터랙티브 기능이 강조되는 이유도 여기에 있습니다.
이번 글을 통해 누구나 데이터를 활용하고 분석할 수 있도록 하는 데이터 시각화에 많은 분이 공감하셨길 바라며, 이번 글을 마무리합니다:)
참고 자료
도서 『Data Visualisation - A Handbook for Data Driven Designs』
* 이 글의 원문 출처는 뉴스젤리 블로그 '탐색적 데이터 분석 방법, 움직이는 데이터 시각화 차트로!' 입니다.
