A selection is an array of elements pulled from the current document according to a particular CSS selector. This can be anything from a class, to an ID, to a tag name. We can even use pseudo-selectors, allowing us to do things, such as selecting every other paragraph tag using p:nth-child(n+1).

Using CSS selectors to create a chained series of manipulations gives us a simple language for defining elements in the document. It's actually the same as you're used to in jQuery and CSS.

To get the first element with ID as graph, we use d3.select('#graph') . To get all the elements with the class blue, we write d3.selectAll('.blue') . To get all the paragraphs in a document, we use d3.selectAll('p').

We can combine these to get a more complex matching. You can perform a Boolean AND operation using the selector .llama.duck; it will get elements that have both the .llama and .duck classes. Alternatively, you might perform an OR operation with .llama, .duck to get every element that is either a llama or a duck. However, what if you want to select child elements? Then, nested selections to the rescue!

You can do it with a simple selector, such as tbody td, or you can chain two d3.selectAll() calls as d3.selectAll('tbody').selectAll('td'). Both will select all the cells in a table body. Keep in mind that nested selections maintain the hierarchy of selected elements, which gives us some interesting capabilities.