[week16] D3.js (Scale & axis)

d3.js 축과 척도
2015.4.11
www.attrs.co.kr

Songyi Lim www.attrs.co.kr
오늘의 수업
실습이론
• 각종 배경지식
• HTML/CSS 지식 - 요소 방향
• HTML/CSS 지식 - 요소 경계
• D3.js 척도
• D3.js 축
• 막대그래프에 축과 척도 추가하기

[ 복습 ] D3.js 관련 배경지식
D3.js 관련 배경지식

D3.js 파일 외부/내부 기술

index.html
index.html
서버가 기본으로 인식하는 html
여러 파일 중 ‘index.html’ 파일이 있으면 가장 먼저 인식해서 보여줌

D3.js 파일 경로설정
A
a
d3class.html
graph2.js
graph.js
상위폴더 하위폴더
같은폴더

1. 같은 폴더 내에 있을 때
2. 하위폴더에 있을 때
3. 상위폴더에 있을 때
D3.js 파일 경로설정

D3.js 체인문법
구두점(.)으로 d3 메서드를 체인처럼 연결해 코드 한 줄로
여러 동작을 실행하는 기법. 각각의 메서드에서 처리한 후 결과값을
다음 메서드로 전달하기 때문에 순서가 중요하다.
Chain Syntax

자바스크립트 기본 개념 : 함수
function(name(인자)({(
(return(반환값(
};
함수 키워드
코드
함수 이름
‘함수’
특정한 작업을 수행하기 위해 필요한 일련의 구문
return 뒤에 따라오는 값(=반환값)을 함수의 결과로 변환.
동시에 함수를 종료시킨다. 반환=종료라고 이해할 수 있다.

자바스크립트 기본 개념 : 함수
파일 경로
파일을 불러올 때
오류가 날 경우
데이터가 전달된 부분

자바스크립트 기본 개념 : 익명함수

자바스크립트 기본 개념 : 익명함수
function((d)({(
return(d;(
};
‘익명함수’
이름이 없는 함수
원하는 문자열을 사용 가능. 하지만 많은 코드에서 관습적으로 사용함.

D3.js 코드 오타

D3.js 코드 오타
!! 오타주의 !!

[ HTML/CSS ]
HTML/CSS 배경지식

요소 방향

요소 방향
1
2
3
4
HTML/CSS의 요소 나열 방향은 상우하좌!

Margin

[ d3.js 척도 ]
d3.js 척도

척도: 입력되는 정의역(domain)과 출력되는 치역(range)을 매핑한 함수
d3.js scale( )
.domain( )
.range( )
입력되는 데이터 값의 범위
출력되는 범위 (단위: 픽셀)
d3.scale( )

d3.js scale( )
d3.scale.linear( )
d3.scale.ordinal( )
선형척도. 숫자, 날짜 등 일련의 연속적인 값을 갖는 척도.
서열척도. 이름, 항목 등 측정이 불가능한 값일 경우 사용하는 척도.

d3.js scale( )
var scale = d3.scale.linear()
.domain([100,500])
.range([0,100]);
scale(100);
scale(300);
scale(500);
?
?
?
d3.scale.linear( )
.domain[시작점, 끝점]
.range[시작점, 끝점]

d3.js scale( )
var scale = d3.scale.linear()
.domain([100,500])
.range([0,100]);
scale(100);
scale(300);
scale(500);
0
50
100

d3.min & d3.max
d3.min( )
d3.max( )
데이터 안의 최소값을 반환하는 함수
데이터 안의 최대값을 반환하는 함수
데이터 값이 많아질수록 최소값과 최대값을 직접 지정하기 힘들기 때문에 사용하는 함수

[ 실습 ] D3.js

[ 실습 ] D3.js 축과 척도 적용 전

[ 실습 ] D3.js 축과 척도 적용 후

[ 실습 ] D3.js 축과 척도 - data.forEach
02bar_scale.html
각 데이터(d.value)를 숫자로 강제변환.

[ 실습 ] D3.js 축과 척도
02bar_scale.html

[ 실습 ] D3.js 축과 척도 - .rangeRoundBands
rangeBand rangeBand rangeBand
전체 범위
padding paddingouterPadding outerPadding
나눠진 범위
https://github.com/mbostock/d3/wiki/Ordinal-Scales

[ 실습 ] D3.js 축과 척도 - axis
03bar_xaxis.html

03bar_xaxis.html
top
bottom
left right
translate((+(margin.left(+(,(+(margin.top(+())

04bar_margintest.html
margin과 transform을 설정하지 않는다면?

03bar_xaxis.html
축을 생성하는 함수
축을 생성할 때는 어떤 척도를 다뤄야 하는지
알려줘야 함.
축의 위치
가로축 세로축
top left
bottom right

03bar_xaxis.html
g 문서요소
• 그룹을 뜻함.
• 다른 문서 요소를 담는 역할.
• 트랜스폼 요소 적용 가능
call 함수
• 선택된 변수의 내용을 불러온다.

03bar_xaxis.html
=

05bar_yaxis.html

x축
y축
05bar_yaxis.html

.attr(transform,(translate(0,(+(height(+())
x축
y축
05bar_yaxis.html

06bar_datalabel.html

07bar_complete.html
고딕체
path : 축의 선 , line : 축의 눈금

08bar_ticks.html
• 축의 눈금 개수 지정.
• 개수에 따라 눈금값이 정확히 떨어지지 않으면 입력한 눈금개수 중 값이 정확히 떨어지
는 개수로 자동으로 조정해서 보여줌.

[week16] D3.js (Scale & axis)

More Related Content

What's hot

Similar to [week16] D3.js (Scale & axis)

More from neuroassociates

Recently uploaded

[week16] D3.js (Scale & axis)