Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,477 views

Published on

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

Published in: Technology
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[ 하코사세미나] 의외로 쉬운 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. 감사합니다.

×