D3: Data-Driven Documents

Data-Driven Documents (D3.js) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. D3.js API contains various methods which can be grouped into the following logical units - Selections, Transitions, Arrays, Math, Color, Scales, SVG, Time, Layouts, Geography, Geometry, Behaviors.

D3.js Logo

D3.js helps you visualize data by combining powerful visualization and interaction techniques with a data-driven approach to DOM manipulation. It also provides full capabilities of modern browsers by designing the right visual interface for your data.

D3.js version 1.0.0 was released back in 18 February 2011.

Why D3.js?

For those already familiar with HTML and CSS, D3 is quick to learn. Unlike Processing, Raphaël, or Protovis, D3's vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS - https://d3js.org/

Get Started

There are over 20,000 D3.js examples you could learn from, but you never know how approachable any given one will be! So, the question is - how do you build up your visualization from first principles? As you've probably seen, D3's API is massive, so lets call out a few of the utilities that will be particularly helpful early on:

So, with just some basic knowledge of the latest HTML5 features such as SVG, and canvas, you can dive into a world where libraries like D3.js bring data to life!

Contribution

Resources


Contributing to the Guide

This open source guide is curated by thousands of contributors. You can help by researching, writing and updating these articles. It is an easy and fun way to get started with contributing to open source.