D3.js
- D3은 데이터 기반 문서(Data-Driven Documents)
- SVG, HTML, CSS를 이용해 웹 브라우저에 맞춤형 데이터 시각화를 생성하기 위한 오픈소스
- Protovis는 정적 시각화, D3은 상호작용, 전환 및 변환에 중점.
- 전역 JavaScript 개체 d3을 정의
D3의 기능
- 웹 표준 사용
- 데이터 기반
- DOM 조작
- 데이터 기반 elements
- 동적 속성
- 시각화 유형
- 맞춤형 시각화
- 전환(transition)
- 상호작용 및 애니메이션(duration, delay, easy)
D3의 장점
- 모든 JS 프레임워크와 함께 사용 가능.
- D3는 데이터에 중점을 두고 있으므로 데이터 시각화에 유리.
- D3는 오픈 소스기 때문에 소스 코드로 작업하고 고유한 기능 추가가 가능
- 웹 표준과 함께 작동하므로 D3를 사용하기 위해 브라우저 이외의 다른 기술이나 플러그인이 필요하지 않음.
- 마찬가지 이유로 D3이 작동하는 데 필요한 새로운 학습 또는 디버깅 도구가 필요 없음.
- D3는 시각화를 제어하여 원하는 방식의 사용자 정의가 가능해 Tableau 또는 QlikView와 같은 도구보다 유리함.
- D3는 가벼우며 웹 표준과 직접 작동하기 때문에 매우 빠르고 대규모 데이터 세트에서 잘 작동.
DOM 선택
- d3.select(css 선택기) 지정된 css-selector를 기반으로 HTML 문서에서 첫 번째로 일치하는 요소를 반환
- d3.selectAll(css 선택기) 지정된 css-selector를 기반으로 HTML 문서에서 일치하는 모든 요소를 반환
DOM 조작
- text("content") 선택한 요소의 텍스트를 가져오거나 설정
- append("element name") 선택한 요소 내부에 있지만 선택한 요소의 끝 바로 앞에 요소를 추가
- insert("element name") 선택한 요소에 새 요소를 삽입
- remove() DOM에서 지정된 요소를 제거
- html("content") 선택한 요소의 내부 HTML을 가져오거나 설정
- attr("name", "value") 선택한 요소의 특성을 가져오거나 설정
- property("name", "value") 선택한 요소의 특성을 가져오거나 설정
- style("name", "value") 선택한 요소의 스타일을 가져오거나 설정
- classed("css class", bool) 선택 항목에서 CSS 클래스를 가져오거나 추가하거나 제거
Data Function
- 각 DOM 조작 메서드는 상수값 뿐 아니라 함수를 메개변수로 쓸 수 있음.
.text(function (d, i) {
console.log(d); // the data element
console.log(i); // the index element
console.log(this); // the current DOM object
return d;
});Event
- 이벤트 리스너
d3.selection.on(유형[, 리스너[, 캡처]]);- on메서드는 선택된 모든 DOM elements에 eventListener를 추가.
Event handlers
- selection.on() : click, mouseover, mpouseout 과 같은 이벤트 유형을 캡처하기 위해 이벤트 리스너를 추가하거나 제거
- selection.dispatch() : 클릭, 마우스오버, 마우스아웃과 같은 이벤트 유형을 캡처합니다. Typenames는 이벤트 이름이고 listener는 이벤트 리스너
- d3.event : 타임스탬프와 같은 표준 이벤트 필드 또는 preventDefault와 같은 메서드에 액세스하기 위한 이벤트 객체
- d3.mouse(container) : 지정된 DOM 요소에서 현재 마우스 위치의 x 및 y 좌표를 가져옵니다.
- d3.touch() : 컨테이너에 대한 터치 좌표를 가져옵니다.
Animation
- Animation은 한 형태에서 다른 형태로의 전환
- selection.transition() 선택한 요소에 대한 전환을 예약
- transition.duration() 지속 시간은 각 요소의 애니메이션 지속 시간을 밀리초 단위로 지정
- transition.ease() easy는 여유 함수를 지정(예: 선형, 탄성, 바운스).
- transition.delay() 지연은 각 요소의 애니메이션 지연을 밀리초 단위로 지정
Data Binding
- Data를 DOM에 Binding
- data() 선택한 요소에 데이터를 결합(1:1매핑)
- enter() 누락된 요소에 대한 자리 표시자 참조가 있는 선택 항목을 만듦(data가 더 많을 시 append와 묶어 새로운 태그를 생성.)
- exit() 노드를 제거하고 나중에 DOM에서 제거할 수 있는 이탈 선택에 추가
- datum() 인을 계산하지 않고 선택한 요소에 데이터를 주입
Data Loading
- 위에서 우리가 지정한 지역변수가 아닌 다양한 유형의 파일에서 data를 로드하고 DOM요소에 바인딩 가능.
- d3.csv() .csv 파일 또는 데이터를 로드하기 위해 지정된 URL에 http 요청을 보내고 파싱된 csv 데이터 개체로 콜백 함수를 실행
- d3.json() .json 파일 또는 데이터를 로드하기 위해 지정된 URL에 http 요청을 보내고 파싱된 json 데이터 객체로 콜백 함수를 실행
- d3.tsv() .tsv 파일 또는 데이터를 로드하기 위해 지정된 URL에 http 요청을 보내고 파싱된 tsv 데이터 개체로 콜백 함수를 실행
- d3.xml() .xml 파일 또는 데이터를 로드하기 위해 지정된 URL에 http 요청을 보내고 파싱된 xml 데이터 개체로 콜백 기능을 실행
SVG elements
- Fill : 요소의 채우기 색상. 색상 이름, 16진수 값 또는 RGB 또는 RGBA 값
- stroke : 획 색상. 요소의 색상을 지정할 수 있음
- stroke-width : 획 너비는 선 또는 경계의 너비를 지정. 픽셀 단위
- opacity : 불투명도는 불투명도/투명도 숫자를 지정. 0은 투명, 1은 불투명
- font-family : 텍스트 요소의 경우 font-family 지정 가능
- font-size : 텍스트 요소의 글꼴 크기 지정
chart
- 예제 참고
chart scales
- 눈금과 축
- Continuous
- d3.scaleLinear() 입력 데이터(도메인)가 지정된 출력 범위에 매핑되는 연속 선형 스케일을 구성
- d3.scaleIdentity() 입력 데이터가 출력과 동일한 선형 스케일을 구성
- d3.scaleTime() 입력 데이터가 날짜이고 출력이 숫자인 선형 척도를 구성
- d3.scaleLog() 로그 스케일을 구성
- d3.scaleSqrt() 제곱근 척도를 구성
- d3.scalePow() 지수 규모를 구성
- Sequential
- d3.scaleSequential() 보간 기능에 의해 출력 범위가 고정된 순차 스케일을 구성
- Quantize
- d3.scaleQuantize() 이산 출력 범위로 양자화 스케일을 구성
- Quantile
- d3.scaleQuantile() 입력 샘플 데이터가 이산 출력 범위에 매핑되는 분위수 척도를 구성
- Threshold
- d3.scaleThreshold() 임의의 입력 데이터가 이산 출력 범위에 매핑되는 축척을 구성
- Band
- d3.scaleBand() 밴드 스케일은 출력 범위가 연속적이고 숫자라는 점을 제외하고 서수 스케일과 유사
- Point
- d3.scalePoint() 포인트 스케일을 구성
- Ordinal
- d3.scaleOrdinal() 입력 데이터가 알파벳을 포함하고 이산 숫자 출력 범위에 매핑되는 순서 척도를 구성
chart axes
- 사람이 읽을 수 있는 눈금
- d3.axisTop() 상단 수평 축을 만듦
- d3.axisRight() 수직 오른쪽 방향 축을 만듦
- d3.axisBottom() 아래쪽 수평 축을 만듦
- d3.axisLeft() 왼쪽 세로 축을 만듦