Not understanding Data Visualization with D3 exercise

Tell us what’s happening:
Describe your issue in detail here.

I don´t understand why by multiplying index by 3, I´m adding space between each bar. Am I multipliying 0, 1, 2, 3, 4, 5, 6, 7, 8 by 3? The space between them is the same, is not 0, 30, 60, etc. I have the feeling that I am adding 5 to the 25 width of the rectangle, but I cannot find out how.

And another thing, when “d” means “data point”, does it refer to the values inside “const dataset” (12, 31, 22)?

  **Your code so far**

<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")
     .data(dataset)
     .enter()
     .append("rect")
     .attr("x", (d, i) => {
       // Add your code below this line
      return i * 30


       // Add your code above this line
     })
     .attr("y", 0)
     .attr("width", 25)
     .attr("height", 100);
</script>
</body>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Challenge: Dynamically Set the Coordinates for Each Bar

Link to the challenge:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.