# D3 심층 분석

> Clean Markdown view of GeekNews topic #14866. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14866](https://news.hada.io/topic?id=14866)
- GeekNews Markdown: [https://news.hada.io/topic/14866.md](https://news.hada.io/topic/14866.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-05-18T08:38:43+09:00
- Updated: 2024-05-18T08:38:43+09:00
- Original source: [d3indepth.com](https://www.d3indepth.com/)
- Points: 4
- Comments: 1

## Topic Body

### D3 in Depth

#### D3 in Depth는 D3 버전 6과 7을 다룸

- **홈페이지**: D3 in Depth는 D3.js의 최신 버전인 6과 7을 다루는 사이트임.
- **소개**: 이 사이트는 D3.js를 이용한 데이터 시각화에 대한 깊이 있는 내용을 제공함.
- **뉴스레터**: 뉴스레터를 통해 책 할인 정보와 D3.js 관련 뉴스 및 팁을 받을 수 있음.

#### 책 및 강좌

- **Visualising Data with JavaScript**: Chart.js, Leaflet, D3, React를 사용하여 차트, 대시보드 및 데이터 스토리를 만드는 방법을 가르침.
  - "내가 읽은 최고의 D3 책 중 하나. 내용이 매우 명확하고 따라하기 쉬우며 개념이 매우 탄탄함." - Javier García Fernández
- **커스텀 데이터 시각화**: D3.js를 사용하여 커스텀 데이터 시각화를 만드는 방법을 배울 수 있음.
- **기초 학습**: 웹에서 데이터 시각화를 구축하기 위한 HTML, SVG, CSS 및 JavaScript의 기본을 배울 수 있음.

#### 목차

- **D3 소개**
- **시작하기**
- **선택(Selections)**
- **데이터 조인(Data joins)**
- **Enter, exit & update**
- **스케일 함수(Scale functions)**
- **도형(Shapes)**
- **축(Axes)**
- **계층(Hierarchies)**
- **코드 다이어그램(Chord Diagrams)**
- **포스 레이아웃(Force layout)**
- **지도(Maps)**
- **데이터 요청(Data Requests)**
- **전환(Transitions)**
- **선택, 드래그 및 브러싱(Picking, Dragging and Brushing)**
- **줌 & 팬(Zoom & pan)**

#### 뉴스레터

- **구독**: 책 할인 정보와 D3.js 관련 뉴스 및 팁을 받을 수 있음.

#### 저작권

- **© Peter Cook 2023**

### GN⁺의 의견

- **D3.js의 중요성**: D3.js는 데이터 시각화 라이브러리로, 복잡한 데이터를 시각적으로 표현하는 데 매우 유용함. 특히 대규모 데이터 세트를 다룰 때 강력한 도구임.
- **학습 곡선**: D3.js는 강력하지만 학습 곡선이 가파를 수 있음. 이 사이트는 초보자부터 고급 사용자까지 모두에게 유용한 자료를 제공함.
- **다양한 도구와의 통합**: Chart.js, Leaflet, React 등 다른 도구와의 통합 방법을 배울 수 있어, 다양한 프로젝트에 적용 가능함.
- **실습 중심**: 이 사이트는 실습 중심으로 구성되어 있어, 실제 프로젝트에 바로 적용할 수 있는 지식을 얻을 수 있음.
- **기술 선택 시 고려사항**: D3.js를 선택할 때는 프로젝트의 복잡성, 팀의 기술 수준, 유지보수 가능성 등을 고려해야 함. D3.js는 강력하지만, 간단한 시각화에는 오히려 과도할 수 있음.

## Comments



### Comment 25343

- Author: neo
- Created: 2024-05-18T08:38:44+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40378791) 
##### 해커뉴스 댓글 모음 요약

* **Observable Plot과 Observable Framework 소개**
  - D3를 사용한 데이터 시각화에 관심이 있다면, 더 높은 수준의 편의성을 제공하는 Observable Plot을 확인해볼 만함.
  - Observable Framework는 정적 사이트 생성기로, Plot, D3 및 다양한 라이브러리를 지원하여 시각화 대시보드를 구축할 수 있음.
  - [Observable Plot](https://observablehq.com/plot/)
  - [Observable Framework](https://observablehq.com/framework/)

* **D3 사용의 어려움**
  - D3를 사용한 경험이 많지만, 몇 년 만에 다시 사용하면 문서가 혼란스럽고 처음부터 다시 시작하는 느낌을 받음.
  - 수학 문제를 푸는 것보다 D3 문서를 이해하는 것이 더 어려움.

* **D3 학습의 가치**
  - D3를 전문적으로 사용하지 않더라도 학습할 가치가 있음.
  - 데이터의 투영과 실제 데이터의 차이를 이해하고, 이를 스케일링하는 방법을 배울 수 있음.
  - 웹이 아니더라도 다른 환경에서 데이터 시각화를 할 때 유용함.

* **D3.js의 발전과 현대적 대안**
  - D3.js를 사용하여 많은 프로젝트를 진행했지만, 이제는 구식으로 느껴짐.
  - Vue 3와 TypeScript 같은 현대적인 프레임워크로 전환했지만, D3.js가 준 좋은 실천 방법들에 감사함.

* **VisX와 같은 대안**
  - D3를 배우고 나서 VisX와 같은 구조화된 도구로 전환하는 것이 좋음.
  - D3와 jQuery는 스파게티 코드가 되기 쉬움.

* **Grammar of Graphics와 ggplot2**
  - D3는 Wilkinson의 Grammar of Graphics에서 영감을 받음.
  - R 언어의 ggplot2도 같은 영감을 받아 더 간결하고 기능적인 인터페이스를 제공함.

* **강제 지향 그래프의 문제**
  - D3 예제의 강제 지향 그래프를 좋아하지만, 노드와 엣지가 많아지면 구성이 좋지 않게 됨.
  - 3D 시각화가 필요할 수도 있음.

* **유용한 D3 리소스**
  - D3를 이해하는 데 도움이 된 유일한 리소스가 있었음.
  - 저자가 응답성이 좋고 도움이 됨.

* **Vega 소개**
  - D3 위에 있는 Vega에 대해 좋은 이야기를 들음.
  - OpenSearch Dashboards의 종속성으로, 사용자들이 로그와 관찰 데이터에 대한 맞춤형 대시보드를 만들 수 있게 함.
  - [Vega 문서](https://vega.github.io/vega/docs/)
  - [OpenSearch Dashboards에서 Vega 사용](https://opensearch.org/docs/latest/dashboards/visualize/vega/)

* **D3 문법의 복잡성**
  - D3로 만든 시각화는 좋지만, 문법이 너무 복잡하고 구식임.
  - 더 선언적인 방식으로 전환되어 다행임.