Upload
-
View
7.659
Download
0
Embed Size (px)
Citation preview
낙 구
마이다스아이티
퍼블리셔의 시각
으로 본 웹문서
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
조금
감사합니다 .
조금