Data Visualization with D3: Display Shapes with SVG

need help in solving this callenge. what am I missing

Challenge:
Add a rect shape to the svg using append(), and give it a width attribute of 25 and height attribute of 100. Also, give the rect x and y attributes each set to 0.

Code:

<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
                    svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("width", 25)
                    .attr("height", 100);
                  
                  
                  // Add your code above this line
  </script>
</body>

But the result is: there is one thing I need to rectify:
“Your document should have 1 rect element.”

somebody help please?

You may please share the challenge link too dear?

And about your code, I’m not sure(not SVG/JS expert), but should you just draw that svg somewhere? or call any function to draw?

dont use selectAll, data() and enter().

Like @souvikroyb said. That is not necesary. You just need to add one rect to the svg. With svg.selectAll("rect").data(dataset).enter() you are preparing to add a rect for each data in dataset.

append “rect” to the existing “svg”, then set the attributes

svg.append("rect") then as others have said remove data, enter, and the standalone append. You are choosing the append method because the svg element will exist once you get to that line. So you are now appending a rect inside the svg which was created at the beginning.

This code worked for me. Thanks