D3.js Magic

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. It is making use of the widely implemented Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) standards.

                Embedded within an html webpage, the JavaScript D3.js library uses pre-built JavaScript functions to select elements, create SVG objects, style them, or add transitions, dynamic effects or tooltips to them. These objects can also be widely styled using CSS. Large datasets can be easily bound to SVG objects using simple D3 functions to generate rich text/graphic charts and diagrams. The data can be in various formats, most commonly JSON, CSV but, if required, JavaScript functions can be written to read other data formats.

Selections

The central principle of D3 design is to enable the programmer to first use a CSS-style selector to select a given set of Document Object Model (DOM) nodes, then use operators to manipulate them in a similar manner to jQuery. For example, by using D3, one may select all HTML <p>...</p> elements, and then change their text color.

 d3.selectAll("p").style("color", "lavender");

The selection can be based on tag (as in the above example), class, identifier, attribute, or place in the hierarchy. Once elements are selected, one can apply operations to them. This includes getting and setting attributes, display texts, and styles (as in the above example). Elements may also be added and removed. This process of modifying, creating and removing HTML elements can be made dependent on data, which is the basic concept of D3.js.

Transitions

By declaring a transition, values for attributes and styles can be smoothly interpolated over a certain time. The following code will make all HTML <p>...</p> elements on a page gradually change their text color to pink:

 d3.selectAll("p") .transition().style("color", "pink");

The default duration of such transitions is 250ms. However, this value can be changed in the code. Besides duration, important characteristics of transitions are delay and ease.

Data-binding

For more advanced uses, loaded data drives the creation of elements. D3 load a given dataset, then, for each element of it, create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events).

Appending nodes using Data

Once data is bound d3js will follow a pattern utilizing explicit .enter() command, an implicit update and explicit .exit(). Using method chaining anything following the .enter() command will be called for each data item that isn't represented by a node on the selection while update is called on all existing nodes and .exit() is called on all existing nodes that do not have data to bind to them. There are several examples of how this works 

API Structure

D3.js API contains several hundred functions, and they can be grouped into following logical units

Selections

Transitions

Arrays

Math

Color

Scales

SVG

Time

Layouts

Geography

Geometry

Math

• Generation of pseudorandom numbers with different distributions

• Transformations in 2D: translation, rotation  skew, and scaling.

 Arrays

D3 array operations are built to complement existing array support in JavaScript (mutator methods: sort, reverse, splice, shift and unshift; accessor methods: concat, join, slice, indexOf and lastIndexOf; iteration methods: filter, every, forEach, map, some, reduce and reduceRight). D3 extends this functionality with:
Functions for finding minimum, maximum, extent, sum, mean, median, and quantile of an array.
Functions for ordering, shuffling, permuting, merging, and bisecting arrays.
Functions for nesting arrays.
Functions for manipulating associative arrays.
Support for map and set collections.     

                                                                                                        

Geometry

Computing convex hull of a set of points.

Computing Voronoi tesselation of a set of points.

Support for point quadtree data structure.

Support for basic operations on polygons.

Color

Support for RGB, HSL, HCL, and L*a*b* color representation.

Brightening, darkening, and interpolation of colors.

Note.  Please find a similar writing about D3.js here