Invert SVG with D 3

JavaScript
1

Tell us what’s happening:

Hi, I seem to be stuck on this particular challenge with D3.
Everything I try doesn’t work. (d * 3) seems to put the bars in the right direction, but their heights are wrong.
Anyone can give me a hint?
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) => i * 30)
     .attr("y", (d, i) => {
       // Add your code below this line
return  (d * 3) 

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

Your browser information:

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

Challenge: Invert SVG Elements

Link to the challenge:
https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/invert-svg-elements

2

try rereading the description, it explain how to account to the fact that the 0 point is at the top of the svg area
your code will work if the 0 point would be at the bottom of the svg area

3

I am understanding more, just have a little syntax question.
How do I change the y height in a return statement? It seems however I write it it throws an error.

4

show what your last attempt is

5 
return   ('y' - 'y') (d * 3)

How exactly do I zero out the y variable?

6

I’m a little puzzled by the question, but if you want to “zero out the y variable” literally, you can return 0.

.attr("y", (d, i) => {
        return 0;
})

Of course this does not solve the challenge.

If by “zero out” you mean position the shapes at the very bottom, it might be helpful to visualize the coordinate system as follows:

(0, 0)             (width, 0)

(0, height)        (width, height)

If you consider height together with the value of the individual data point d, this should make it clearer how to position the shapes from the bottom

Let me know if it’s enough of a hint, or you need something else.

1 Like
7

if you do y - y that becomes 0. are you trying to multiply that? because everything multiplied by 0 is 0

you don’t need to zero out the y variable, you need to apply this to your specific situation:

The y coordinate that is y = heightOfSVG - heightOfBar would place the bars right-side-up.

1 Like
8

I wish I could mark both of your answers as the solution because you both helped my efforts so much here.
Thank you both.
For future users who google this question

return (h - d * 3)