gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update two pages in d3.js guide (#26433)

Browse Source 
* Update d3 guide

* Update index.md

* Update d3.js index.md

* Update d3js index.md
This commit is contained in:
Binyamin Aron Green
2019-03-21 11:58:47 -04:00
committed by The Coding Aviator
parent 041fc6866f
commit 21dd71a27d
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
guide/english/certifications/data-visualization/data-visualization-with-d3/add-document-elements-with-d3/index.md
View File

@ -3,8 +3,24 @@ title: Add Document Elements with D3
---
## Add Document Elements with D3
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/data-visualization-with-d3/add-document-elements-with-d3/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
[This challenge](https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-document-elements-with-d3) introduces three core methods of **d3.js**:
* The `d3.select()` method
* The `d3.append()` method
* The `d3.text()` method
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
### The select() Method
The select method is crucial, because it tells the browser where to put any _d3.js_ code written afterwords. In _Javascript_, you would write `document.getElementById('#myId');`. In _d3.js_, you would write `d3.select('#myId')`.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
### The append() method
The append method is similar to _jsx_ in _react_, markup in _html_ or the `appendChild()` method in _Javascript_. For Example, writing `d3.select('#myId').append('p')` would be the same as writing `...<p></p>...`
### The text() method
The text method is the third step in applying content to a page using _d3.js_. We have selected an element in our html and added an element. Now, we need to fill the empty element. We do that like this: `d3.select('#myId').append('p').text('sup World!')`. This is akin to writing `...<p>'sup World!</p>...` in html.
### The Solution
Add the folowing code to your editor:
```
d3.select('body')
.append('h1')
.text('Learning D3');
```

7
guide/english/certifications/data-visualization/data-visualization-with-d3/index.md
View File

@ -3,11 +3,8 @@ title: Data Visualization with D3
---
## Data Visualization with D3
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.(Source: [https://d3js.org](https://d3js.org))
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
* [https://d3js.org](https://d3js.org)