낙 구

마이다스아이티

퍼블리셔의 시각

으로 본 웹문서

Data Visualizing데이터 시각화

데이터시각화 ? 라이브러리 ?

세세한 컨트롤 수정가능( 당연하지만 ) 깊이 들어갈수록 손이 많이감 .

SVG 기반Ie8 이하 지원 X데이터 기반 동작

VML 기반Ie8 이하 지원 O

브러시 와도 같은 개념

SVG 기반Ie8 이하 지원 X데이터 기반 동작

VML 기반Ie8 이하 지원 O

브러시 와도 같은 개념

데이터 기반 동작 ?

D3 에서 제공하는 기능

• Selections• Transitions• Working with Arrays ( data array han-

dling )• Math• String Formatting• Colors• Scales…etc…https://github.com/mbostock/d3/wiki

D3 의 동작 원리

#1 : 개별 컨트롤

목표영역 .append( 개체 ).attr( 속성 )

#1 : 개별 컨트롤

목표영역 .append( 개체 ).attr( 속성 ) └ d3.select() 로 선택 : svg, g, text 등등

#1 : 개별 컨트롤

목표영역 .append( 개체 ).attr( 속성 ) g, rect, circle, text, tspan 등등 ┘

#1 : 개별 컨트롤

목표영역 .append( 개체 ).attr( 속성 )svg 지원 속성 ( x, y, fill, stroke, text-anchor 등 ) ┘

#2 : 데이터기반 컨트롤

목표영역 .data( 데이터 ).enter()

#2 : 데이터기반 컨트롤

목표영역 .data( 데이터 ).enter()└ d3.selectAll() 로 선택 : 선택된 범위 내에서 동작

#2 : 데이터기반 컨트롤

목표영역 .data( 데이터 ).enter()데이터배열에 length 가 늘어나면동작 ┛

#2 : 데이터기반 컨트롤

목표영역 .data( 데이터 ).exit()데이터배열에 length 가 줄어들면동작 ┛

#2 : 데이터기반 컨트롤

저장대상 = 목표영역 .data( 데이

터 ).enter()└ 계속해서 같은 목표영역 내에서 추가동작 지정 가능

#1. Donut Graph도넛 그래프 : D3pie, 왜곡 ,

함수

PIE

PIE

#2. Stick Graph막대 그래프 : D3scale, rangeBand

Range : 실제 pixel

Domain : 데이터의 값

10pixel ~ 1000pixel

Domain : 데이터의 값

RangeBand

#3. Line Graph꺾은선 그래프 : D3area, D3line

# 마치며…

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0

http://d3js.org/

QnA

조금

감사합니다 .

조금