# freeCodeCamp Challenge Guide: Learn About SVG in D3

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-about-svg-in-d3/301489>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 1:07pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-about-svg-in-d3/301489 "2019-08-03T13:07:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 1:07pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-about-svg-in-d3/301489/1 "2019-08-03T13:07:31Z")

</div>

# [Learn About SVG in D3](https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3)

* * *

## Hints

### 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.

### 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.

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <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>
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:58pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-about-svg-in-d3/301489/2 "2025-01-08T15:58:11Z")

</div>