Add Attributes to the Circle Elements (D3 challenge)

Add Attributes to the Circle Elements (D3 challenge)
0.0 0

#1

Tell us what’s happening:
I think I got the rest of the code correct except

The r value should be 5 for all circles.

Not sure what to pass in for that.

Your code so far


<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
    
    
    const w = 500;
    const h = 500;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       // Add your code below this line
       .attr("cx", (d) => d[0])
       .attr("cy", (d) => d[1])
       .attr("r", 5)
       
       
       
       // Add your code above this line
  
  </script>
</body>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements


#2

I think the problem is this part of the requirement : "The cy value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. " For that reason, attr("cy", (d) => d[1]) needs to be adjusted for the chart to not be inverted. More precisely, the callback function should return something other than d[1].


#3

I think that
cx and cy need both d,i (data, index) and
cy needs height-d[1].

I made the same error.


#4

actually they dont.
only h parameter


#5

Really? I over-coded…
Thanks.


#6

Thanks guys, I figured it out.


#7

I’m so glad.

What was the final solution?


#8

Here it is.


.attr(“cx”, (d) => d[0])
.attr(“cy”, (d) = h - d[1])
.attr(“r”, 5)


#9

Thank you. It’s funny how it makes sense after the fact.

No more over-coding for me :blush: