Chapter 6. Drawing with Data

Min Jeong Cho

d3.js의 고전 of 고전 Bar Chart로 복습해보자

왜냐면… 스캐터플롯이 귀찮아서….

start.html 파일 열기

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를 이해했다면 식은 죽 먹기!

Done!