꿈꾸는데이터디자이너 'D3.js' 강의 자료 입니다 www.attrs.co.kr www.facebook.com/datadesigner2015

1. Data Designer
D3.js
04: D3.js 척도와 축 (Scale & Axis)

2. 꿈꾸는데이터디자이너 시즌2오늘의 수업
이론 실습
1. D3.js의 축과 척도
2. 막대그래프 속성 이해하기
1. 막대그래프에 축과 척도 적용

3. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
D3.js척도기능은
요소의위치를크기에비례해자동으로계산해준다

4. 꿈꾸는데이터디자이너 시즌2
척도:입력되는정의역(domain)과출력되는치역(range)을매핑한함수
.domain( )
.range( )
입력되는데이터값의범위
출력되는범위(단위:픽셀)
d3.scale( )
d3.js 척도 (d3.scale)

5. 꿈꾸는데이터디자이너 시즌2
d3.scale.linear( )
d3.scale.ordinal( )
선형척도.숫자,날짜등일련의연속적인값을갖는척도.
서열척도.이름,항목등측정이불가능한값일경우사용하는척도.
d3.js 척도 (d3.scale)

6. 꿈꾸는데이터디자이너 시즌2
01_scale_test_blank.html
d3.scale.linear( )
.domain[시작점, 끝점]
.range[시작점, 끝점]
여기는척도의종류에따라바뀝니다
d3.js 척도 (d3.scale)
척도를설정하기위해서는 척도의종류,입력하는데이터값의범위,출력되는범위가모두필요하다
data
d3.scale
data

7. 꿈꾸는데이터디자이너 시즌2
데이터의최솟값과최댓값을
일일이적어야할까?
d3.js 척도 (d3.scale)

8. 꿈꾸는데이터디자이너 시즌2d3.min & max
d3.min( )
d3.max( )
데이터안의최솟값을반환하는함수
데이터안의최댓값을반환하는함수
데이터값이많아질수록최솟값과최댓값을직접지정하기힘들기때문에사용하는함수

9. 꿈꾸는데이터디자이너 시즌2d3 축과 척도
척도
웹화면에SVG요소추가
(선,라벨,눈금등)
값을계산해반환
축
d3.scale( )
d3.axis( )

10. 꿈꾸는데이터디자이너 시즌2d3.axis( )
d3.svg.axis()
d3.js의축함수를생성함.

11. 꿈꾸는데이터디자이너 시즌2d3.axis( )
축을 생성하는 함수
축을 생성할 때는 어떤 척도를 다뤄야 하는지
알려줘야 함.
축의 위치
가로축 세로축
top left
bottom right
d3.svg.axis()
.scale()
.orient(“__”)
.ticks( )
눈금개수
d3는 대략적으로 필요한 구분자의 개수와 간격 결정
수동으로 눈금 수를 정할 때는 ticks 사용. 단 규칙성에 따라 눈금 수를 결정.

12. 꿈꾸는데이터디자이너 시즌2
실습

13. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
02_bar_blank.html

14. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
Tip svg ‘g’ 개념
g
‘그룹’.다른문서요소를묶어서담는역할.위치를차지하지않고,보이지않는다.
svg.append(“g”)
.call(yAxis);
var yAxis =d3.svg.axis()
.scale(yScale)
.orient(“bottom”);
SVG 안에 g 생성
yAxis 호출
g 안에 축 요소 생성
축함수는SVG관련요소를추가한다.
때문에문서요소가어디에있어야하는지정해줘야한다.
이를위해미리그룹을생성한후축요소를추가한다.

15. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
Tip HTML의 요소 영역 개념과 나열 방향
상
HTML의방향은상우하좌!
Border
Content
Padding
Margin
하
좌 우

16. 꿈꾸는데이터디자이너 시즌2
D3.js 그래프 요소 자리
y축
x축
전체 영역
여백
[실습] d3.js scale & axis
이동

17. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
top
이동
bottom
left right
translate(" + margin.left + "," + margin.top + ")")
x y

18. 꿈꾸는데이터디자이너 시즌2
x축
y축
[실습] d3.js scale & axis
x축은위치를지정하지않으면상단에생성된다

19. 꿈꾸는데이터디자이너 시즌2
.attr("transform", "translate(0," + height + ")")
x축
y축
[실습] d3.js scale & axis
translate기능을이용해x축을아래로이동한다

20. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
.domain(data.map)?
1. 막대그래프는서열척도이기때문에항목명을나열해야한다.
2. 원래형태는항목명을.domain에일일이나열해야한다.
var x = d3.scale.ordinal()
.domain([“중구”, "종로구", “서대문구" (…)])
.rangeBands([0, width], .1);
3.데이터항목이많아질수록일일이입력하는것은한계가있다.
4.(.map)메서드를이용해배열로만들어데이터를삽입한다.
Tip 자바스크립트 ‘배열(Array)’
[“A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”]
자바스크립트의배열은데이터값을하나의목록으로만든것.배열의개별값은원소(element)라고부른다.
http://bost.ocks.org/mike/bar/3/[참고링크]

21. 꿈꾸는데이터디자이너 시즌2
rangeBand rangeBand rangeBand
전체 범위
padding paddingouterPadding outerPadding
나눠진 범위
[실습] d3.js scale & axis
.rangeBand
https://github.com/mbostock/d3/wiki/Ordinal-Scales[참고링크]
막대그래프의항목명을전체범위에맞게자동으로계산해항목을나열함

22. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
Tip 숫자 1,000단위 구분 콤마(,) 추가
d3.format
d3내에서숫자형식을다루는메서드
d3.format(“,”)
d3.format(“,.2f”)
d3.format(“,%”)
10000
10,000
10,000.00
10,000%
https://github.com/mbostock/d3/wiki/Formatting[참고링크]

23. 꿈꾸는데이터디자이너 시즌2[실습] d3.js scale & axis
Tip SVG Text요소 정렬하기
text-anchor
SVGText요소의정렬은text-anchor속성을이용한다.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor[참고링크]
A
A
Astart
middle
end
왼쪽정렬
가운데정렬
오른쪽정렬

24. Neuro Associates
・ Portfolio : neuroassociates.co.kr/portfolio
・ Address : 서울특별시 마포구 상수동 145-1 6F
・ Site : neuroassociates.co.kr
・ Mail : neuro.associates.consulting@gmail.com or info@neuroassociates.co.kr
・ SNS : www.facebook.com/neuroassociatessns
・ Phone : 02-334-2013