D3 Practical: Invert SVG Elements

Code Feedback
1

Hi guys.
Can you review my code and advise as to where I have messed up?

<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) => i * 30)
       .attr("y", (d, i) => {
         // Add your code below this line
return (d - 1) * 3


         // Add your code above this line
       })
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d);
  </script>
</body>
2

Can you post your current code & link to challenge :slight_smile:

3

Thanks for your quick intervention, but I have already solve the problem. However, there are certain issues I am not familiar with: If you look at my code, why is it not fully compliant with the requirements seeing that the first and last bars are not on the same level with others? How is it so?

4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Without this, your code was invisible for everyone else!

5

Your problem is here:
return (d - 1) * 3

You are calculating the y-coordinate incorrectly. Where did you get (d-1) from?

Take another look at this part of the instructions which give the expression you need to use:

In general, the relationship is y = h - m * d , where m is the constant that scales the data points.

In this, d is the data point. See if you can figure out what h and m should be.

1 Like
6

Thanks a lot. I had not read sufficiently the demands of the question before tackling it, hence the mistake. I am happy to say that has been rectified. Thanks once more for the insightful advice, I really appreciate it.

7

You’re welcome, happy to help!

1 Like