D3.js (Data-Driven Documents)

D3.js 시작하기

• D3.js 개요
• D3.js 요소 추가 - append()
• D3.js 데이터 바인딩 방법 - data(), enter()
• D3.js selection 태그 선택 및 조작 - select(), selectAll()
• D3.js SVG 사용법 - rect, circle, line text
• D3.js 산포도 그래프를 단계별 그리며 설명 - scaleLinear(), domain(), range(), axisBottom()

D3.js 기본 사용법

• D3.js data 사용법 - Enter, Update, Exit
• D3.js 테이블 그리기 - Object.keys(), map()
• D3.js Grid(그리드) 그리기
• D3.js 컬러 스케일(Color Scale)을 만드는 방법 - , d3.scaleLinear, d3.scaleOrdinal, d3.interpolate, d3.scaleSequential, d3.scaleThreshold

D3.js Event

• D3.js drag 사용법 - d3.drag()
• D3.js zoom 사용법
• D3.js 범위 선택(d3.brush) 사용법
• D3.js 범위 선택(d3.brush) 터치 패널 사용법

D3.js 차트(Chart)

• D3.js 막대 그래프(bar chart)
• D3.js 가로 Bar Graph(막대형 그래프) 그리기
• D3.js 파이 차트(Pie Chart) 만들기
• D3.js 산포도(Scatter Plot) 그리기
• D3.js 꺾은 선형 차트(line chart) 만들기
• D3.js 꺾은 선형 그래프/산포도 종류
• D3.js 면 그래프(area chart) 만드는 방법

D3.js 계층(Hierarchy)

pack

• D3.js hierarchy 데이터 구조 및 사용법
• D3.js cluster 사용법
• D3.js cluster 원주에 노드를 배치하는 방법
• D3.js pack 사용법

D3.js forceSimulation

• D3.js forceSimulation 기본 구성
• D3.js forceSimulation 노드(node) 상호작용 설명
• D3.js forceSimulation 링크(link) 작용력
• D3.js forceSimulation 좌표 갱신 알고리즘/실행 함수
• D3.js forceSimulation 레이디얼(radial) 포스
• D3.js forceSimulation 노드에 여러 svg를 포함하는 방법
• D3.js forceSimulation 강조 표시(highlight)