---
id: 587d7fa7367417b2b2512bc4
title: Work with Data in D3
challengeType: 6
forumTopicId: 301497
dashedName: work-with-data-in-d3
---
# --description--
The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.
The first step is to make D3 aware of the data. The `data()` method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.
A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the `enter()` method for this purpose.
When `enter()` is combined with the `data()` method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
Here is an example that selects a `ul` element and creates a new list item based on the number of entries in the array:
```html
```
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text `New item`.
# --instructions--
Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say `New Title`. Your code should use the `data()` and `enter()` methods.
# --hints--
Your document should have 9 `h2` elements.
```js
assert($('h2').length == 9);
```
The text in the `h2` elements should say `New Title`. The capitalization and spacing should match exactly.
```js
assert(
$('h2')
.text()
.match(/New Title/g).length == 9
);
```
Your code should use the `data()` method.
```js
assert(code.match(/\.data/g));
```
Your code should use the `enter()` method.
```js
assert(code.match(/\.enter/g));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
```