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

2. 낙 구
마이다스아이티

3. 퍼블리셔의 시각
으로 본 웹문서

8. Data Visualizing
데이터 시각화

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

13. 세세한 컨트롤 수정가능
(당연하지만) 깊이 들어갈수록 손이 많이감.
SVG 기반
Ie8 이하 지원 X
데이터 기반 동작
VML 기반
Ie8 이하 지원 O
브러시 와도 같은 개념
SVG 기반
Ie8 이하 지원 X
데이터 기반 동작
VML 기반
Ie8 이하 지원 O
브러시 와도 같은 개념

14. 데이터 기반 동작?

18. D3 에서 제공하는 기능
• Selections
• Transitions
• Working with Arrays ( data array handling )
• Math
• String Formatting
• Colors
• Scales
…etc…
https://github.com/mbostock/d3/wiki

19. D3의 동작 원리

20. #1 : 개별 컨트롤
목표영역.append(개체).attr(속성)

21. #1 : 개별 컨트롤
목표영역.append(개체).attr(속성)
└ d3.select()로 선택 : svg, g, text 등등

22. #1 : 개별 컨트롤
목표영역.append(개체).attr(속성)
g, rect, circle, text, tspan 등등 ┘

23. #1 : 개별 컨트롤
목표영역.append(개체).attr(속성)
svg 지원 속성( x, y, fill, stroke, text-anchor 등) ┘

24. #2 : 데이터기반 컨트롤
목표영역.data(데이터).enter()

25. #2 : 데이터기반 컨트롤
목표영역.data(데이터).enter()
└ d3.selectAll() 로 선택 : 선택된 범위 내에서 동작

26. #2 : 데이터기반 컨트롤
목표영역.data(데이터).enter()
데이터배열에 length가 늘어나면동작 ┛

27. #2 : 데이터기반 컨트롤
목표영역.data(데이터).exit()
데이터배열에 length가 줄어들면동작 ┛

28. #2 : 데이터기반 컨트롤
저장대상 = 목표영역.data(데이터).enter()
└ 계속해서 같은 목표영역 내에서 추가동작 지정 가능

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

31. PIE

35. PIE

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

43. Range : 실제 pixel
Domain : 데이터의 값

44. 10pixel ~ 1000pixel
Domain : 데이터의 값
RangeBand

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

57. #마치며…

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

61. QnA

62. 감사합니다.