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

provide hints+solution to SVG/D3 Challenge (#29509)

Browse Source 
* provide hints+solution to SVG/D3 Challenge

* fix: removed stub info
This commit is contained in:
James Hogan
2019-06-11 17:48:22 +01:00
committed by Randell Dawson
parent a827e1c910
commit 65bccdb9bd
1 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
guide/english/certifications/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3/index.md
View File

@ -3,8 +3,33 @@ title: Learn About SVG in D3
---
## Learn About SVG in D3
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
### Hint 1
First ensure that you have appended the SVG node to the document body. You can do this using d3's 'append()' - don't forget to enclose "svg" in quotation marks.
<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>.
### Hint 2
To assign CSS properties to the SVG node - in this case 'width' and 'height' - make use of d3's 'attr()'method. You can use the parameters 'w' and 'h' provided, respectively.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
### Solution (!!SPOILER ALERT!!)
```
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
.append("svg")
.attr("width",w)
.attr("height",h);
</script>
</body>
```