D3 (Data-Driven Documents)
About
“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:
- the W3C DOM API.
- the Selectors API Level 1 (You can preload Sizzle for compatibility)
- and CSS3 Transitions
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).
Installation
- In a HTML page (or for a specific version try: https://cdnjs.com/libraries/d3)
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
- Via Node
npm install d3
yarn add d3