Selecting and modifying DOM elements

D3.js provides a variety of functions to manipulate elements of the DOM tree, such as setting their attributes, changing their content, creating new elements, or removing them. As you learned in the first chapter, instead of looping through elements and modifying them one by one, with D3.js, we are applying transformations in a declarative way directly to an array of elements. We call the object that stores all the elements in an array a Selection.

To extract such an array of elements from the DOM tree, D3.js offers the d3.selectAll(selector) function to select all elements of a specific type and the d3.select(selector) function to select just a single element. While both functions return a Selection that contains an array of elements, the latter function returns an array with solely a single element.

To tell D3.js which elements we want to select, we use so-called CSS selectors (these are the standard CSS selectors that most developers are already familiar...