블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2015.08.20 18:05 D3.js

올 하반기는 D3.js를 이용한 차트 라이브러리 만들기를 주된 작업으로 잡고 있다. 데이터 시각화를 위해 SVG를 자유자재로 다루기 위해 D3.js를 심도있게 이해하는 것이 어느 때보다 필요하기 때문이다. AngularJS/React/Meteor 는 데이터 시각화 서비스를 개발하기 위한 기술로 익히고 있다. 마이크 보스톡의 튜토리얼 레퍼런스에 나온 내용중 좋은 기사를 실습 요약한다. 





준비하기 

  

테스트를 위해 로컬에서 하지 않고 JSBin 서비스를 이용한다. GitHub 계정으로 로그인을 하고 자신이 원하는 테마(Theme)를 아래와 같이 설정할 수 있다. Monokai와 Sublime 키바인딩, FontSize 11로 설정을 했다. "Add library"에서 "D3 3.x" 를 선택하면 HTML에 자동으로 추가된다. 





엘러먼트 선택


D3는 jQuery의 Selector 처럼 Selection(셀렉션)을 통해 문서를 접근할 수 있다. 그리고 선택된 셀랙션에 대해 메소드 체이닝(Chaining Methods)를 통해 제어를 할 수 있다. 체이닝의 이점은 var 를 사용하지 않아도 되고 코드를 간결하게 유지할 수 있다. 

Let's Make Bar Chart on jsbin.com





차트 만들기 


HTML로 직접 바차트를 만들 수 있지만 D3를 이용해 어떻게 만드는지 보자. 

JS Bin on jsbin.com


코드의 순서는 다음과 같다. 

- var chart  = d3.select('.chart') : selector를 이용해서 Chart container를 선택한다. 

- var bar = chart.selectAll('div') : 데이터 조인 (data join)을 위해 셀랙션(selection)을 초기화 한다. 데이터 조인은 데이터 변경에 따라 엘러먼트를 생성, 업데이트, 삭제할 수 있는 것이다. (자세한 사항은 "Thinking with joins"를 참조한다)

- var barUpdate = bar.data(data) : selection.data를 통해 데이터를 셀랙션과 조인(join)한다. 

- var barEnter = barUpdate.enter().append('div') : 'div' 태그가 .chart 안에 존재하지 않기 때문에 barUpdate는 일어나지 않는다. 없을 경우 새로운 데이터에 대한 임의위치(placeholder)를 만들어 주기 위해 enter()를 호출한 후, 임의위치에 append('div')를 통해 div 태그를 신규 생성한다. 

- barEnter.style('width', ....) : 신규 생성된 div에 대한 스타일을 설정한다. D3에서는 attr(), style(), property()를 통해 엘러먼트를 설정할 수 있다. 

- barEnter.text(...) : 레이블을 설정한다. 





스케일 맞추기 


위의 소스를 보면 width에 대해 10 상수값이 쓰였다. 실제값을 정의역값이라하고 domain(도메인)이라하며, 10을 곱하여 나온 변경된 값을 치역(range)값이라 한다. 수치에 대한 일정한 스케일(Scale)을 만들어 주는 기능이 D3에서는 linear scale 이다. x에 대한 스케일을 만들어 보자.

JS Bin on jsbin.com





SVG를 사용해 만들기 


위에 소스는 HTML을 통해 만들었지만 SVG(Scalable Vector Graphics)를 이용해 표현해 보도록 한다. SVG를 사용하면 네이티브 레벨에서 다양한 모양을 만들어 낼 수 있다. HTML에 <!DOCTYPE html> 태그를 최상단에 넣어주고 사용할 수 있다. SVG는 HTML의 일반 스타일이 아닌 다른 스타일 명을 쓴다. 예로 background-color는 fill로 쓴다. SVG 프로퍼티 스펙을 참조한다. 좌표는 top-left 코너에서 시작한다. SVG로만 차트를 표현한 예이다. 

JS Bin on jsbin.com


- transform을 이용해 크기의 절대좌표값으로 translate(x, y)를 통해 이동을 하고 있다. 

- g 그룹 논리 태그를 통해 하위에 SVG rect으로 사각형을 표현한다. 

- text 태그를 통해 레이블을 설정한다. 


D3를 이용해 다시 표현해 보자. g 셀랙션은 data 배열 6개 만큼이 생성되어 rect과 text 태그를 통해 바차트를 그린다. 

JS Bin on jsbin.com


- x 스케일을 만든다 

- svg 의 크기를 결정한다 

- svg안에 g가 들어가므로 enter selection을 통해 추가하고 transform으로 g 위치를 옮긴다. 

- var bar 값은 data 값 수 만큼의 g 배열을 리턴 받아 rect과 text를 설정한다. rect과 text는 g로 부터 data 값을 받아 사용한다. 





데이터를 불러와서 차트그리기


D3는 TSV(Tab-seperated values)나 CSV(Comma-seperated values)로 파일 형식을 읽어와서 JSON으로 변환해 사용할 수 있다. d3.csv API를 참조한다. 테스트를 위해서 GitHub에 별도 저장소를 하나 만들고 data.tsv 파일을 하나 만든다. (탭으로 구분)

name value

Locke 4

Reyes 8

Ford 15

Jarrah 16

Shephard 23

Kwon 42


GitHub에 파일을 만들고 파일을 선택하고 "Raw" 버튼을 클릭하면 상단에 접근 주소가 나온다. 

예) https://raw.githubusercontent.com/mobiconsoft/d3_practice/master/data.tsv

사용할 Raw Data 주소이다. 


JSBin에서 TSV 파일을 호출해 보자. 

JS Bin on jsbin.com


- 데이터의 갯수를 모르기 때문에 호출후 x.domain 정의역 값을 설정한다. 

- 데이터는 [{name: 'Locke', value: 4}, ....] 와 같이 데이터가 오브젝트이므로 function(d) { return d.value; } 값을 사용한다. 

- tsv 호출시 값에 대한 컨버젼을 하지 않고 전부 string으로 취급하므로 type 펑션은 숫자로 변환하는 유틸이다. 





컬럼 차트로 전환하기 


수평 바차트를 수직 컬럼 차트로 변환해 보자. X축은 이름을 표현하고 Y축은 값을 표현할 것이다. X축과 같이 문자 알파벳으로 표현될 경우는 Ordinal 스케일을 사용해야 하고 치역의 값을 수량적으로 할 수 없기 때문에 자동으로 맞춰주는 rangeBands 또는 rangePoints 를 사용한다. rangeBands/Points는 각 시리즈의 넓이를 의미하고 시르즈(바)간의 padding을 지정해 주고 싶다면 rangeRoundBands를 통해 파라미터를 설정할 수 있다. 

JS Bin on jsbin.com


- X축은 이름이기 때문에 Ordinal 스케일이다. 

- bar의 X 스케일 만큼 이동하고, rect의 y점을 지정 후 그린다.

- x.rangeBand()는 바의 넓이를 자동으로 계산해 넘겨준다. 





축 추가하기 


컬럼 차트만 그려지니 썰렁하다. 축을 그려보자. D3는 축을 만들 수 있도록 d3.svg.axis() API를 제공하고, 축의 방향을 설정한 후 기존에 생성한 x, y Scale을 설정한다. 축에 스케일 설정을 하고 SVG의 g 그룹에 축을 설정할 때는 selection.call API를 사용한다. 축을 설정하면 <g class="y axis"> 또는 <g class="x axis"> 클래스가 자동 설정된다. 해당 값은 사용자가 아래와 같이 수정할 수 있다. 

<style>

.bar {

  fill: steelblue;

}


.axis text {

  font: 10px sans-serif;

}


.axis path,

.axis line {

  fill: none;

  stroke: #000;

  shape-rendering: crispEdges;

}


.x.axis path {

  display: none;

}

</style>


JSBin 코드를 보자.

JS Bin on jsbin.com


- SVG 넓이 안에 들어가는 차트를 위한 마진을 설정한다. 

- x, y 스케일을 구한다. 

- x, y 축을 스케일을 적용해 구한다. 

- 차트 영역을 설정하고 차트 셀랙션을 생성한다 

- 데이터가 들어오면 x, y 스케일에 대한 정의역(domain)값을 설정한다. 

- x, y 스케일에 대한 정의역 값이 설정된 후에야 차트 g 그룹에 x, y Axis를 설정할 수 있다. 정의역값이 설정되기 전에 축 설정이 되면 축의 Tick 값이 표현되지 않는다. 

- .bar 클래스를 선택하고 데이터를 조인하면 임의영역(placeholder)가 생성되고, 여기에 rect을 append하여 컬럼을 기존처럼 그린다.  




<참조>


- 원문 : Let's Make a Bar Chart  (보스톡의 소스)   

- SVG 스펙


신고
posted by peter yun 윤영식

차트는 많은 정보를 내포한다. 사람들끼리 차트를 공유하고 싶을 경우 보통은 엑셀에서 작업을 하고, 보고서를 MS-Word 또는 HWP로 만들어서 메일을 보내거나 채팅창으로 파일을 전송하게 된다. 여러 복잡한 과정을 통하여 자신의 데이터에 대하여 의미를 내포한 차트로 공유하기까지의 과정이 너무 길고 많은 시간이 소요된다. 그리고 지속적인 관심을 가진 데이터라면 이들에 대한 히스토리는 개별 문서마다 보관이 될 것이고, 합쳐서 보고자 할 때 번거로운 재작업을 거쳐야 한다. 우리가 사용하는 페이스북이나 기존 SNS 사용방식처럼 데이터를 시각화한 차트에 대해 공유하여 볼 수 있고, 코멘트를 달고 관련 차트끼리 연결지어서 더 낳은 정보로 만들어 갈 수 있으면 얼마나 재미있을까? 관련성있는 차트들을 모아 보면서 회의에 사용하거나 바로 스마트 기기에서 확인함으로써 업무 효율화를 가져올 수도 있다


이러한 가치하에서 Smart Visualization에 대한 목업화면을 그려 보았다. 



Share Place 

  - Search 입력에 어느 그룹, 코멘트, 의견등의 내용을 검색하여 관련있는 차트 목록을 볼 수 있다

  - 공유하는 공간이다. 차트별로 상단에 자신의 것인지, 어느 그룹과 공유되는 것인지 보이고 등록 시간이 나온다 

     Place : personal 또는 group-01

  - 상단 Place 또는 시간을 클릭하면 해당 차트에 대한 상세 내역을 보여주는 화면이 나온다 

  - 차트 하단에는 해당 차트에 대한 Comment와 관련 차트(Related Chart)를 연결지을 수 있다 

  - 상단 우측에는 현재 채팅진행중이 확인되지 않은 내역 건수와 메세지 건수를 Badge 로 보여준다



Register Place

  - 일정 형식의 .csv 파일을 업로드한다 

  - 해당 차트의 Place (속할 그룹)과 차트 종류를 선택하고 등록한다 



Slide Menu

  - "Smart Visualization" 좌측의 아이콘을 클릭하면 메뉴가 나온다 

  - 개인 또는 그룹을 검색하여 친구맺기를 할 수 있고, 상대가 응답을 해주면 상호 연결이 되어 Share Place에서 차트를 공유한다 

  - 기존 대화목록이나 메세지를 열람할 수 있다

  - 메뉴 상단에 "사용자"검색이나 "그룹" 검색이 들어가겠다

데이터 시각화 차트의 공유에 벗어나는 레이아웃은 제거할 것이다.



* 개념이 유사한 사이트

  https://plot.ly/


  https://infogr.am/


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.08.06 19:34 D3.js

D3.js 는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다. HTML5의 SVG(Scalable Vector Graphic) 을 통하여 다양한 화면 해상도에서도 깨짐없는 Visualizing이 가능하다. D3.js를 익히기 위한 과정을 정리해 본다. 





개념 익히기 


   - 일반적인 사항에 대하여 알자

    + D3 는 웹표준기술을 이용해 데이터를 비쥬얼라이징할 수 있는 라이브러리다. 

    + D3.js 창시자인 엠보스톡의 워크샵을 통해 개념을 잡자

    + mbostock의 작업내역 감상하기


  - 기본적인 접근 방법에 대한 생각

  - 중요한 6가지 개념에 대해서 설명한다

    + Selectors : 기초이해Selection의 동작원리

    + Data & Joins(Enter, Update, Exit) : Thinking with Joins, Update/Enter/Exit에 대한 이해, 코드로 이해하기, 다시 기본부터 이해하기

    + Scales

    + Axis

    + Shapes

    + Layouts 

    




초급 학습하기 


  - http://www.dashingd3js.com/ 

    + 직접 실습한 내용 [1], [2], [3], [4]

    + D3.js 의 중요성 -> D3.js 안에 구현된 SVG API사용 -> Scale -> Axis 만들기

  - http://misoproject.com/d3-chart/tutorials/quickstart 

    + 순서대로 차트 만들어 나가기 

  - http://christopheviau.com/d3_tutorial/

    + Try D3 now -> 페이지 위쪽에 있는 도형모양을 클릭해 보라

    + 따라하며 기초개념 잡기   

  - http://www.youtube.com/user/d3Vienno 

    + 동영상 강좌를 따라한다

    + dashingd3js.com 과 유사한 과정이지만 좀 더 재미난 것들을 다룬다

    + 따라서 dashingd3js.com 을 다 본후 따라해 본다 




중급 학습하기 


  - D3.js 한글화 문서

    + 한글화 API

  - http://www.recursion.org/d3-for-mere-mortals/

    + d3 차트 만드는 기술 & 디버깅  

  - http://www.d3noob.org/

    + d3 차트 만들기 Tip & Tricks

  - D3로 구현된 다양한 Chart와 Visualization 사이트

  - Dimensional Charting Framework

    + Chart간의 interactive 표현에 능함

 


  - http://nvd3.org/ 에서 D3.js 를 가지고 만들어진 차트를 살펴보자

    + 실시간 코딩으로 차트 만들어 보기





고급 학습하기 


  - D3 Tip & Tricks 실습하기 : 구글링하면 PDF자료 얻을 수 있다 (d3 tips and tricks pdf)

  - D3.js 위키의 튜토리얼을 참조하자.

  - D3.js를 이용해 자신만의 차트 컴포넌트를 만든다면 다음의 가이드를 따른다. 

    + Resuability Chart를 만들기 개념 :  Repeatable, Modifiable, Configurable, Extensible 

    + 오픈소스 차트를 연구하자 : xCharts, C3.js


  - Functional Reactive Programming(FRP)와 D3.js의 관계도 살펴보면 어떨까?

    + Bacon.js와 D3.js 사용예


  - 어차피 서버에서 데이터를 받아서 화면 처리를 해야 하므로 웹앱프레임워크와 연동해 보자

    + AngularJS & D3.js 연동 예, 다른 연동 예 

    + D3.js를 Angular Directive로 만들어 놓는 OSS

  - Socket.IO를 통하여 System Realtime Monitoring 하기  (샘플소스)

  - Node.js + Express + Socket.io + D3.js 구성하기  (소스)


 ** 중급, 고급은 포스팅이나 소스를 통하여 스스로 익히는게 답!




<참조>

  - D3 강좌

  - Stanford 대학교 Visualization Group

    + Visualization에 대한 논문을 볼 수 있다. 내가 해보고 싶은 연구분야

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.08.02 16:43 D3.js

만들고 있는 솔루션이 기본 Highcharts를 사용하고 있다. 다른 Javascript Chart & Data Visualization Framwork에는 어떤 것들이 있는지 찾고 정리해 본다



1. Chart

  - Chart를 표현하는 다양한 Javascript가 존재한다

    + 11-javascript-toolkit-for-creating-charts-and-graphs/

  - jqWidgets : http://www.jqwidgets.com/

    + 다양한 차트와 컴포넌트를 제공한다 with jquery

  - jQuery Top 5 chart component

    + 5 Top Chart

  - Morris.js : http://www.oesmith.co.uk/morris.js/

    + 깔끔한 UI가 인상적이다

    + SVG 사용

  - xChart.jshttp://tenxer.github.io/xcharts/

    + Morris.js 와 유사하지만 좀 더 dynamic 차트 

    + SVG 사용

  - Envision.js : http://humblesoftware.com/envision/

    + 모바일에서 보여주기 좋다

    + 실시간 라인차트 존재

    + Canvas 사용

  - flotr2 : http://humblesoftware.com/flotr2/

    + 다양한 차트 종류 제공

    + CSS 디자인을 다시 손봐야 highchart 수준이 될듯하다 

    + Canvas 사용

  - Dygraphs : http://dygraphs.com/

    + 다양한 라인차트 제공

    + Canvas 사용

  - smoothie : http://smoothiecharts.org/

    + envision.js 와 유사함

    + 나름의 옵션을 가지고 있음. option ui builder 제공

    + 실시간 라인차트 제공

    + Canvas 사용

  - Rickshaw : http://code.shutterstock.com/rickshaw/

    + d3.js 프레임워크를 기반으로 chart를 제공

    + 예제가 안보임 (버그가 있는듯...)

    + SVG 사용

  - NVD3.js : http://nvd3.org/

    + rickshaw와 같은 d3.js 를 사용한 chart를 제공

    + SVG 사용

  - CanvasXpress : http://www.canvasxpress.org/

    + Canvas 사용

  - g.Raphaeljshttp://g.raphaeljs.com/

    + Raphael.js 프레임워크를 이용한 차트

    + SVG & VML 사용

  - jQuery Sparkline : http://omnipotent.net/jquery.sparkline/#s-about

    + Canvas 사용



2. Javascript Data Visualization Framework

  - Framework 선택시 가장 중요한 것은 Canvas 로 할 것인가? SVG로 할 것인가이다

    + Canvas or SVG 각각 특징

    + Canvas & SVG 비교

A Comparison of Canvas and SVG

Canvas

SVG
Pixel-based (canvas is essentially an image element with a drawing API) Object Model-based (SVG elements are similar to HTML elements)
Single HTML element similar to <img> in behavior Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created and modified programmatically through script Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinates Event model/user interaction is object-based at the level of primitive graphic elements—lines, rectangles, path s
API does not support accessibility; markup-based techniques must be used in addition to canvas SVG markup and object model directly supports accessibility




  - Raphael, Pager, Processing 기능 및 성능 비교 

    + 많은 양의 데이터를 실시간으로 표현하고자 한다면 Canvas,

       데이터량이 적고 분석이나 상호작용하는 차트를 원하면 SVG를 선택한다

    + Raphael.jshttp://raphaeljs.com/

       > SVG & VML 사용

       > NHN Chart 만들기 SlideShare

    + Pager.js : http://paperjs.org

       > Canvas 사용

       > Data Visualiztion 전용 프레임워크

       > 게임제작 또는 동적 차트를 만들기 좋음

       > 지돌스타님의 소개

    + Processingjs : http://processingjs.org/

       > Canvas 사용

       


  - D3.js : http://d3js.org/

    + SVG 사용

    + Data Driven Document = D3

    + D3로 구현된 다양한 Chart와 Visualization 사이트

  - DC.js : http://nickqizhu.github.io/dc.js/

    + D3.js 와 Square의 Crossfilter를 이용

    + Dimensional Charting Framework 

    + 차트끼리의 Interactive를 통하여 빠른 조회를 제공

    + 통계 조회화면 만드는데 적합

  - InfoVis : http://philogb.github.io/jit/index.html

    + Interactive Data Visualization Toolkit

    + Canvas 사용

  - Protovis : http://mbostock.github.io/protovis/

    + Graphical Visualization Toolkit

    + SVG 사용



3. Dashboard & UI Builder

  - 차트를 통하여 나오는 결과물은 대시보드!

    + Javascript Dashboard Framework

  - JointJS : Diagram을 그리는 Javascript framework

    + http://www.jointjs.com/

  - Draw.io : SVG를 이용한 draw builder

    + https://www.draw.io/

  - Tiggzi.com : https://appery.io/

    + 모바일 웹화면을 만드는 SaaS 기반 UI Builder

  - ZingChart : http://www.zingchart.com/builder/

    + Web 기반 Chart Builder

  - 01.org : https://01.org/rib/

    + Rapid Interface Builder

    + 모바일 웹화면 만들기 : https://01.org/rib/online/ (크롬만 가능)

  - Froont : http://froont.com/

    + 웹사이트를 만들어 주는 UI Builder



<참조>

  - 10-javascript-canvas-frameworks

  - 20-popular-javascript-charts-graphics-library

  - 13-useful-javascript-solutions-for-charts-and-graphs

  - 10-awesome-data-visualization-tools-for-the-web

  - 20 best tools data visualization

  - 지돌스타님의 Canvas framework 소개

  - D3 창시자 mbostock blog

  - D3로 차트 만드는 방법

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next