Data Visualization with D3: Create a Bar for Each Data Point in the Set

Dear guys,

I`m struggeling for to long on finding the solution to this problem:

<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);
    
    svg.selectAll("rect")

       // Add your code below this line

.data(dataset)
.enter()
.append("rect")

       // Add your code above this line

       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

There is only one Rect shown by using this solution. I did some test like appending ".text(“bla”) which works fine. Tried to find a solution by reading other introductions to d3.svg, but still can`t figure out how to solve this task. Could you please help me?

Thank you!

i think this is right
it passed for me

Passed for me too. The reason you don’t see multiple bars is given in the next challenge:

The last challenge created and appended a rectangle to the svg element for each point in dataset to represent a bar. Unfortunately, they were all stacked on top of each other.

hi, my challenge cant pass, it required all the nine bars in this step. My code below:- it says “Your document should have 9 rect elements.”

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

You have
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

and .data("dataset")

Do you see the problem with the way the data set was passed?

I cant notice any problem with the data… any help?

Look at the way you’ve defined dataset and look at how you passed it. dataset is an array, not to be passed as a string.

1 Like

oh! thank you much. Appreciate

1 Like