# Flower Power explainer

The aim of this puzzle: Change the size of all the petals.
Walkthrough of the solution: The size of a circle is determined by its radius. The name of the radius attribute is just `'r'`. You can use `.attr()` on an identifier (like `petal2`) to set a new value for its radius. For this puzzle, you want all the petals to have a 25 pixel radius – the same as the `center`. To do this you need to change the number inside of each `.attr()` from 12 to 25.
Sample code solution:
(Tap below to reveal)

``````center.attr('r', 25);
petal1.attr('r', 25);
petal2.attr('r', 25);
petal3.attr('r', 25);
petal4.attr('r', 25);
petal5.attr('r', 25);
petal6.attr('r', 25);
``````

JavaScript Concepts: Identifiers, Member Expression
D3 Concepts: .attr(‘r’,)
Additional Code (hidden code that runs before the puzzle’s code):

``````var petal1 = svg.append('circle').attr('fill','red').attr('cx', 200).attr('cy', 62);
var petal2 = svg.append('circle').attr('fill','red').attr('cx', 170).attr('cy', 80);
var petal3 = svg.append('circle').attr('fill','red').attr('cx', 230).attr('cy', 80);
var petal4 = svg.append('circle').attr('fill','red').attr('cx', 170).attr('cy', 120);
var petal5 = svg.append('circle').attr('fill','red').attr('cx', 230).attr('cy', 120);

var stem = svg.append('rect');
stem.attr('width', 10).attr('height',120).attr('fill','green').attr('x', 195).attr('y', 140);

var petal6 = svg.append('circle').attr('fill','red').attr('cx', 200).attr('cy', 138);

var center = svg.append('circle').attr('fill','yellow').attr('cx', 200).attr('cy', 100);

var ground = svg.append('rect');
ground.attr('width', 400).attr('height',60).attr('fill','green').attr('x', 0).attr('y', 220);
``````
3 Likes

Hi. Could you please copy here the rest of the code? I’d be really interested to see it. Thank you

3 Likes

Hi @Alina_D,

Do you mean the additional (hidden) code? See below (it’s quite a lot, just as a warning!) — positions such as `cx` and `cy`, or `x` and `y` will be covered in the next topic:

``````var petal1 = svg.append('circle')
.attr('fill','red')
.attr('cx', 200)
.attr('cy', 62);
var petal2 = svg.append('circle')
.attr('fill','red')
.attr('cx', 170)
.attr('cy', 80);
var petal3 = svg.append('circle')
.attr('fill','red')
.attr('cx', 230)
.attr('cy', 80);
var petal4 = svg.append('circle')
.attr('fill','red')
.attr('cx', 170)
.attr('cy', 120);
var petal5 = svg.append('circle')
.attr('fill','red')
.attr('cx', 230)
.attr('cy', 120);
var stem = svg.append('rect')
.attr('width', 10)
.attr('height',120)
.attr('fill','green')
.attr('x', 195)
.attr('y', 140);
var petal6 = svg.append('circle')
.attr('fill','red')
.attr('cx', 200)
.attr('cy', 138);
var center = svg.append('circle')
.attr('fill','yellow')
.attr('cx', 200)
.attr('cy', 100);
var ground = svg.append('rect')
.attr('width', 400)
.attr('height',60)
.attr('fill','green')
.attr('x', 0)
.attr('y', 220);
``````
7 Likes

Thank you! That is perfect!

2 Likes

I was in a search of this code only, thanks a lot…

1 Like

Thank you for posting the additional code!

2 Likes

How do we decide value of ‘cx’ ‘cy’ ‘x’ and ‘y’ ?

Hello, sir. Do you know the answer to this question now?