1. D3.js란

• D3 : Data-Driven Documents (데이터 기반 문서)
• 웹브라우저 상에서 동적이고 인터렉티브한 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리
• 웹 표준에 기반한 로우레벨 접근 방식은 동적인 데이터 기반 그래픽을 제작할 때 탁월한 유연성을 제공함

2. SVG란

• SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷
• JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장
• SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 적합

3. D3.js의 동작 원리

1. 데이터 바인딩: D3.js는 일반적으로 데이터 개체 배열인 데이터 세트로 시작합니다. 이 데이터를 바인딩하려는 HTML DOM의 요소를 선택합니다. 예를 들어 시각화의 컨테이너 역할을 할 빈

   요소를 선택할 수 있습니다.

   var data = [10, 20, 30, 40, 50];
   var divs = d3.select("div").selectAll("div")
              .data(data)
              .enter()
              .append("div");

2. 데이터 결합: .data() 메서드는 데이터를 선택한 요소와 연결합니다. enter() 메서드는 해당 DOM 요소가 없는 각 데이터 포인트에 대한 자리 표시자를 생성하며, 그런 다음 이러한 요소를 추가하거나 수정하여 데이터를 나타낼 수 있습니다.

3. 데이터 변환 및 시각화: D3.js를 사용하여 데이터를 기반으로 선택한 요소를 조작할 수 있습니다. 여기에는 막대 차트의 직사각형 높이 및 너비와 같은 속성을 설정하거나 데이터 값을 기반으로 척도, 색상 및 기타 스타일을 적용하는 작업이 포함되는 경우가 많습니다.

   divs.style("height", function(d) { return d + "px"; });

4. 상호 작용 및 애니메이션: D3.js를 사용하면 시각화에 상호 작용을 추가할 수 있습니다. 마우스 클릭이나 마우스 오버 등의 사용자 작업에 응답하고 다양한 상태나 데이터 업데이트 간의 전환을 애니메이션으로 표시할 수 있습니다.

   divs.on("mouseover", function(d) {
     d3.select(this).style("background-color", "blue");
   });

5. SVG 및 기타 요소: D3.js는 SVG(Scalable Vector Graphics)를 사용하여 원, 선, 경로와 같은 그래픽 요소를 만드는 경우가 많습니다. 시각화에서 이러한 SVG 요소를 생성하고 조작할 수 있습니다.

6. 눈금 및 축: D3는 눈금을 생성하여 데이터 값을 화면 좌표에 매핑하고 축을 생성하여 시각화에 대한 컨텍스트를 제공하는 다양한 도우미 기능을 제공합니다.

7. 데이터 업데이트: D3.js를 사용하면 기본 데이터가 변경될 때 시각화를 쉽게 업데이트할 수 있습니다. 새 데이터를 다시 바인딩할 수 있으며 D3.js는 이에 따라 시각화를 업데이트합니다.

8. 데이터 로드: D3.js는 CSV 파일, JSON 또는 API와 같은 다양한 소스에서 데이터를 로드하는 기능도 제공합니다.

9. D3.js는 하위 수준 라이브러리이므로 시각화가 생성되고 업데이트되는 방식을 다양하게 제어할 수 있습니다. 그러나 이는 복잡한 시각화를 구축하려면 상당한 양의 코드와 JavaScript, HTML 및 CSS에 대한 충분한 이해가 필요할 수 있음을 의미하기도 합니다.

참고

https://d3js.org/what-is-d3

https://github.com/d3/d3

https://ko.wikipedia.org/wiki/D3.js

https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html

https://www.phind.com/search?q=How d3.js works&source=searchbox