�ݺ�ߣ

Chapter 6.
Drawing with Data
Min Jeong Cho

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

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

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

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

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

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

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

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

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

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

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

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

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

�ݺ�ߣ

Drawing with data

More Related Content

Drawing with data