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.

17

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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

    Jul. 3, 2017
  • yonachoi

    Jan. 23, 2017
  • sangwookna9

    Dec. 23, 2016
  • samopoem

    Jul. 22, 2016
  • cluster

    May. 8, 2016
  • janghyunhan

    Apr. 8, 2016
  • darthJun

    Apr. 1, 2016
  • softroom

    Mar. 15, 2016
  • eduinet

    Feb. 19, 2016
  • ssuser498b64

    Jan. 28, 2016
  • seunghaeom

    Jan. 27, 2016
  • sejinpark794

    Jan. 10, 2016
  • KyunghwaCheon1

    Jan. 6, 2016
  • nesstory

    Jan. 1, 2016
  • baradates

    Dec. 30, 2015
  • lepffm

    Dec. 18, 2015
  • jongbinjblee

    Dec. 18, 2015

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

Views

Total views

11,141

On Slideshare

0

From embeds

0

Number of embeds

5,552

Actions

Downloads

48

Shares

0

Comments

0

Likes

17

×