# freeCodeCamp Challenge Guide: Display Shapes with SVG

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-display-shapes-with-svg/301485>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 1:07pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-display-shapes-with-svg/301485 "2019-08-03T13:07:03Z")\
**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-display-shapes-with-svg/301485/1 "2019-08-03T13:07:04Z")

</div>

# [Display Shapes with SVG](https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/display-shapes-with-svg)

* * *

## Problem Explanation

This challenge can be approached in a similar fashion to the previous one; with the difference being that, this time, you must add a specified shape **within** the appended SVG node. SVG supports several shape definitions, but in this instance, we will use **rect**.

* * *

## Hints

### Hint 1

Check that you have appended the **rect** using D3’s ‘append()’ method. (Be sure to enclose **rect** in quotation marks).

### Hint 2

Now assign attributes to the shape using D3’s ‘.attr()’ method. You can chain multiple uses of this method. Remember when assigning x and y co-ordinates that within the SVG area, point (0,0) occurs on the top- **left**. As such, while x values dictate how far right an element moves, y values will dictate how far **downward** it moves from the origin point.

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <body>
> <script>
> const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
>     
> const w = 500;
> const h = 100;
>     
> const svg = d3.select("body")
> .append("svg")
> .attr("width", w)
> .attr("height", h)
> // Add your code below this line
> .append("rect")
> .attr("width", 25)
> .attr("height",100)
> .attr("x",0)
> .attr("y",0);
>                   
>                   
> // Add your code above this line
> </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-display-shapes-with-svg/301485/2 "2025-01-08T15:58:10Z")

</div>