Add Attributes to the Circle Elements (D3 challenge)

JavaScript
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:

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].

2 Likes
3

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

I made the same error.

2 Likes
4

actually they dont.
only h parameter

2 Likes
5

Really? I over-coded…
Thanks.

1 Like
6

Thanks guys, I figured it out.

7

I’m so glad.

What was the final solution?

1 Like
8

Here it is.


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

1 Like
9

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

No more over-coding for me :blush:

2 Likes
10

Change : .attr(“cy”, (d, i) => h - d[1])

11

I had a similar solution as all the above originally. Tried their versions and nothing passed except for the 1st test condition. Your version passed all tests. THANKS!!! Was going crazy trying to figure this one out.

12

i this case we want to work same like as bar chart .attr("cy", (d)=>500 - d[1])

13 
   .attr("cx",(d)=>d[0])
   .attr("cy",(d)=>500-d[1])
   .attr("r",5)