CUFP 2014 Tutorial D3.js Data Join

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

Most people have the misconception that D3 is a visualization library. It is not. It is a library that allows you to define the structure and content of a document in terms of the structure and content of your data. That is why the name D3 was chosen: it stands for Data-Driven Documents.

Using data joins requires learning about several new selection operators as well as features of some of the existing operators.

# selection.data(array)

The data operator introduces a data join. It asserts a one-to-one correspondence between the elements in the selection and the items in array. Here's an example of its use:

var selection = d3.selectAll('circle')
  .data([1, 2, 3]);

The result of the data join operation is what's called the update selection. The update selection contains all the elements that are already in correspondence with the items in the array. But as the data that the elements are associated with may have changed, it is necessary to ensure that its elements faithfully reflect the form of the data they're associated with. You can do this by applying operations to the selection while also specializing to operation on a per-element basis. For example, the attr operation can take a function as its second argument. The function will be passed the data associated with the element as well as the element's index in the selection. Here's how to set the "r" attribute of an element to the data bound to the element:

selection.attr('r', function(d, i) { return d; });

# selection.enter()

Returns a selection containing placeholder elements for new data that does not yet have a corresponding element in the document.

selection.enter().append('circle');

Any elements creates via the enter selection will be included in the update selection, so that subsequent operations on the update selection will also be applied to newly-created elements. In practice this means that you do not need to duplicate update operations in the enter and update selection. You can separate initialization operations (e.g., setting the "class" attribute of an element) and update operations (ones that are data-dependent), applying the first to the enter selection and applying the second to the update selection

# selection.exit()

Return a selection containing the elements that have no longer have data associated with them. In the most common cases, the exit selection will be used to remove elements from document:

selection.exit().remove();

Exercises: Redux

Click here to open an inlet with the exercise instructions included as comments. This is the same base inlet with the same inlet from the previous section. This time, use data joins to build up and modify your SVG document.

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.

Exercises

1. Create a simple bar chart. The SVG rect element will be essential to this task. Click here for a tributary.io inlet with the data pre-populated.
2. Create a scale model of the solar system. Click here for a tributary.io inlet with the data pre-populated.

Additional Reading

• Thinking with Joins

Next: Reusable Charts Pattern