D3.js

개요 / Overview

D3.js(Data-Driven Documents)는 웹을 위해 만들어진 시각화 라이브러리 중 가장 영향력 있는 라이브러리입니다. 마이크 보스톡(Mike Bostock)이 스탠퍼드 대학교 박사 과정 중에 작성한 D3는 데이터를 DOM 요소에 바인딩하고 데이터 기반 변환을 적용하는 저수준 툴킷을 제공합니다. 미리 만들어진 차트 유형을 제공하는 고수준 차팅 라이브러리와 달리, D3는 스케일, 축, 도형, 레이아웃, 투영법, 포스, 계층 구조 같은 원시 요소들을 제공하며, 이를 조합하여 상상할 수 있는 어떤 시각화든 만들 수 있습니다.

D3.js (Data-Driven Documents) is the most influential visualization library ever created for the web. Written by Mike Bostock during his PhD at Stanford, D3 provides a low-level toolkit for bindng data to DOM elements and applying data-driven transformations. Unlike high-level charting libraries that offer pre-built chart types, D3 gives you primitives — scales, axes, shapes, layouts, projections, forces, hierarchies — that you compose to build any visualization imaginable.

D3는 전통적인 의미의 차팅 라이브러리가 아닙니다. "막대 차트" 함수 같은 것은 없습니다. 대신 DOM 요소를 선택하고, 데이터에 바인딩하고, 스케일로부터 위치를 계산하고, 사각형을 그리고, 축을 추가하고, 전환을 애니메이션화하는 도구를 제공합니다. 이러한 저수준 접근 방식 덕분에 D3에는 한계가 없습니다: 시각화를 상상할 수만 있다면 D3로 만들 수 있습니다. 이것이 D3가 뉴욕 타임스, 워싱턴 포스트, 더 퍼딩(The Pudding), 그리고 셀 수 없이 많은 데이터 기반 매체의 인터랙티브 그래픽을 구동하는 이유입니다.

D3 is not a charting library in the traditional sense. It does not have a "bar chart" function. Instead, it gives you the tools to select DOM elements, bindthem to data, compute positions from scales, draw rectangles, add axes, and animate transitions. This low-level approach means D3 has no ceiling: if you can imagine a visualization, D3 can build it. This is why D3 powers the interactive graphics at The New York Times, The Washington Post, The Pudding, and countless other data-driven publications.

D3 v7(현재 메이저 버전)은 완전히 모듈화되어 있어 필요한 부분만 가져올 수 있습니다. 생태계에는 d3-scale, d3-shape, d3-geo, d3-hierarchy, d3-force, d3-transition을 비롯한 많은 하위 모듈이 포함되어 있습니다. D3는 또한 여러 고수준 도구의 렌더링 엔진 역할도 합니다: Observable Plot, Vega, Flourish, Datawrapper 모두 내부적으로 D3 위에 구축되어 있습니다.

D3 v7 (the current major version) is fully modular — you can import only the pieces you need. The ecosystem includes d3-scale, d3-shape, d3-geo, d3-hierarchy, d3-force, d3-transition, and many more sub-modules. D3 is also the rendering engine behind many higher-level tools: Observable Plot, Vega, Flourish, and Datawrapper all build on D3 internally.

강점 / Strengths

• 만들 수 있는 것에 한계가 없습니다 — 어떤 시각화든 가능합니다
• No ceiling on what you can create — any visualization is possible
• 모든 픽셀, 요소, 인터랙션에 대한 세밀한 제어
• Fine-grained control over every pixel, element, and interaction
• 부드러운 데이터 업데이트를 위한 강력한 전환·애니메이션 시스템
• Powerful transition and animation system for smooth data updates
• 모든 지도 투영법을 지원하는 포괄적인 지리 투영 라이브러리(d3-geo)
• Comprehensive geographic projection library (d3-geo) for any map projection
• 네트워크 다이어그램과 시뮬레이션을 위한 포스 디렉티드 레이아웃
• Force-directed layouts for network diagrams and simulations
• 계층형 레이아웃: 트리맵, 선버스트 다이어그램, 원 패킹, 덴드로그램
• Hierarchical layouts: treemaps, sunbursts, circle packing, dendrograms
• 모듈형 아키텍처 — 필요한 것만 가져와 사용
• Modular architecture — import only what you need
• 방대한 생태계: Observable과 bl.ocks.org에 수천 개의 예제
• Massive ecosystem: thousands of examples on Observable and bl.ocks.org
• 데이터 저널리즘과 맞춤형 인터랙티브 시각화의 업계 표준
• Industry standard for data journalism and bespoke interactive visualizations
• SVG, Canvas, 심지어 WebGL과도 함께 작동
• Works with SVG, Canvas, or even WebGL

한계 / Limitations

• 가파른 학습 곡선 — 탄탄한 JavaScript 기초가 필요합니다
• Steep learning curve — requires strong JavaScript fundamentals
• 장황함: 단순한 막대 차트도 50줄 이상의 코드가 필요할 수 있습니다
• Verbose: a simple bar chart can be 50+ lines of code
• 내장 차트 유형 없음 — 모든 것을 원시 요소로부터 조립해야 합니다
• No built-in chart types — everything is assembled from primitives
• 데이터 조작은 별도로(또는 d3-array를 통해) 처리해야 합니다
• Data manipulation must be handled separately (or via d3-array)
• 반응형 디자인은 수동입니다 — 리사이즈 이벤트를 직접 처리해야 합니다
• Responsive design is manual — you must handle resize events yourself
• React/Vue/Svelte와의 통합은 DOM 소유권을 신중하게 처리해야 합니다
• Integration with React/Vue/Svelte requires careful handling of DOM ownership
• 접근성(스크린 리더, 키보드 내비게이션)은 직접 구현해야 합니다
• Accessibility (screen readers, keyboard navigation) must be manually implemented
• 복잡한 셀렉션과 데이터 조인을 디버깅하는 것은 답답할 수 있습니다
• Debugging complex selections and data joins can be frustrating
• 내장 범례, 툴팁, 주석 헬퍼가 없습니다
• No built-in legends, tooltips, or annotation helpers

이런 용도에 최적 / Best For

필요한 시각화를 기존 라이브러리로는 만들 수 없을 때 D3가 올바른 선택입니다. 데이터 저널리즘을 위한 맞춤형 시각화, 독특한 인터랙티브 경험, 어떤 라이브러리에도 존재하지 않는 새로운 차트 유형, 그리고 모든 시각 요소에 픽셀 단위의 제어가 필요한 상황에서 특히 뛰어납니다. 수백만 명이 보게 될, 이전에 만들어진 적 없는 시각화를 만들고 있다면 D3가 그 도구입니다. 표준적인 차트라면 D3 위에 구축된 Observable Plot을 대신 고려해보세요.

D3 is the right tool when no existing library can produce the visualization you need. It excels at custom, bespoke visualizations for data journalism, unique interactive experiences, novel chart types that do not exist in any library, and situations where you need pixel-perfect control over every visual element. If you are building a visualization that will be seen by millions and needs to be unlike anything created before, D3 is the tool. For standard charts, consider Observable Plot (which is built on D3) instead.

시작하기 / Getting Started

npm으로 설치합니다:

Install via npm:

npm install d3

또는 CDN에서 사용합니다:

Or use from a CDN:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

막대 차트를 만듭니다:

Create a bar chart:

import * as d3 from "d3";

const data = [
  { name: "A", value: 30 },
  { name: "B", value: 80 },
  { name: "C", value: 45 },
  { name: "D", value: 60 }
];

const width = 600, height = 400, margin = { top: 20, right: 20, bottom: 30, left: 40 };

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const x = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.left, width - margin.right])
  .padding(0.2);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .nice()
  .range([height - margin.bottom, margin.top]);

svg.selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", d => x(d.name))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => y(0) - y(d.value))
  .attr("fill", "steelblue");

svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

지원 차트 유형 / Supported Chart Types

D3는 그야말로 어떤 2D 시각화든 만들 수 있습니다. 내장된 레이아웃과 도형 생성기는 막대 차트, 누적 막대 차트, 선 그래프, 영역 그래프, 파이 차트, 도넛 차트, 산점도, 버블 차트, 히스토그램, 히트맵, 트리맵, 선버스트 다이어그램, 원 패킹, 덴드로그램, (d3-sankey를 통한) 샌키 다이어그램, 코드 다이어그램, (포스 디렉티드) 네트워크 다이어그램, (어떤 투영법이든 가능한) 코로플레스 맵, 헥스빈 맵, 등고선 플롯, 바이올린 플롯, 박스 플롯, 평행 좌표 플롯, (d3-cloud를 통한) 워드 클라우드, 레이더 차트를 직접 지원합니다. 어떤 차트 유형이 존재한다면 D3로 만들 수 있습니다. 아직 존재하지 않는 차트 유형이라면, D3가 바로 그것을 발명하는 방법입니다.

D3 can create literally any 2D visualization. Its built-in layouts and shape generators directly support: bar charts, stacked bar charts, line graphs, area graphs, pie charts, donut charts, scatterplots, bubble charts, histograms, heatmaps, treemaps, sunburst diagrams, circle packing, dendrograms, Sankey diagrams (via d3-sankey), chord diagrams, network diagrams (force-directed), choropleth maps (with any projection), hexbin maps, contour plots, violin plots, box plots, parallel coordinates, word clouds (via d3-cloud), and radar charts. If a chart type exists, D3 can build it. If a chart type does not exist yet, D3 is how you would invent it.