D3js로 구현할 수 있는 다양한 차트와 예제

최근 프로젝트에서 웹에서 차트를 그릴 일이 있어 javascript library들을 이것 저것 찾아보고 써본적이 있다.

그중 가장 돋보이던 것이 D3.js 였는데, 그동안 항상 보아오던 그래프들 이외에도 정말 다양한 형태의 차트들과 아름답기까지한 실제 적용 사례들을 하루종일 처다본적이 있었다.

지금 당장은 아니더라도 나중에 어딘가에 꼭 써먹을 수 있을 것 같아, 몇가지 차트와 예제들을 정리해 보기로 했다.

1. Box Plots

주식을 하는 사람들에게는 정말 친숙한 차트인것 같다.

Box Plots은 다섯가지의 통계 지표와 양적 분포를 한눈에 쉽게 파악 할 수 있도록 디자인된 그래프로 주식을 하는 사람들에게는 정말 친숙한 그래프인것 같다.

출력되는 정보를 보면 "최대값", "최소값", "평균값", "상위사분위수", "하위사분위수"를 표현할 수 있으며, 간혹 알 수 없는 원인으로 인해 튀는 값으로 인해 최소값이나 최대값의 신뢰도가 떨어지는 경우를 대비해 "튀는 값"들에 대한 디스플레이는 작은 원으로 따로 표시 할 수도 있다.

예제1: Box Plots이 실시간 변동되는 그래프 예제 링크

2. Bubble Chart

수치 데이터를 원으로 표현하는 그래프로 Bar Chart에 비해 데이터에 대한 수치적 표현력은 떨어지지만, 더 작은 공간에 더 많은 데이터를 표현 할 수 있다.

그리고 Bar Chart로 표현했을 때보다 조금 더 감성적으로 데이터를 표현 할 수 있어, 수치 데이터보다 감정적인 측면을 어필 하고 싶을 때 사용하면 좋을 것 같다.

예제2: Box Plots이 Bubble Chart 예제 링크

3. Bullet chart

Stephen Few라는 사람이 작은 공간에 풍부한 데이터를 출력하기 위한 디자인한 차트라고 한다.

전체범위와 분위를 바탕으로 목표치와 현재 달성치, 지난 달성치등을 표시하기에 적합한 차트로, 주로 매출 현황이라던가 프로젝트 진행 상황등을 표현하기에 적합한것 같다.

예제3: Bullet Chart가 실시간 변동되는 그래프 예제 링크

4. Chord Diagram

Chord Diagram은 그룹간의 Relationship을 직접적으로 표현 할 수 있는 그래프로 바로 이전 스템과 현재 스템 사이에서 그룹간에 어떤 변화가 있었는지를 직관적으로 표현이 가능하다. 이건 글로 설명하는 것 보다 직접 예제를 보는 것이 이해가 빠를 것 같다.

예제는 약 2,000명 정도의 스마트폰 유저를 대상으로 현재 사용중인 스마트폰의 제조사와 바로 이전에 사용하던 스마트폰의 제조사를 조사한 결과를 Chord Diagram으로 표현한 것이다.

예제4: Chord Diagram으로 설명하는 스마트폰 제조사간 점유율 추이 링크

5. Treemap

Treemap은 사각형 반복적으로 배치해서 데이터를 그룹핑해 보여주는 그래프로, 여러개의 그룹으로 구성된 구조나, 양파껍질 같은 스택 구조를 표현하기에 적합하다. 가장 쉽게 접할 수 있는 예제가 소프트웨어 스택인데, 위의 그래프는 Flare visulaization toolkit의 package정보를 Treemap으로 보여주는 그래프이다.

예제5: 실시간으로 변동하는 Treemap 예제 링크

6. Sunburst Partition

Treepmap을 원형(해바라기 모양)으로 표현한 그래프가 Sunburst Partition으로 Treemap 보다 시작적으로 더 아름다운 표현이 가능하다. 예제는 쇼핑몰의 웹페이지 Access Log를 바탕으로 사용자의 웹페이지 방문 패턴을 Interactive하게 표현했다.

예제6: Interactive한 Suburst Partition 예제 링크

7. Sankey Diagram

Sankey Diagram은 각 노드 사이의 데이터 흐름을 시각화한 그래프로 예제는 2050년 영국의 에너지 생산과 소비에 대한 예측치를 표현한 것이다. 그래프를 보면 2050년에는 에너지 원료중 핵이 가능 높은 비중을 차지하고 있는 것을 볼 수 있으며, 핵에너지는 모두 열로 변환되고, 변환된 열중 절반정도는 손실되며, 나머지는 거의 대부분 전기로 변환 되는 것을 알 수 있다.

예제7: 2050년도 영국 에너지 생산과 소비 예측 링크

8. The Wealth & Health of Nations

마지막 예제는 Data Visualization을 이야기 할 때 많이 소개되는 그래프로 1800년부터 2009년까지 각 나라의 경제력과 국민들의 평균 수명을 조사한 데이터를 그래프로 설명한 작품이다.

처음 페이지에 접근하면 1800년도부터 2009년까지 그래프가 차츰차츰 변화하면서, 각 나라의 경제력과 수명이 어떻게 변화해 가는지를 시각적으로 잘 표현하고 있다.

우리나라의 데이터를 집중적으로 따라가 보는 것도 재미 있을 것이다.(1800년부터 한국과 북한이 따로 표기되어 있는 점이 좀 이상하긴 하다.)

예제8: The Wealth & Health of Nations 링크

9. 마무리

종이에 이차원으로 표현되던 정적인 데이터가 IT 기술과 미디어의 발달에 힘입어 실시간으로 변화하는 데이터까지 표현할 수 있게 되면서, Data Visualization은 이제 하나의 예술 분야로 까지 인식되고 있는 것다.

비록 아직도 그래프를 그리라고 하면, Bar Chart, Line Chart 같은 클래식한 그래프들을 먼저 생각할 수 밖에 없는 비루한 미적 감각을 가지고 있지만, 이런 다양한 그래프와 작품들을 보다보면, 언젠가는 나도 멋지고 훌륭한 그래프를 그릴 수 있지 않을까 기대해 본다.

*참고사이트

D3.js - http://d3js.org

Mike Bostock - http://bost.ocks.org

VISUAL CINNAMON - http://www.visualcinnamon.com