D3.js: Data-Driven Documents
D3.js (Data-Driven Documents) is a JavaScript library for creating data visualizations in web browsers using SVG, HTML, and CSS. It is simultaneously the most powerful and most technically demanding web visualization tool available. Unlike high-level libraries like Chart.js or Vega-Lite that provide pre-built chart types, D3 provides the low-level building blocks — data binding, DOM manipulation, scales, geometric algorithms — that are assembled into any custom visualization. This fundamental flexibility is D3's greatest strength and the source of its steep learning curve.
The central concept in D3 is the data-DOM binding: the idea that data values are bound directly to DOM elements (SVG shapes, HTML elements), and that the visual properties of those elements (position, color, size) are derived from the bound data. This binding is bidirectional: when data changes, the visualization updates; when the user interacts with a visual element, the interaction can trigger data computation. The result is a visualization that is genuinely reactive to data and user input at a fundamental level that higher-level libraries implement as abstractions.
D3's select and selectAll functions choose DOM elements (using CSS selector syntax) for manipulation. The data() method binds an array of data values to a selection of elements. The enter() method returns the 'enter selection' — the data values for which no corresponding DOM element yet exists (i.e., new data that needs new elements). The exit() method returns the 'exit selection' — DOM elements for which no corresponding data value exists (elements that should be removed). This enter-update-exit pattern is the core mechanism for keeping the visualization synchronized with its data, whether for initial rendering, for updating when data changes, or for transitions.
D3's scale functions are the bridge between data values and visual properties. A linear scale maps a continuous data domain (e.g., $0 to $10 million) to a visual range (e.g., 0 to 600 pixels for chart height). A logarithmic scale does the same with logarithmic compression (useful for data spanning multiple orders of magnitude). Ordinal scales map discrete categories to visual values (colors, positions). Band scales are a special type of ordinal scale particularly useful for bar charts — they automatically calculate bar widths and positions given a set of categories and an output range.