D3.js
더 많은 작업
- D3.js; Data-Driven Documents, D3
- 데이터를 웹 문서의 요소(DOM)에 결합하고, 그 데이터에 따라 SVG·HTML 요소를 만들고 바꾸어 웹 브라우저에서 대화형 시각화를 구현하는 자바스크립트 라이브러리
D3는 Data-Driven Documents(데이터 주도 문서)의 머리글자이다. 마이크 보스톡(Mike Bostock)이 2011년에 만들었고, 스탠퍼드 대학의 제프 히어(Jeff Heer), 바딤 오기베츠키(Vadim Ogievetsky)와 함께 쓴 논문 "D³: Data-Driven Documents"(IEEE Transactions on Visualization and Computer Graphics, 2011)로 발표되었다. 공식 사이트는 D3를 "데이터 시각화를 위한 무료 오픈 소스 자바스크립트 라이브러리"로, 웹 표준 위에 만든 저수준(low-level) 도구라고 소개한다. 현재 Observable에서 관리하며, 공식 사이트 기준 최신 버전은 7.x(7.9.0)이다.
D3는 '차트'라는 개념이 없는 라이브러리라는 점이 특징이다. 막대 그래프 함수를 부르는 대신, 데이터 읽기, 척도(scale), 축(axis), 도형 생성기(shape), 레이아웃, 선택(selection) 같은 기본 요소를 조합해 그래프를 직접 만든다. 그래서 배우기는 어렵지만 원하는 어떤 형태의 시각화도 만들 수 있고, 다른 많은 상위 차트 라이브러리의 기반이 되었다. ADP 필기 5과목에서는 '라이브러리 기반의 시각화 구현: D3.js'로 출제기준에 명시되어 있다.
| 특징 | 설명 |
|---|---|
| 웹 표준 기반 | 별도 플러그인 없이 HTML, SVG, CSS, 자바스크립트로 브라우저에서 동작한다. 그래프의 막대·점은 모두 실제 SVG 요소이므로 브라우저 개발자 도구로 살펴볼 수 있다 |
| 데이터 바인딩 | 데이터 배열의 각 값을 문서 요소 하나에 결합하고, 값에 따라 위치·크기·색 등 속성을 정한다 |
| 모듈 구성 | d3-selection, d3-scale, d3-axis, d3-shape, d3-transition, d3-geo, d3-hierarchy, d3-force 등 약 30개 모듈의 묶음이다. 필요한 것만 따로 쓸 수 있다 |
| 대화형·애니메이션 | 이벤트 처리, 확대·축소(zoom), 끌기(drag), 영역 선택(brush)과 전환(transition) 애니메이션을 지원한다 |
| 다양한 레이아웃 | 트리맵, 트리, 힘 기반(force-directed) 네트워크 그래프, 코드(chord) 다이어그램, 지도 투영 등을 제공한다 |
CSS 선택자로 문서 요소를 고른 뒤 속성을 바꾼다.
- d3.select("body"): 조건에 맞는 첫 번째 요소 하나를 선택한다.
- d3.selectAll("rect"): 조건에 맞는 모든 요소를 선택한다.
- .attr(), .style(), .text(), .append(), .remove()로 선택한 요소를 수정한다. 대부분의 메서드가 선택 객체를 돌려주므로 점(.)으로 이어 쓰는 메서드 체이닝을 한다.
selection.data(배열)를 호출하면 데이터와 기존 요소를 짝짓고 세 집합으로 나눈다.
| 집합 | 의미 | 처리 |
|---|---|---|
| update | 데이터와 짝이 맞은 기존 요소 | 속성만 새 데이터로 바꾼다 |
| enter | 데이터는 있는데 대응하는 요소가 없는 경우 | .enter().append()로 새 요소를 만든다 |
| exit | 요소는 있는데 대응하는 데이터가 없는 경우 | .exit().remove()로 지운다 |
- selection.join()은 enter·update·exit 처리를 한 번에 해 주는 메서드로, 현재 공식 문서는 join 사용을 기본으로 안내한다.
- data(배열, 키 함수)처럼 키 함수를 주면 배열 순서 대신 키 값으로 데이터와 요소를 짝짓는다.
- 척도는 데이터 값의 범위(domain)를 화면 좌표나 색의 범위(range)로 바꾸는 함수이다. d3.scaleLinear()(연속형), d3.scaleBand()(범주형 막대 위치), d3.scaleTime()·d3.scaleUtc()(시간), d3.scaleOrdinal()(범주→색) 등이 있다.
- 축은 척도를 눈금과 레이블로 그려 준다. d3.axisBottom(x), d3.axisLeft(y)를 만든 뒤 selection.call()로 그린다.
selection.transition()을 붙이면 이후 바꾸는 속성이 즉시 바뀌지 않고, duration()으로 정한 시간 동안 이전 값에서 새 값으로 부드럽게 보간된다. 데이터가 갱신될 때 막대 높이가 자라나는 효과 등을 만든다.
HTML 문서에서 jsDelivr CDN으로 D3 7을 불러와 막대 그래프를 그린다.
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
const data = [
{ name: "A", value: 30 }, { name: "B", value: 80 },
{ name: "C", value: 45 }, { name: "D", value: 60 }
];
const width = 400, height = 240;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
// 척도: 범주 → x 위치, 값 → y 위치
const x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.2);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height - margin.bottom, margin.top]);
// SVG 컨테이너
const svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
// 데이터 바인딩: rect 요소를 데이터 수만큼 만든다
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.name))
.attr("width", x.bandwidth())
.attr("y", y(0))
.attr("height", 0)
.attr("fill", "steelblue")
.transition() // 0에서 값까지 자라나는 애니메이션
.duration(800)
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value));
// 축
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
- SVG 좌표계는 위쪽이 y = 0이므로 y 척도의 range를 [아래, 위] 순서로 주어 값이 클수록 막대가 위로 올라가게 한다.
- join() 대신 예전 방식으로 쓰면 .data(data).enter().append("rect")이다.
ADP 출제기준은 시각화 구현을 '분석 도구를 이용한 시각화 구현'(교재는 R)과 '라이브러리 기반의 시각화 구현'(D3.js)으로 나눈다.
| 구분 | 분석 도구(R 기본 그래픽, ggplot2) | 라이브러리(D3.js) |
|---|---|---|
| 언어·환경 | R 콘솔, RStudio | 자바스크립트, 웹 브라우저 |
| 주 목적 | 분석가가 데이터를 탐색하고 분석 결과를 확인 | 웹 서비스·기사·대시보드에서 다수의 사용자에게 전달 |
| 결과물 | 정적인 이미지(PNG, PDF)가 기본 | SVG·HTML 요소로 된 대화형 웹 그래픽 |
| 작성 방식 | 그래프 함수나 그래픽 문법으로 짧은 코드 | 기본 요소를 조합하는 저수준 코드. 코드가 길다 |
| 통계 기능 | 모델링·통계 분석과 바로 연결된다 | 통계 분석 기능은 제한적이다(d3-array의 요약 함수 정도) |
| 상호작용 | 별도 패키지가 필요하다 | 이벤트, 확대·축소, 전환 애니메이션을 기본 지원한다 |
| 자유도 | 정해진 그래프 유형 중심 | 원하는 형태를 무엇이든 만들 수 있다 |
- D3는 Data-Driven Documents의 약자이며, 데이터를 DOM 요소에 결합해 SVG·HTML로 그리는 자바스크립트 라이브러리라는 정의를 기억한다.
- 데이터 바인딩의 enter(데이터만 있음 → 요소 추가), update(짝이 맞음), exit(요소만 있음 → 제거)를 구분한다.
- select는 첫 번째 요소 하나, selectAll은 모든 요소를 선택한다. 척도는 domain을 range로 바꾸는 함수, transition은 속성 변화를 애니메이션으로 보여 준다.
- R 같은 분석 도구 기반 시각화와 비교해 웹 표준 기반, 대화형, 높은 자유도라는 장점과 학습 부담·코드 양이라는 단점을 말할 수 있어야 한다.
- D3 by Observable - 공식 사이트
- D3 - What is D3?
- D3 - Getting started
- D3 - d3-selection
- D3 - Joining data
- D3 - d3-scale
- D3 - d3-axis
- D3 - d3-transition
- Bostock, M., Ogievetsky, V., Heer, J. (2011). D³: Data-Driven Documents. IEEE Transactions on Visualization and Computer Graphics, 17(12), 2301–2309. doi:10.1109/TVCG.2011.185
- 한국데이터산업진흥원 데이터자격검정 - ADP 시험과목 및 출제기준