• D3.js
• Context
  • Selections
  • Transitions
  • Data-binding
  • Appending nodes using data
• API structure
  • Maths
  • Arrays
  • Geometry
  • Color

D3.js

D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, Interactive data visualization in web browsers.

D3.js (也称为D3 ，是数据驱动文档的缩写)是一个JavaScript库，
用于在网络浏览器中产生动态的、交互式的数据可视化。

It makes use of

• Scalable Vector Graphics(SVG),
• HTML5,
• and Cascading Style Sheets(CSS)

standards.

它利用了可缩放矢量图形，HTML5，和级联样式表标准。

It is the successor to the earlier Protovis framework.

它是早期Protovis框架的继承者。

Its development was noted in 2011,

as version 2.0.0 was released in August 2011.

随着2.0.0版本于2011年8月发布，2011年注意到了它的发展。

Context

There have been various previous attempts

to bring data visualization

to web browsers.

The most notable examples were the Prefuse,Flare,and Protovis toolkits,

which can all be considered

as direct predecessors of D3.js.

Prefuse was a visualization toolkit created in 2005

that required usage of Java,

and visualizations were rendered within browsers

with a Java plug-in,

Flare was a similar toolkit from 2007

that used ActionScript,

and required a Flash plug-in for rendering.

In 2009, based on the experience of developing and utilizing Prefuse and Flare,

Jeffrey Heer, Mike Bostock, and Vadim Ogievetsky

of Stanford University's Stanford Visualization Group

created Protovis,

a JavaScript library to generate SVG graphics from data.

The library was known to data visualization practitioners and academics.

In 2011,

the development of Protovis was stopped to focus on a new project,

D3.js.

Informed by experiences with Protovis, Bostock,

along with Heer and Ogievetsky,

developed D3.js to provide a more expressive framework that,

at the same time,

focuses on web standards and provides improved performance.

The D3.js library uses pre-built functions to select elements,

create SVG objects,style them, or add transitions, dynamic effects or tooltips to them.

These objects can also be styled using CSS.

Large datasets can be bound to SVG objects using D3.js functions to generate text/graphic charts and diagrams.

The data can be in various formats such as JSON, comma-separated values(CSV) or geoJSON,

but,if required, JavaScript functions can be written to read other data formats.

Selections

The central principle of D3.js design is to enable the programmer to first use a CSS-style selector

to selector a given set of Document Object Model(DOM) nodes,

then use operators to manipulate them in a similar manner to Jquery.

For example,one may select all HTML <p>...</p> elements,

and then change their text color,

e.g. to lavender:

d3.selectAll("p")              // select all <p> elements
  .style("color", "lavender")  // set style "color" to value "lavender"
  .attr("class", "squares")    // set attribute "class" to value "squares"
  .attr("x", 50)               // set attribute "x" (horizontal position) to value 50px

The selection can be based on an HTML tag, 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 decaring 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")          // select all <p> elements
  .transition("trans_1")   // transition with name "trans_1"
  .delay(0)                // transition starting 0ms after trigger
  .duration(500)           // transitioning for 500ms
  .ease(d3.easeLinear)     // transition easing progression in linear
  .style("color", "pink"); // ... to color:pink

Data-binding

for more advanced uses, loaded data drivers the creation of elements.

D3.js loads a given dataset, then, for each of its elements, creates an SVG object

with associated properties (shape, colors, values)

and behaviors (transitions, events).

// Data
var countriesData = [
    {name: "Ireland", income: 53000, life: 78, pop: 6378, color: "black"},
    {name: "Norway", income: 73000, life: 87, pop: 5084, color: "blue"},
    {name: "Tanzania", income: 27000, life: 50, pop: 3407, color: "grey"}
]
// Create SVG container
var svg = d3.select("#hook").append("svg")
            .attr("width", 120)
            .attr("height", 120)
            .style("background-color", "#D0D0D0");
// Create SVG elements from data
svg.selectAll("circle")
   .data(countriesData)
   .join("circle")                          
   .attr("id", function(d) {return d.name})
   .attr("cx", function(d) {return d.income / 1000})
   .attr("cy", function(d) {return d.life})
   .attr("r", function(d) {return d.pop / 1000 * 2})
   .attr("fill", function(d) {return d.color});

Generated SVG graphics are designed according to the provided data.

Appending nodes using data

Once a dataset is bound to a document, use of D3.js typically

follows a pattern wherein an explicit .enter() function,

an implicit "update",

and an explicit .exit() function is invoked

for each item

in the bound dataset.

Any methods chained after the .enter() command

will be called for each item in the dataset not already represented

by a DOM node

in the selection(the previous selectAll()).

Likewise, the implicit update function is called

on all existing selected nodes

for which there is a corresponding item in the dataset,

and .exit() is called on all existing

selected nodes that do not have an item

in the dataset to bind to them.

The D3.js documentation provides 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
• behaviors

Maths

• Generation of pseudorandom numbers will normal, log-normal, Bates, and Irwin-Hall distributions.
• Transformations in 2D: translation, rotations, skew, and scaling.

Arrays

D3.js 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.js 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 Voronol tesselation of a set of points.
• Support for point quadtree data structure.
• Support for basic operations on polygon.

Color

• Support for RGB, HSL, HCL, and L*a*b color representation.
• Brightening, darkening, and interpolation of colors.