낙 구
마이다스아이티
퍼블리셔의 시각
으로 본 웹문서
Data Visualizing
데이터 시각화
데이터시각화?
라이브러리?
세세한 컨트롤 수정가능
(당연하지만) 깊이 들어갈수록 손이 많이감.
SVG 기반
Ie8 이하 지원 X
데이터 기반 동작
VML 기반
Ie8 이하 지원 O
브러시 와도 같은 개념
SVG 기반
Ie8 이하 지원 X
데이터 ...
데이터 기반 동작?
D3 에서 제공하는 기능
• Selections
• Transitions
• Working with Arrays ( data array handling )
• Math
• String Formatting
• Colors...
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
감사합니다.
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
Nächste SlideShare
Wird geladen in …5
×

[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱

8.574 Aufrufe

Veröffentlicht am

수학공식 없이 D3로 그리는 도넛, 막대, 꺽은선 그래프의 기초

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱

  1. 1. 낙 구 마이다스아이티
  2. 2. 퍼블리셔의 시각 으로 본 웹문서
  3. 3. Data Visualizing 데이터 시각화
  4. 4. 데이터시각화? 라이브러리?
  5. 5. 세세한 컨트롤 수정가능 (당연하지만) 깊이 들어갈수록 손이 많이감. SVG 기반 Ie8 이하 지원 X 데이터 기반 동작 VML 기반 Ie8 이하 지원 O 브러시 와도 같은 개념 SVG 기반 Ie8 이하 지원 X 데이터 기반 동작 VML 기반 Ie8 이하 지원 O 브러시 와도 같은 개념
  6. 6. 데이터 기반 동작?
  7. 7. D3 에서 제공하는 기능 • Selections • Transitions • Working with Arrays ( data array handling ) • Math • String Formatting • Colors • Scales …etc… https://github.com/mbostock/d3/wiki
  8. 8. D3의 동작 원리
  9. 9. #1 : 개별 컨트롤 목표영역.append(개체).attr(속성)
  10. 10. #1 : 개별 컨트롤 목표영역.append(개체).attr(속성) └ d3.select()로 선택 : svg, g, text 등등
  11. 11. #1 : 개별 컨트롤 목표영역.append(개체).attr(속성) g, rect, circle, text, tspan 등등 ┘
  12. 12. #1 : 개별 컨트롤 목표영역.append(개체).attr(속성) svg 지원 속성( x, y, fill, stroke, text-anchor 등) ┘
  13. 13. #2 : 데이터기반 컨트롤 목표영역.data(데이터).enter()
  14. 14. #2 : 데이터기반 컨트롤 목표영역.data(데이터).enter() └ d3.selectAll() 로 선택 : 선택된 범위 내에서 동작
  15. 15. #2 : 데이터기반 컨트롤 목표영역.data(데이터).enter() 데이터배열에 length가 늘어나면동작 ┛
  16. 16. #2 : 데이터기반 컨트롤 목표영역.data(데이터).exit() 데이터배열에 length가 줄어들면동작 ┛
  17. 17. #2 : 데이터기반 컨트롤 저장대상 = 목표영역.data(데이터).enter() └ 계속해서 같은 목표영역 내에서 추가동작 지정 가능
  18. 18. #1. Donut Graph 도넛 그래프 : D3pie, 왜곡, 함 수
  19. 19. PIE
  20. 20. PIE
  21. 21. #2. Stick Graph 막대 그래프 : D3scale, rangeBand
  22. 22. Range : 실제 pixel Domain : 데이터의 값
  23. 23. 10pixel ~ 1000pixel Domain : 데이터의 값 RangeBand
  24. 24. #3. Line Graph 꺾은선 그래프 : D3area, D3line
  25. 25. #마치며…
  26. 26. http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0 http://d3js.org/
  27. 27. QnA
  28. 28. 감사합니다.

×