diff --git a/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md b/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md index b9b1496633..f40da1f730 100644 --- a/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md +++ b/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md @@ -2,9 +2,73 @@ title: Work with Data in D3 --- ## Work with Data in D3 + Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program  and write your own code  -This is a stub. Help our community expand it. +### Problem Explanation: -This quick style guide will help ensure your pull request gets accepted. +This challenge uses the `select`, `selectAll`, `append`, and `text` methods seen in previous challenges. It adds 2 new D3 methods: `data` and `enter` to target the given data and display an element on the page for each datum - +#### Relevant Links + +From the official D3 documentation: +* [data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) +* [enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) + +##  Hint: 1 + +* After selecting the correct HTML nodes, use the `data` method with the `dataset` variable passed as an argument to make the D3 object aware of the data + +> _try to solve the problem now_ + +##  Hint: 2 + +* Use the `enter` method to ensure that your HTML document has enough elements of the type you specified in `selectAll` for each datum + +> _try to solve the problem now_ + +##  Hint: 3 + +* Now that the D3 object is aware of your data and has created enough elements for each datum, `append` the elements of the specified type and add the `text` required in the instructions + +> _try to solve the problem now_ + +## Spoiler Alert! + +**Solution ahead!** + +##  Basic Code Solution: +```javascript +
+ + +``` + +# Code Explanation: + +* `d3` targets the D3 object +* `select('body')` is used to `select` the 'body' element of the HTML document +* `selectAll('h2')` is used to `selectAll` of the 'h2' elements that are children to 'body' +* `data(dataset)` calls the D3 `data` method and uses the given dataset as an argument +* `enter()` uses the D3 `enter` method to check the current number of elements selected and create any missing ones according to the amount needed by the dataset +* `append('h2')` takes these newly created elements from `enter` and ensures they are created as 'h2' elements +* `text('New Title')` changes the text of every element selected to 'New Title' +* The dataset contains 9 datum, so the final solution should show 9 'h2' elements with the text 'New Title' + + +##  NOTES FOR CONTRIBUTIONS: + +*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. +* Add an explanation of your solution. +* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**.  +* Please add your username only if you have added any **relevant main contents**. ( **_DO NOT_** _remove any existing usernames_) + +> See  **`Wiki Challenge Solution Template`** for reference.