Drawing with data
-
Upload
min-jeong-cho -
Category
Data & Analytics
-
view
538 -
download
0
Transcript of Drawing with data
합쳐져 있는 네모들을 예쁜 간격으로 나열해보기
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)
고무고무 그래프!
3. height(세로) 모양 만들기
.attr("height", function(d) { return d; });
.attr("height", function(d) { return d * 숫자 // 고무고무 그래프!! });
그냥 내 취향 그래프 색깔 만들기
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의 못생긴 색이 짜증났다…. 아래 사이트 참조!!