* Guide to the Data Visualization with D3 Work with Data in D3 * Guide to data visualization with d3 work with data in d3 * Delete index.md
59 lines
3.2 KiB
Markdown
59 lines
3.2 KiB
Markdown
---
|
||
title: Work with Data in D3
|
||
---
|
||
|
||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
||
|
||
### Problem Explanation:
|
||
We need to make `h2` element as much as the number of values in `dataset` with a text `New Title`, using the `data()`, `enter()` functions.
|
||
|
||
##  Hint: 1
|
||
|
||
* You will need to select the `body` node, then select all `h2` elements.
|
||
|
||
> _try to solve the problem now_
|
||
|
||
##  Hint: 2
|
||
|
||
* You will need to D3 create and append an h2tag using `append()` for each item in the datasetarray using `data()` and `enter()`.
|
||
|
||
> _try to solve the problem now_
|
||
|
||
##  Hint: 3
|
||
|
||
* The text in the `h2` should say `New Title` by `text()` function.
|
||
|
||
> _try to solve the problem now_
|
||
|
||
## Spoiler Alert!
|
||
|
||

|
||
|
||
**Solution ahead!**
|
||
|
||
##  Basic Code Solution:
|
||
```javascript
|
||
<body>
|
||
<script>
|
||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||
|
||
// Add your code below this line
|
||
d3.select("body").selectAll("h2")
|
||
.data(dataset)
|
||
.enter()
|
||
.append("h2")
|
||
.text("New Title");
|
||
// Add your code above this line
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
##  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 <20> **Basic**, **Intermediate** and **Advanced**. 
|
||
* Please add your username only if you have added any **relevant main contents**. ( **_DO NOT_** _remove any existing usernames_)
|
||
|
||
> See  <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.
|