freeCodeCamp Challenge Guide:Data Visualization with D3: Add Attributes to the Circle Elements

freeCodeCamp Challenge Guide:Data Visualization with D3: Add Attributes to the Circle Elements

Add Attributes to the Circle Elements


Problem Explanation

Add attributes to each Circle from the previous challenge to define its position (X coordinate & Y coordinate) and its size (radius)


Hints

Hint 1

break down the requirements from the question:
-add cx attribute
-add cy attribute
-add r attribute

Hint 2

-use .attr() to set attribute.
-dataset is a of arrays inside array, to access it you should do something like d[index] (not sure the best wording here)
-Calculate the cy value by subtracting the dataset y vaule from SVG height h (moved to last bullet and reworded)


Solutions

Solution 1 (Click to Show/Hide)
.attr("cx",(d)=>d[0])
.attr("cy",(d)=> h - d[1])
.attr("r",5)

I am assuming this is to added to the challenge information for ‘Get Hint’.

The first line Header should be the challenge name.

Problem explanation; maybe add something short and simple like:
“Add attributes to each Circle from the previous challenge to define its position (X coordinate & Y coordinate) and its size (radius)”

Relevant links: add the D3 documentation or remove header? I couldn’t find anything in a quick search

Hints: (minor grammar edits)
1:
‘breakdown’ to ‘break down’
2:
-use .attr() to set attributes
-dataset is a of arrays inside array, to access it you should do something like d[index] (not sure the best wording here)
-Calculate the cy value by subtracting the dataset y vaule from SVG height h (moved to last bullet and reworded)

Solutions:
Fix the code to be in a block and remove the link to forum post.

I think overall this is great, just needs some formatting edits. I’m not sure the process of submitting "get hints and if it should be done through the Forum or Github. I would think the best section on the forum would be #contributors though.

Again, most of the changes I made above were personal preferences and thank you for helping fill in the ‘hints’ gaps!

1 Like

thanks! edited based on your suggestions