freeCodeCamp/guide/english/d3/index.md

2.5 KiB

title
D3

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?

D3* does not introduce a new visual representation. 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:

  • d3-scale

  • d3-shape

  • d3-selection

  • d3-collection

  • d3-hierarchy

  • d3-zoom

  • d3-force

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

Contribution

Resources