정의
데이터 시각화(data visualization)는 데이터 분석 결과를 쉽게 이해할 수 있도록 시각적으로 표현하고 전달되는 과정 (https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%8B%9C%EA%B0%81%ED%99%94)
단계설명
정보 조직화 단계
- 사용자의 정보 인지에 관여
- 혼돈의 상태로 존재하는 데이터를 분류하고 배열하고 조직화하여 질서를 부여
정보 시각화 단계
- 사용자의 정보 지각에 관여
- 보다 효율적으로 정보 전달을 위해 시각, 청각, 촉각, 미각, 후각의 감각 기관에 최적의 자극을 제시하는 방법 제시
상호작용 단계
- 정보와 사용자 간의 상호작용 측면의 사용자 경험을 디자인
- 정보의 인지적 요인뿐만 아니라 지각적 요인을 함께 활용
- 정보 시각화 단계와 밀접하게 연동되면서 동시에 입력 기술의 특성도 함께 고려
관련자료
데이터시각화 업체
- 뉴스젤리 : 데이터 전략수립, 수집, 분석, 시각화 (http://blog.newsjel.ly/%EB%89%B4%EC%8A%A4%EC%A0%A4%EB%A6%AC/)
데이터시각화 툴
- 태블로 : http://www.tableau.com/
차트관련 js
기본적으로 사용하는 차트는 line, pie, bar, area, radar, map 정도
라이브러리내에는 차트의 종류는 달라지더라도 색은 비슷
html5 canvas 기반이 많음. ie구버전이 호환안되는 경우가 있을 수 있음.
대부분 반응형 웹 지원
어떻게 혼합해서 사용할지 고민필요
- d3.js https://github.com/mbostock/d3/wiki/Gallery
- googlechart https://developers.google.com/chart/
- chart.js http://www.chartjs.org/ - 기본
- chartist.js http://gionkunz.github.io/chartist-js/ - 기본
- n3chart http://n3-charts.github.io/line-chart/#/ - anguluar js기반
- emberchart http://addepar.github.io/ember-charts/#/ember-charts/overview - 흑백톤
- smoothiechart http://smoothiecharts.org/ - 동적
- zingchart http://www.zingchart.com/gallery/ - 다양, wordcloud, dashboard
- highcahrt http://www.highcharts.com/demo - 다양, 3d, gauge
- amchart http://www.amcharts.com/demos/
예제
지구환경관련정보 시각화
. energy, recycling, oceans, natural environment, drinikin water, global warming, wildlife, air pollution 에 대한 세계 도시 정보
. 기존 대시보드 형태를 탈피했다는점이 대표적인 특징
. 사용자 동작을 이끌만한 재미적인 요소가 많음
. include 되는 javascript가 50여개이상
. 속도가 느림, 버벅대는현상 있음.
댓글
댓글 쓰기