D3.js: Cutting-edge Data Visualization

D3.js and data binding

The example in the previous section relied upon the elements that already exist in the DOM. Normally, in D3.js we would start with a set of data, and then build visualizations based on this data. We would also want to change the visualization as the data changes as a result of either adding more data items, removing some or all of them, or changing the properties of the existing objects.

This process of managing mapping of data to visual elements is often referred to as binding of data, and in terms of the D3.js nomenclature, it is referred to as a data join (do not confuse this with an SQL join). Binding in D3.js is performed by using the .data() function of a selector.

Let's dive in, and examine a few examples of binding ...