Data Visualization with D3 - Dynamically Set the Coordinates for Each Bar

Tell us what’s happening:
Test was passed successfully (with answer: return i30;) .
However, when answer is altered to: return i
30 + “px”; the test is not passing DESPITE the output bars being correctly placed in the svg element.

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 + "px";
         // 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Data Visualization with D3 - Dynamically Set the Coordinates for Each Bar

Link to the challenge:

Remove the px so you can pass the test.

1 Like

Test is passed exactly like that.
My question is: is adding ‘px’ a logical error that I should avoid (output is correct). If not, and this is some issue with answer checking mechanism, then its fine. Mainly, I want to correct myself if this is some logical error!
Thanks

Look at the other .attr(...) calls that are setting y, height, and width without the px. SVG units are arbitrary (else it’s not scalable…).

Thanks. My query fully resolved. And learned something important/

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