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

1. Data Designer
D3.js
04: D3.js 척도와 축 (Scale & Axis)_보충자료

2. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
d3.scale.linear( )
.domain[시작점, 끝점]
.range[시작점, 끝점]
d3.scale.ordinal( )
.domain[시작점, 끝점]
.rangeBands[시작점, 끝점]
선형척도(scale.linear)와서열척도(scale.ordinal)비교하기

3. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
d.area
xScale
d.area
xScale
var xScale = d3.scale.ordinal()
.domain(data.map(function(d) { return d.area; }))
.rangeBands([0, width], .3);
.attr("x",
function(d) { return xScale(d.area); })
1. 코드앞에서변수‘xScale’에척도함수를저장했습니다.
2. x좌표에는칼럼명‘area’데이터가들어갑니다.
3. x좌표에척도를적용해데이터가크기에비례해배치되도록설정합니다.
4. x좌표에척도를적용하기위해xScale이라는변수명을쓰고,데이터값인d.area를써줍니다.
5. 이렇게하면데이터값에척도함수가적용됩니다.
=
2.척도가적용된데이터값이
막대그래프의x좌표에삽입됩니다
1.척도가적용되지않은데이터값(d.area)에
척도가적용됩니다.
(x,y)

4. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
d.value
xScale
d.value
yScale
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([height, 0]);
.attr("y",
function(d) { return yScale(d.value); })
1. 코드앞에서변수‘yScale’에척도함수를저장했습니다.
2. y좌표에는칼럼명‘value’데이터가들어갑니다.
3. y좌표에척도를적용해데이터가크기에비례해배치되도록설정합니다.
4. y좌표에척도를적용하기위해yScale이라는변수명을쓰고,데이터값인d.value를써줍니다.
5. 이렇게하면데이터값에척도함수가적용됩니다.
=
(x,y)
2.척도가적용된데이터값이
막대그래프의y좌표에삽입됩니다
1.척도가적용되지않은데이터값(d.value)에
척도가적용됩니다.

5. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
여백을포함한영역이svg영역이가장상위에생성됐습니다.

6. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
margin.bottom : 30px
margin.top : 20px
margin.right : 20pxmargin.left: 40px
그래프에서여백영역은다음과같습니다.

7. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
height
width
width + margin.left + margin.right
height + margin.top + margin.bottom

8. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
height
width
var xScale = d3.scale.ordinal()
.domain(data.map(function(d) { return d.area; }))
.rangeBands([0, width], .3);
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([height, 0]);
xScale
yScale
x
x
그래프의출력범위를(rangeBands혹은range)여백을제외한값(width,height)로설정했기때문에
막대그래프가여백을제외한영역에생성됩니다.

9. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append(“g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg안에‘g’가추가된것을확인할수있습니다.
translate가적용된것을확인할수있습니다.

10. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
x축요소가‘g’로묶여있는걸확인할수있습니다
x축에translate가적용된것을확인할수있습니다.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

11. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
y축요소가‘g’로묶여있는걸확인할수있습니다

12. 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