이 노트북 시리즈는 D3.js의 첫 단계를 안내합니다.

https://observablehq.com/@d3/learn-d3 

시작하기 전에 D3을 배우는 데 왜 귀찮을까요? 그리고 왜 Observable에서 여기서 배우나요?

하나는 D3가 인기 (80M 다운로드 및 90K 스타)이기 때문에 좋은 회사입니다.

튜토리얼, 비디오, 강의 및 서적을 포함하여 많은 커뮤니티 개발 리소스가 있습니다.

또한 D3 팀은 학습 및 생산성을 높이기 위해 수백 가지의 고유 한 예제 및 자습서를 게시했습니다.

D3는 유연합니다. D3의 초강력은 원하는 모든 것, 즉 창조적인 자유를 할 수 있다는 것입니다.

D3 갤러리는 트리 맵, 계층 적 에지 번들링, Sankey 다이어그램, 밀도 등고선, 힘 지향 그래프 등 형식의 진정한 동물원입니다. (그리고 거의 백지도 투영!)

이러한 유연성은 D3의 저수준 접근 방식에서 비롯되며 구성 가능한 차트가 아닌 모양 및 배율과 같은 구성 가능한 기본 요소에 중점을 둡니다. D3는 제한이 없으므로 최신 브라우저가 지원하는 모든 종과 휘파람을 이용하십시오.

그리고 D3는 애니메이션과 상호 작용으로 유명합니다. 몇 분이 지나면 막대 차트 경주 또는 애니메이션 트리 맵을 보십시오. 계층 막대 그래프, 축소 가능한 트리 또는 확대 가능한 햇살, 트리 맵 또는 묶음 원으로 다이빙합니다.

또는 산점도 행렬을 브러시 처리하거나 영역 차트를 확대하십시오. 애니메이션은 스토리 텔링을 위한 강력한 장치 일 수 있으며 상호 작용을 통해 활발한 독자가 탐색 할 수 있습니다.

물론이 힘은 비용이 든다. 배울 점이 많습니다. D3에는 30 개가 넘는 모듈과 수천 가지 방법이 있습니다! 또한 Vega-Lite와 같은 탐색 적 시각화 용 도구보다 D3이 더 지루할 수 있습니다.

하지만 바로 Observable이 등장합니다.

Observable은 D3 학습에 이상적인 환경으로 스프레드 시트와 같은 데이터 흐름으로 코드를 단순화합니다.

편집 할 때 셀은 자동으로 실행되어 빠른 피드백을 제공합니다. 거의 코드없이 인터랙션이나 애니메이션을 추가 할 수 있습니다! 우리는 Observable의 특징과 특징을 다룰 것입니다.

Observable은 공동 작업을 중심으로 커뮤니티에서 배우고 지역 사회에 환원하는 데 도움을 줍니다.

복사하여 붙여 넣기를 넘어서십시오. 모든 노트북을 포크로 가져 오거나 가져올 수 있습니다. 노트북은 색상 범례 또는 세정기와 같은 재사용 가능한 구성 요소를 내보낼 수 있습니다. 셀에 주석을 달거나 변경 사항을 제안 및 병합하거나 도움을 요청할 수 있습니다.

충분한 서곡. 커튼을 올리고 D3를 처음으로 살펴 보겠습니다.

목차 

1. 소개-여기 있습니다!
2. 예제 별-예제 찾기, 분기, 가져 오기
3. 데이터-데이터로드, 파싱, 변환
4. Scales-추상적인 시각적 만들기
5. 모양-시각화를 위한 기하학적 기본 요소
6. 애니메이션-시간이 지남에 따라 변하는 그래픽
7. Joins-DOM 조작을 위한 D3의 패턴
8. 상호 작용-사용자 입력에 응답
9. 추가 주제-다음 단계