D3.js 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리

D3.js

D3.js는 "Data-Driven Documents"의 약어로, 데이터 시각화를 위한 무료 오픈 소스 JavaScript 라이브러리입니다. D3.js는 데이터를 가져와 이를 시각화 시켜주는 도구로써 그래프, 차트, 지도 대시보드 등 다양한 형태의 데이터 시각화를 구현하는데 도움이 됩니다.  

 

D3.js는 HTML 문서의 DOM 요소를 선택하고 조작하여 데이터를 시각화합니다. 또한 SVG를 사용하여 그래프, 차트 등의 요소를 그립니다. 

SVG란?
SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을 그릴 수 있는 요소를 제공합니다. D3.js를 잘 사용하기 위해 SVG를 이해하는 것이 좋으므로 간단하게 정리한 [SVG] 글을 읽고 오시길 추천드립니다. 

 

 

설치 방법

D3.js를 사용하기 위해서 다음 3가지 방법으로 설치 가능합니다.

 

1. https://github.com/d3/d3/releases에서 다운받아 프로젝트에 넣어주기

2. CDN 이용하기.

<script src="https://d3js.org/d3.v7.min.js"></script>

3. npm을 통해 d3 설치하여 사용하기

npm install d3
npm install --save-dev @types/d3

import * as d3 from 'd3';

 

 

D3.js 메서드

Selections

• d3.select(selector)
  
  • 문서에서 지정된 CSS 선택자에 해당하는 첫 번째 요소를 선택합니다.
  • selector (문자열): 선택할 요소의 CSS 선택자 문자열.
• d3.selectAll(selector)
  
  • 문서에서 지정된 CSS 선택자에 해당하는 모든 요소를 선택합니다.
  • selector (문자열): 선택할 요소의 CSS 선택자 문자열.
• selection.attr(name, value)
  
  • 선택한 요소의 속성을 설정하거나 가져옵니다.
  • name (문자열): 설정할 속성 이름.
  • value (값 또는 함수): 속성에 할당할 값 또는 값을 반환하는 함수.
• selection.classed(name, value)
  
  • 선택한 요소에 CSS 클래스를 추가하거나 제거합니다.
  • name (문자열): 클래스 이름.
  • value (불리언 또는 함수): 클래스를 추가하거나 제거할 불리언 값 또는 값을 반환하는 함수.
• selection.style(name, value)
  
  • 선택한 요소의 CSS 스타일 프로퍼티를 설정하거나 가져옵니다.
  • name (문자열): CSS 스타일 프로퍼티 이름.
  • value (문자열 또는 함수): 스타일 프로퍼티에 할당할 값 또는 값을 반환하는 함수.
• selection.property(name, value)
  
  • 선택한 요소의 DOM 프로퍼티 값을 설정하거나 가져옵니다.
  • name (문자열): 프로퍼티 이름.
  • value (값 또는 함수): 프로퍼티에 할당할 값 또는 값을 반환하는 함수.
• selection.text(value)
  
  • 선택한 요소의 텍스트 내용을 설정하거나 가져옵니다.
  • value (문자열 또는 함수): 설정할 텍스트 내용 또는 값을 반환하는 함수.
• selection.html(value)
  
  • 선택한 요소의 HTML 내용을 설정하거나 가져옵니다.
  • value (문자열 또는 함수): 설정할 HTML 내용 또는 값을 반환하는 함수.
• selection.append(name)
  
  • 선택한 요소의 자손으로 새로운 요소를 추가합니다.
  • name (문자열): 추가할 요소의 이름(예: "div", "circle").
• selection.insert(name, before)
  
  • 선택한 요소의 자손으로 새로운 요소를 특정 요소 앞에 추가합니다.
  • name (문자열): 추가할 요소의 이름(예: "div", "circle").
  • before (문자열 또는 함수): 새로 추가할 요소를 어떤 요소 앞에 놓을 것인지 지정.
• selection.remove()
  
  • 선택한 요소를 문서에서 제거합니다.
• selection.data(data, key)
  
  • 데이터와 요소를 연결하고 데이터 연결을 관리합니다.
  • data (배열): 연결할 데이터 배열.
  • key (함수 또는 문자열): 데이터 항목을 고유하게 식별하는 키 또는 키를 반환하는 함수.
• selection.enter()
  
  • 새로운 데이터 항목을 처리하기 위한 엔터(enter) 선택을 생성합니다.
• selection.exit()
  
  • 더 이상 필요없는 요소를 처리하기 위한 엑시트(exit) 선택을 생성합니다.
• selection.filter(selector)
  
  • 데이터를 기반으로 선택한 요소를 필터링합니다.
  • selector (문자열 또는 함수): 선택할 요소를 필터링하기 위한 CSS 선택자 문자열 또는 함수.
• selection.datum(value)
  
  • 데이터를 요소에 연결하거나 가져옵니다.
  • value (값 또는 함수): 요소에 연결할 데이터 또는 값을 반환하는 함수.
• selection.sort(comparator)
  
  • 데이터를 기반으로 요소를 정렬합니다.
  • comparator (함수): 요소를 정렬하기 위한 비교 함수.
• selection.order()
  
  • 선택한 요소를 일치하는 순서로 문서에 랜더링합니다.
• selection.on(type, listener, options)
  
  • 이벤트 리스너를 요소에 추가하거나 제거합니다.
  • type (문자열): 이벤트 유형 (예: "click", "mouseover").
  • listener (함수): 이벤트 핸들러 함수.
  • options (객체, 선택 사항): 옵션 설정 (예: 캡처링 설정).
• selection.transition()
  
  • 요소에 대한 애니메이션 전환(transition)을 생성합니다.
• selection.each(callback)
  
  • 선택한 요소에 대해 콜백 함수를 호출합니다.
  • callback (함수): 선택한 요소에 대해 호출되는 함수.
• selection.call(function)
  
  • 선택한 요소에 대해 지정한 함수를 호출합니다.
• selection.empty()
  
  • 선택한 요소가 비어 있는지 여부를 확인합니다.
• selection.node()
  
  • 선택한 요소 중 첫 번째 요소에 접근합니다.
• selection.select(selector)
  
  • 선택한 요소의 자손 중 하나의 요소를 선택합니다.
  • selector (문자열): 선택할 자손 요소의 CSS 선택자 문자열.
• selection.selectAll(selector)
  
  • 선택한 요소의 자손 중 여러 개의 요소를 선택합니다.
  • selector (문자열): 선택할 자손 요소의 CSS 선택자 문자열.
• d3.selection
  
  • 선택물의 프로토타입을 확장하거나 인스턴스 유형을 확인합니다.
• d3.event
  
  • 현재 사용자 이벤트 객체에 접근합니다.
• d3.mouse(container)
  
  • 지정한 컨테이너 요소 내에서의 마우스 좌표를 반환합니다.
  • container (DOM 요소): 마우스 좌표를 가져올 컨테이너 요소
• d3.touches(container)
  
  • 지정한 컨테이너 요소 내에서의 터치 좌표를 반환합니다.
  • container (DOM 요소): 터치 좌표를 가져올 컨테이너 요소

 

트랜지션션

애니메이션된 트랜지션을 생성합니다. 이를 통해 요소들의 속성, 스타일, 텍스트 등을 부드럽게 변경하거나 이동시킬 수 있습니다.

 

• d3.transition
  
  • 애니메이션된 트랜지션을 시작합니다.
• transition.delay(delay)
  
  • 문서요소당 지연시간(밀리초)을 지정합니다.
  • delay (숫자): 각 문서요소에 대한 지연 시간(밀리초).
• transition.duration(duration)
  
  • 문서요소당 지속시간(밀리초)을 지정합니다.
  • duration (숫자): 각 문서요소에 대한 지속 시간(밀리초).
• transition.ease(ease)
  
  • 트랜지션에 이징함수를 지정합니다.
  • ease (함수): 트랜지션의 이징 함수를 정의하는 함수.
• transition.attr(name, value)
  
  • 새로운 속성 값으로 부드럽게 트랜지션합니다.
  • name (문자열): 설정할 속성 이름.
  • value (값 또는 함수): 속성에 할당할 값 또는 값을 반환하는 함수.
• transition.style(name, value)
  
  • 새로운 CSS 스타일 프로퍼티 값으로 부드럽게 트랜지션합니다.
  • name (문자열): CSS 스타일 프로퍼티 이름.
  • value (문자열 또는 함수): 스타일 프로퍼티에 할당할 값 또는 값을 반환하는 함수.
• transition.attrTween(name, factory)
  
  • 두 속성값 사이를 부드럽게 트랜지션합니다.
  • name (문자열): 설정할 속성 이름.
  • factory (함수): 트랜지션의 속성값을 계산하는 함수를 생성하는 함수.
• transition.styleTween(name, factory)
  
  • 두 개의 CSS 프로퍼티 값 사이를 부드럽게 트랜지션합니다.
  • name (문자열): CSS 스타일 프로퍼티 이름.
  • factory (함수): 트랜지션의 CSS 스타일 값을 계산하는 함수를 생성하는 함수.
• transition.text(value)
  
  • 트랜지션이 시작할 때, 텍스트 컨텐츠를 지정합니다.
  • value (문자열 또는 함수): 설정할 텍스트 내용 또는 값을 반환하는 함수.
• transition.tween(name, tween)
  
  • 트랜지션의 한 부분으로 실행하기 위한 사용 지정 tween 연산자를 지정합니다.
  • name (문자열): 연산자의 이름.
  • tween (함수): 트랜지션 연산을 정의하는 함수.
• transition.select(selector)
  
  • 선택물의 각 문서요소의 자손 요소에서 트랜지션을 시작합니다.
  • selector (문자열): 선택할 자손 요소의 CSS 선택자 문자열.
• transition.selectAll(selector)
  
  • 선택물의 각 문서요소의 자손 요소들에서 트랜지션을 시작합니다.
  • selector (문자열): 선택할 자손 요소의 CSS 선택자 문자열.
• transition.filter(selector)
  
  • 데이터를 기준으로 트랜지션을 필터링합니다.
  • selector (문자열 또는 함수): 선택할 요소를 필터링하기 위한 CSS 선택자 문자열 또는 함수.
• transition.transition(name)
  
  • 동일 문서요소에서 다른 트랜지션을 시작합니다.
  • name (문자열): 시작할 트랜지션의 이름.
• transition.remove()
  
  • 트랜지션 종료시점에 선택된 문서요소를 제거합니다.
• transition.each(callback)
  
  • 트랜지션 end 이벤트의 리스너를 추가합니다.
  • callback (함수): 트랜지션 end 이벤트가 발생할 때 호출되는 함수.
• transition.call(function)
  
  • 전달된 함수를 해당 트랜지션에서 호출합니다.
  • function (함수): 트랜지션 내에서 호출할 함수.
• d3.tween
  
  • 트랜지션의 보간작업(interpolation)을 수정합니다.
• d3.ease
  
  • 트랜지션의 타이밍을 수정합니다.
• ease
  
  • 이징 함수를 정의하는 함수.
• d3.timer
  
  • 사용자 정의 애니메이션 타이머를 시작합니다.
• d3.timer.flush
  
  • 타이머를 지연없이 바로 실행합니다.
• d3.interpolate
  
  • 두 값사이를 보간합니다.
• interpolate
  
  • 보간 작업 함수를 정의하는 함수.
• d3.interpolateNumber
  
  • 두 숫자 사이를 보간합니다.
• d3.interpolateRound
  
  • 두 정수 사이를 보간합니다.
• d3.interpolateString
  
  • 두 문자열 사이를 보간합니다.
• d3.interpolateRgb
  
  • 두 RGB 색상 사이를 보간합니다.
• d3.interpolateHsl
  
  • 두 HSL 색상 사이를 보간합니다.
• d3.interpolateLab
  
  • 두 Lab* 색상 사이를 보간합니다.
• d3.interpolateHcl
  
  • 두 HCL 색상 사이를 보간합니다.
• d3.interpolateArray
  
  • 두 배열 사이를 보간합니다.
• d3.interpolateObject
  
  • 두 객체의 속성을 보간합니다.
• d3.interpolateTransform
  
  • 두 개의 2D 행렬 변환를 보간합니다.
• d3.interpolators
  
  • 사용자 정의 인터폴레이터를 등록합니다.

 

배열을 통한 정렬 및 계산 작업 

• d3.ascending(a, b)
  
  • 정렬을 위해 두 값을 비교합니다.
  • a: 비교할 값 중 하나.
  • b: 비교할 다른 값.
• d3.descending(a, b)
  
  • 정렬을 위해 두 값을 비교합니다.
  • a: 비교할 값 중 하나.
  • b: 비교할 다른 값.
• d3.min(array)
  
  • 배열에서 최소값을 찾습니다.
  • array: 최소값을 찾을 배열.
• d3.max(array)
  
  • 배열에서 최대값을 찾습니다.
  • array: 최대값을 찾을 배열.
• d3.extent(array)
  
  • 배열에서 최소 및 최대값을 찾습니다.
  • array: 최소 및 최대값을 찾을 배열.
• d3.sum(array)
  
  • 숫자 배열의 합을 계산합니다.
  • array: 합을 계산할 배열.
• d3.mean(array)
  
  • 숫자 배열의 산술 평균을 계산합니다.
  • array: 산술 평균을 계산할 배열.
• d3.median(array)
  
  • 숫자 배열의 중간값을 계산합니다.
  • array: 중간값을 계산할 배열. (0.5-quantile)
• d3.quantile(array, p)
  
  • 정렬된 숫자 배열에서 quantile을 계산합니다.
  • array: quantile을 계산할 정렬된 숫자 배열.
  • p: quantile의 위치 (0부터 1까지).
• d3.bisect(array, x, lo, hi)
  
  • 정렬된 배열에서 값을 검색합니다.
  • array: 검색할 정렬된 배열.
  • x: 검색할 값.
  • lo: 검색 범위의 하한 인덱스 (선택 사항, 기본값은 0).
  • hi: 검색 범위의 상한 인덱스 (선택 사항, 기본값은 배열의 길이).
• d3.bisectRight(array, x, lo, hi)
  
  • 정렬된 배열에서 값을 검색합니다.
  • array: 검색할 정렬된 배열.
  • x: 검색할 값.
  • lo: 검색 범위의 하한 인덱스 (선택 사항, 기본값은 0).
  • hi: 검색 범위의 상한 인덱스 (선택 사항, 기본값은 배열의 길이).
• d3.bisectLeft(array, x, lo, hi)
  
  • 정렬된 배열에서 값을 검색합니다.
  • array: 검색할 정렬된 배열.
  • x: 검색할 값.
  • lo: 검색 범위의 하한 인덱스 (선택 사항, 기본값은 0).
  • hi: 검색 범위의 상한 인덱스 (선택 사항, 기본값은 배열의 길이).
• d3.bisector(accessor)
  
  • 접근자에서 사용하는 이등분 객체를 반환합니다.
  • accessor: 배열에서 값을 추출하는 함수.
• d3.shuffle(array)
  
  • 배열의 순서를 랜덤하게 섞습니다.
  • array: 섞을 배열.
• d3.permute(array, indexes)
  
  • 색인 배열을 통해 원소 배열을 재 정렬합니다.
  • array: 재 정렬할 배열.
  • indexes: 색인 배열.
• d3.zip(arrays)
  
  • 배열들의 가변수를 변환합니다.
  • arrays: 변환할 배열들의 배열.
• d3.transpose(matrix)
  
  • 배열의 배열을 변환합니다.
  • matrix: 변환할 2D 배열.
• d3.keys(object)
  
  • 연관 배열의 key를 나열합니다.
  • object: key를 나열할 연관 배열.
• d3.values(object)
  
  • 연관 배열의 값을 나열합니다.
  • object: 값을 나열할 연관 배열.
• d3.entries(object)
  
  • 연관 배열의 key-value 항목을 나열합니다.
  • object: key-value 항목을 나열할 연관 배열.
• d3.split(array, key)
  
  • 배열을 여러 개로 분할합니다.
  • array: 분할할 배열.
  • key: 분할 기준이 되는 key.
• d3.merge(arrays)
  
  • 여러 배열을 하나로 합칩니다.
  • arrays: 합칠 배열들의 배열.
• d3.range([start, ]stop, [step])
  
  • 숫자형 값의 범위를 생성합니다.
  • start: 시작 값 (선택 사항, 기본값은 0).
  • stop: 종료 값.
  • step: 간격 (선택 사항, 기본값은 1).
• d3.nest()
  
  • 배열 원소를 계층 구조로 그룹짓습니다.
• nest.key(accessor)
  
  • 중첩 계층 구조 단계를 추가합니다.
  • accessor: 각 요소에서 key를 추출하는 함수.
• nest.sortKeys(comparator)
  
  • key로 해당 중첩 단계를 정렬합니다.
  • comparator: key를 비교하는 함수.
• nest.sortValues(comparator)
  
  • 값으로 리프(leaf) 중첩 단계를 정렬합니다.
  • comparator: 값들을 비교하는 함수.
• nest.rollup(rollup)
  
  • 리프 값을 위한 rollup 함수를 지정합니다.
  • rollup: 리프 값을 결합하는 함수.
• nest.map(array)
  
  • nest 연산자를 평가해서 연관 배열을 반환합니다.
  • array: nest에 전달할 배열.
• nest.entries(array)
  
  • nest 연산자를 평가해서 정리된 key-values 배열을 반환합니다.
  • array: nest에 전달할 배열.

 

D3.js 참고 사이트

https://d3js.org/

D3 by Observable | The JavaScript library for bespoke data visualization