www.attrs.co.kr www.facebook.com/datadesigner2015

1. Data Designer
D3.js
05 : D3.js Scatter chart

2. 꿈꾸는데이터디자이너 시즌2오늘의 수업
이론 실습
1. Scatter chart
2. D3.js filter
1. Scatter chart 그리기

3. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
Scatterchart
서로다른의미를가진두개의데이터집합을나타낸시각화유형

4. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
Bubblechart
x,y축과함께원의반지름의넓이에도데이터를엮어의미를부여할수있다.

5. 꿈꾸는데이터디자이너 시즌2[실습] .filter( )
Bar chart Scatter chart
코드 비교

6. 꿈꾸는데이터디자이너 시즌2[실습] .filter( )
Bar chart Scatter chart
1. 척도
ordinal( )
linear( )
linear( )
linear( )
d3.scale.ordinal()
.domain()
.rangeBands();
d3.scale.linear()
.domain()
.range();

7. 꿈꾸는데이터디자이너 시즌2[실습] .filter( )
Bar chart Scatter chart
2. 형태
(x,y)
width
height (cx,cy)
r

8. 꿈꾸는데이터디자이너 시즌2[실습] .filter( )
.filter()
설정한조건에맞는특정한요소를선택합니다.특정한조건에해당하는요소에만효과를적용할때사용합니다.
.filter ( data > 75 )
1 10 30 50 70 80 100 200 500
80 100 200 500
전체 데이터
(data)
선택된 값

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

10. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
데이터 설명
출처 : 서울통계, 주민등록인구(구별), 2015년 2/4분기
area
man
woman
generation
구
남자
여자
세대당
인구수
원의 x좌표
반지름
원의 y좌표
텍스트
데이터 칼럼명 출력물

11. 꿈꾸는데이터디자이너 시즌2오늘의 수업
보충

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

13. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
그래프에서여백영역은다음과같습니다.
D3.js 그래프 요소 자리 (g)
전체 영역
margin.top
translate
margin.left margin.right
margin.bottom
width
height

14. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
그래프에서여백영역은다음과같습니다.
margin.bottom
margin.top
margin.rightmargin.left
height
width
width + margin.left + margin.right
height + margin.top + margin.right

15. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
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)로설정했기때문에
막대그래프가여백을제외한영역에생성됩니다.
height
width

16. 꿈꾸는데이터디자이너 시즌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가적용된것을확인할수있습니다.

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

18. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
x축그룹안에눈금이생성된것을확인할수있습니다
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

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

20. 꿈꾸는데이터디자이너 시즌2d3.js 척도 (d3.scale)
y축그룹안에눈금이생성된것을확인할수있습니다
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

21. 꿈꾸는데이터디자이너 시즌2
1. 기본 Scatter chart
[실습 ] 응용편

22. 꿈꾸는데이터디자이너 시즌2[실습 ] 응용편
2. 반지름에 척도 적용

23. 꿈꾸는데이터디자이너 시즌2[실습 ] 응용편
3. .filter( ) 적용

24. 꿈꾸는데이터디자이너 시즌2
.filter( ) 응용
[실습 ] 응용편

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