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);

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


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('cx', 200)
    .attr('cy', 62);
var petal2 = svg.append('circle')
     .attr('cx', 170)
     .attr('cy', 80);
var petal3 = svg.append('circle')
    .attr('cx', 230)
    .attr('cy', 80);
var petal4 = svg.append('circle')
    .attr('cx', 170)
    .attr('cy', 120);
var petal5 = svg.append('circle')
     .attr('cx', 230)
     .attr('cy', 120);
var stem = svg.append('rect')
    .attr('width', 10)
    .attr('x', 195)
    .attr('y', 140);
var petal6 = svg.append('circle')
    .attr('cx', 200)
    .attr('cy', 138);
var center = svg.append('circle')
    .attr('cx', 200)
    .attr('cy', 100);
var ground = svg.append('rect')
    .attr('width', 400)
    .attr('x', 0)
    .attr('y', 220);

Thank you! That is perfect!


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

1 Like

Thank you for posting the additional code! :slightly_smiling_face:


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

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