CUFP 2014 Tutorial D3.js Basics

Wiki ▸ [CUFP 2014 Tutorial](CUFP 2014 Tutorial) ▸ D3.js Basics

The selection is the core concept of D3. A selection represents an ordered collection of elements that support several operators. An operator modifies the elements in the selection in one of several ways. For example, there is an operator that to modify an attribute of the elements in the selection, and there is another to modify their text content. When you apply an operator to a selection, it affects every element in the selection.

Operators return the selection that they modified, thus allowing you to method chain operators in a single expression. For example, the following expression will select all the <image> element in the document, set their class attribute to "thumbnail" and their width attribute to 200:

d3.selectAll('image')
  .attr('class', 'thumbnail')
  .attr('width', 200);

Note that the presentation of the selection operators below is specific to the needs of this tutorial. Many of the operators discussed have additional arities and corresponding behavior. For a more thorough treatment of the operators, see the see the Selection documentation on the D3 wiki.

# d3.select(selector)

Create a selection containing the first element in the document that matches the CSS selector string. If no element matches the selector string, the selection will be empty. If multiple elements match the selector string, the selection will contain only one element—the first one that matches.

# d3.selectAll(selector)

Create a selection containing all the elements in the document that match the CSS selector string.

# selection.attr(name, value)

Set the specified attribute of all the selected elements to the specified value.

#selection.text(value)

Set the contents of each element to be text interpreted as plain text.

# selection.html(value)

Set the contents of each element in the selection to be value, interpreted as HTML. This operator makes use of the innerHTML property which will clear the contents of each element before adding the new HTML content.

Note that this only works with HTML documents.

# selection.append(name)

Append an element with the specified name as a child to each element in the selection.

# selection.remove()

Removes the elements in the selection from the document.

Exercises

For all D3.js exercises, use tributary.io for an interactive coding environment that allows you to save your work. Each excercise below builds on the previous one. Use the same tributary "inlet" as they're called and just continue to append text to the buffer. Click here to open an inlet with the exercise instructions included as comments.

1. Create three SVG circle elements, each with different radii ("r" attribute) and locations ("cx" and "cy" attributes) on the screen.
2. Modify all the circles to have the same radius.
3. Create a new circle somewhere on the screen with a different radius than the other three.
4. Remove the second circle.
5. Change the third (now second) circle to have a different radius.

Next: D3.js Data Join