D3 (Data-Driven Documents)


“D3” stands for Data-Driven Documents. The data refers to the thing you want to visualize, and the document refers to its visual representation. It’s called a “document” because D3 is based on the standard model for web pages: the Document Object Model (DOM).

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

2D graphics

D3 is not a traditional visualization framework. Rather than introduce a novel graphical grammar, D3 solves a different, smaller problem: efficient manipulation of documents based on data. Thus D3’s core contribution is a visualization “kernel” rather than a framework, and its closest analogues are other document transformers such as jQuery, CSS and XSLT.

D3 is still a declarative language for visualization design.

For example, you can use D3 to generate from an array of numbers:

  • an HTML table .
  • or an interactive SVG bar chart with smooth transitions and interaction.

D3 helps you bring data to life using:

The core D3 library has minimal requirements:

D3 provides a declarative framework for mapping data to visual elements. However, unlike Protovis and other grammar-based declarative models , D3 does not strictly impose a toolkit-specific lexicon of graphical marks. Instead, D3 directly maps data attributes to elements in the document object model.

D3 is designed to complement web standards (not to cache them).


<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  • Via Node
npm install d3
yarn add d3


D3 - API



Documentation / Reference

Task Runner