20150523 Review of Chapter 6, Drawing with data made by Min Jeong Cho Moon.D (문과생들의 d3, Data Visualization 스터디) ---------------------------------------------------------------------- d3.js - [Interactive date visualization] by Scott Murray

1. Chapter 6.
Drawing with Data
Min Jeong Cho

2. d3.js의 고전 of 고전
Bar Chart로 복습해보자
왜냐면… 스캐터플롯이 귀찮아서….

3. start.html 파일 열기

4. width
height
(x, y)
(0, 0)
x
y
바 차트 그리기 전 반드시 기억해야 할 4가지 속성

5. 합쳐져 있는 네모들을 예쁜 간격으로 나열해보기
1. x좌표 세우기
.attr("x", function(d, i) {
return i * 21; // 21씩 띄우기
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
첫 번째 방법
두 번째 방법

6. 1. x좌표 세우기
합쳐져 있는 네모들을 예쁜 간격으로 나열해보기
(0, 0)
i = 0 i = 1 i = 2
…
[ 원리 ] return i * (w / dataset.length);

7. 데이터 개수에 비례한 가로 간격 만들기
2. width(가로) 모양 만들기
//Width and height
var w = 500;
var h = 100;
var barPadding = 1; // 사이사이 넣을 공간
.attr("width", w / dataset.length - barPadding)

8. 데이터 개수에 비례한 가로 간격 만들기
2. width(가로) 모양 만들기
[ 원리 ]
전체 너비
varPadding
데이터 개수

9. 고무고무 그래프!
3. height(세로) 모양 만들기
.attr("height", function(d) {
return d;
});
.attr("height", function(d) {
return d * 숫자 // 고무고무 그래프!!
});

10. 고무고무 그래프!
3. height(세로) 모양 만들기
다들 알 거 같아서 생략ㅎㅎ
[ 원리 ]

11. SVG 설계의 한 가지 오점
4. y축 고정시키기
//y축
.attr(“y”, function(d) {
return h - d; // 높이에서 데이터 값 빼기
})

12. SVG 설계의 한 가지 오점
4. y축 고정시키기
d
d
h
[ 원리 ]

13. 그냥 내 취향 그래프 색깔 만들기
5. 색깔 입히기
.attr("fill", function(d) {
return "rgba(0, 0, 0,” + (d * 0.05) +“)”;
});
원하는 색상 번호 넣기 투명도

14. 핵무난 + 내취향 그래프 색깔 만들기
5. 색깔 입히기
http://www.colorpicker.com/
http://www.december.com/html/spec/colorsvg.html
SVG의 못생긴 색이 짜증났다…. 아래 사이트 참조!!

15. 6. 텍스트 위치시키기
앞서 rec를 이해했다면 식은 죽 먹기!

16. Done!